2017-10-02 65 views
5

Tôi có một View (Index.cshtml) có hai phương thức (phương thức Bootstrap).Xác thực nhiều chế độ xem một phần mà không cần BeginForm trong Chế độ xem

Tôi đã tải một Partial View trong mỗi ‍‍‍ modal. Vì vậy, trong số này View Tôi có hai số Partial Views (AddContractHistory.cshtmlAddCompany.cshtml).

Tôi có mô hình là các trường trong số đó phải được xác thực trong mỗi Partial Views.

Tôi cần xác thực riêng từng chế độ xem một phần.

Trong cùng một vấn đề của người khác sử dụng Html.BeginForm nhưng tôi làm việc trên mô-đun MVC và DNN 8 đã không hỗ trợ Html.BeginForm hoặc Ajax.Html.BeginForm.

Để thực hiện công việc này mà không cần BeginForm, tôi đã thử nghiệm nhiều cách như dưới đây nhưng tôi không thể thực hiện được.

ASP.NET MVC Validation Groups?

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

Index.cshtml (Xem)

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

Cảm ơn trước!

+0

Không quen thuộc với DNN, nhưng bạn cần

để xác thực jquery. https://stackoverflow.com/questions/23871160/need-approach-to-be-able-to-validate-div-with-elementsusing-unobtrusive-jquery/23872391#23872391 –

+0

@SteveGreene Vấn đề của tôi không liên quan đến DNN . Như một vấn đề của thực tế, tôi sẽ tạo ra hai nhóm điều khiển và hai nút gửi trong một với kiểm soát xác nhận. Không có cách nào khác ư? –

+0

Tôi không thấy thẻ trong ví dụ của bạn. Có phải vấn đề của bạn là việc xác thực không hoạt động chút nào hoặc bạn muốn xác thực các lớp một phần một cách độc lập? –

Trả lời

0

Nói chung, tôi khuyên bạn nên tích hợp thêm mã JS (JQuery?) Trong các chế độ xem của bạn. Bằng cách đó, bạn sẽ ít bị ràng buộc vào một số khung công tác (DNN) không hỗ trợ chức năng MVC cơ bản mà bạn thường sử dụng. Sau khi tất cả - một ứng dụng web boils xuống HTML + JS + CSS, do đó, các kiến ​​thức JS tốt hơn bạn có - kiểm soát tốt hơn và linh hoạt bạn đạt được.

Về câu hỏi của bạn, MVC tiêm mã JS để bạn xử lý các lỗi xác thực khi gửi. Bạn có thể tự bắt chước hành vi này. Nó sẽ đưa bạn một thời gian, nhưng bạn sẽ có được toàn quyền kiểm soát quá trình này.

Khi trang được tải (sự kiện JS), bạn có thể hoàn thành một số công việc thông qua JS, như gói một phần lượt xem với thẻ mong muốn <form> và/hoặc liên kết với các sự kiện gửi. Đơn giản như vậy.

Nhưng việc gửi biểu mẫu thông thường sẽ làm mới trang của bạn, mất dữ liệu/trạng thái xem một phần khác. Vì vậy, nếu bạn cần, bạn có thể đăng/nhận dữ liệu của bạn thông qua AJAX (một lần nữa JQuery?) Và cập nhật trang của bạn cho phù hợp.

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

Sau đó, trong kịch bản của bạn, bạn có thể làm một cái gì đó như thế này:

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

Bằng cách này bạn sẽ có được toàn quyền kiểm soát trang của bạn và các bộ phận của nó. Không có vấn đề trong đó khuôn khổ bạn sẽ làm việc với.Điều gì có thể tốt hơn? :)

Các vấn đề liên quan