ビュー内にBeginFormなしで複数のパーシャルビューを確認する

Question

View (Index.cshtml)には2つのモーダル（ブートストラップモーダル）があります。

modalにPartial Viewをロードしました。したがって、このViewには2つのPartial Views（AddContractHistory.cshtmlとAddCompany.cshtml）があります。

私は、フィールドのそれぞれがPartial Viewsで検証されるべきモデルがあります。

それぞれの部分的なビューを個別に検証する必要があります。同じ問題、他の人に

はHtml.BeginFormを使用しますが、私はMVCモジュール上で動作し、DNN 8はHtml.BeginFormまたはAjax.Html.BeginFormをサポートしていません。

BeginFormを除いてこの作業を行うには、以下のようにさまざまな方法でテストしましたが、できませんでした。

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple form in one page: Validation doesn't work

Index.cshtml（ビュー）

@using MyProject.BusinessLogic 
<div class="form-group"> 
    <div class="col-sm-12"> 
     <button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');"> 
      <i class="fa fa-plus"></i> 
      New ContractHistory 
     </button> 
    </div> 
    <div class="col-sm-12"> 
     <button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');"> 
      <i class="fa fa-plus"></i> 
      New Company 
     </button> 
    </div> 
</div> 

<div id="AddContractHistory" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg" id="mymodal"> 
     @Html.Partial("AddContractHistory", new ContractHistory()) 
    </div> 
</div> 
<div id="AddCompany" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg" id="mymodal"> 
     @Html.Partial("AddCompany", new Company()) 
    </div> 
</div> 

AddContractHistory.cshtml（PartialView）

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory> 

<div id="myform"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">contract</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="panel-body"> 
        <div class="form-horizontal"> 
         @Html.ValidationSummary() 
         @Html.HiddenFor(c => c.ID) 
         <div class="form-group"> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.PlaceName) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.ActivityDescription) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-success" formaction="AddContractHistory"> 
submit 
      </button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> 
     </div> 
    </div> 
</div> 

AddCompany.cshtml（PartialView）事前に

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company> 

<div id="myform"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Company</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="panel-body"> 
        <div class="form-horizontal"> 
         @Html.ValidationSummary() 
         @Html.HiddenFor(c => c.ID) 
         <div class="form-group"> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.PlaceName) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.ActivityDescription) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-success" formaction="AddCompany"> 
       submit 
      </button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> 
     </div> 
    </div> 
</div> 

ありがとう！

Answer 1

一般的に、より多くのJSコード（JQuery？）をビューに統合することをお勧めします。このようにして、以前使っていた基本的なMVC機能をサポートしていないフレームワーク（DNN）に縛られることは少なくなります。結局のところ、WebアプリケーションはHTML + JS + CSSになっているので、あなたが持っている優れたJS知識 - より良い制御と柔軟性を得ることができます。

あなたの質問に関して、MVCは送信時に検証エラーを処理するためのJSコードを挿入します。あなたはこの行動を自分自身で模倣することができます。時間がかかりますが、このプロセスを完全にコントロールできます。

ページがロードされると（JSイベント）、希望の<form>タグを使用してパーシャルビューをラップするか、サブミットイベントにバインドするなど、JS経由でいくつかの作業を完了できます。 そのように簡単です。

しかし、通常のフォーム提出はページを更新し、他の部分表示データ/状態を失います。したがって、必要な場合は、AJAX（再びJQuery？）を介してデータを投稿/取得し、それに応じてページを更新することができます。あなたがあなたのページとその部品を完全に制御を得るでしょう。このように

$('form[data-reza-ajaxform]').on('submit', submitAjaxForm); 
... 
function submitAjaxForm(e) { 
    var $form = $(this); 

    var options = { 
     url: $form.action, 
     method: $form.method, 
     data: $form.serialize() 
    }; 

    $.ajax(options) 
     .success(function(res) { 
      var $target = $($form.attr('data-reza-targetId')); 

      $target.html(res); 
      $target.effect('highlight', 'slow'); 
    }); 

    e.preventDefault(); 
} 

：

<form data-reza-ajaxform="true" 
     data-reza-targetId="#your-htmlcontrol-id" 
     action="@Url.Action("Your Action")" 
     method="POST/GET"> 
      <div class="input-group"> 
       <input type="text" ...> 
       ... 
       <button class="btn btn-default" type="submit">Go!</button> 
      </div> 
</form> 

次に、スクリプトであなたはこのような何かを行うことができます。どんなフレームワークで作業しても問題ありません。何が良い？ :)