Bir Bakışta BeginForm olmadan birden çok Kısmi görünümünü doğrulayın

Question

İki modele (Bootstrap modal) sahip bir View (Index.cshtml) sahibim.

Her biri modal numaralı telefona bir Partial View yükledim. Yani bu View'da iki tane Partial Views (AddContractHistory.cshtml ve AddCompany.cshtml) var.

Bunların her birinin Partial Views her birinde doğrulanması gereken bir modelim var.

Her kısmi görünümü ayrı ayrı doğrulamam gerekir. Aynı sorun diğer insanlar

Html.BeginForm kullanılan ama Html.BeginForm veya Ajax.Html.BeginForm desteklemediği etmiştir MVC modülü ve DNN 8 çalışır.

BeginForm olmadan çalışmak için, aşağıdaki gibi birçok şekilde test ettim ama yapamadım.

ASP.NET MVC Validation Groups?

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

Index.cshtml (Görünüm)

@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) önceden

@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> 

teşekkürler!

Answer 1

Genel olarak, görünümlerinize daha fazla JS kodu (JQuery?) Eklemenizi öneririm. Bu şekilde, alıştığınız temel MVC işlevselliğini desteklemeyen bazı çerçevelere (DNN) daha az sınırlanmış olacaksınız. Her şeyden önce - bir web uygulaması HTML + JS + CSS'ye kayıyor, böylece sahip olduğunuz daha iyi JS bilgisi - elde ettiğiniz daha iyi kontrol ve esneklik.

Sorunuza ilişkin olarak, MVC, gönderim sırasında doğrulama hatalarını ele almanız için JS kodunu enjekte eder. Bu davranışı kendiniz taklit edebilirsiniz. Sizi biraz zaman alacak, ancak bu süreç üzerinde tam kontrol sahibi olacaksınız.

Sayfa yüklendiğinde (JS olayı), kısmi görünümlerinizi istediğiniz <form> etiketiyle sarmalama ve/veya gönderme olaylarına bağlama gibi bazı işleri JS yoluyla tamamlayabilirsiniz. Bunun kadar basit.

Ancak düzenli form gönderimi, sayfanızı yenileyecek ve diğer kısmi görünüm verilerini/durumlarını kaybedecektir. Yani, ihtiyacınız varsa, verilerinizi AJAX (yeniden JQuery?) Aracılığıyla gönderebilir/alabilirsiniz ve sayfanızı buna göre güncelleyebilirsiniz. Eğer sayfa ve bölümleri üzerinde tam kontrol elde edersiniz Bu şekilde

$('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> 

Ardından, komut böyle bir şey yapabilirsiniz. Hangi çerçeve ile çalışacak olursanız olun.Daha iyi ne olabilir? :)