Sprawdzanie wielu częściowego widoku bez BeginForm w widoku

Question

Mam View (Index.cshtml), który ma dwa modały (mod Bootstrap).

Załadowałem Partial View w każdym modal. Tak więc w tym View mam dwa Partial Views (AddContractHistory.cshtml i AddCompany.cshtml).

Mam model, którego pola powinny być zatwierdzone w każdym Partial Views.

Muszę sprawdzić osobno każdy widok częściowy.

W ten sam problem innych ludzi stosowany Html.BeginForm ale pracuję nad moduł MVC i DNN 8 nie obsługują Html.BeginForm lub Ajax.Html.BeginForm.

Do wykonania tej pracy bez BeginForm, testowałem na wiele sposobów jak poniżej, ale nie mogłem tego zrobić.

ASP.NET MVC Validation Groups?

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

Index.cshtml (Zobacz)

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

Z góry dzięki!

Answer 1

Ogólnie, polecam zintegrować więcej kodu JS (JQuery?) W swoich widokach. W ten sposób będziesz mniej ograniczony do pewnej struktury (DNN), która nie obsługuje podstawowej funkcjonalności MVC, do której jesteś przyzwyczajony. W końcu - aplikacja internetowa sprowadza się do HTML + JS + CSS, więc masz lepszą wiedzę o JS - lepszą kontrolę i elastyczność, którą zyskujesz.

Odnośnie do Państwa pytania, MVC wprowadza kod JS, aby móc obsługiwać błędy zatwierdzania po ich przesłaniu. Możesz naśladować to zachowanie samemu. Zajmie ci to trochę czasu, ale zyskasz pełną kontrolę nad tym procesem.

Po załadowaniu strony (zdarzenie JS) można wykonać niektóre prace za pomocą JS, np. Owijać częściowe widoki żądanym znacznikiem <form> i/lub powiązać z przesyłanymi zdarzeniami. To takie proste.

Jednak regularne przesyłanie formularzy odświeży twoją stronę, tracąc inne dane/stan częściowego widoku. Tak więc, jeśli potrzebujesz, możesz wysłać/odebrać dane przez AJAX (ponownie JQuery?) I odpowiednio zaktualizować stronę.

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

Następnie w skrypcie można zrobić coś takiego:

$('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(); 
} 

W ten sposób zyskasz pełną kontrolę nad swoją stronę i jego części. Bez względu na to w jakich ramach będziesz pracować.Co może być lepszego? :)