jQuery對話框中的元素沒有被綁定到ViewModel在郵政

我有兩個視圖（創建/編輯）使用EditorTemplate GET/POST的用戶輸入。 EditorTemplate有一個jQuery對話框來捕獲一些額外的信息。jQuery對話框中的元素沒有被綁定到ViewModel在郵政

對話框內的元素，當我提交表單沒有張貼。因此，它也搞亂了驗證。驗證會觸發並更改元素的CSS類，但在編輯後不會更改。

當我拉出來的對話框中的元素，將值綁定到視圖模型和驗證工作正常。

我以前複製值對話框中（使用不同的名字），一些隱藏的字段綁定到視圖模型 - 這個工作，但驗證了隱藏字段，而不是那些與實際值。

如何我可以綁定元素到視圖模型，並仍然使用jQuery的對話？

代碼示例

@* The Create View *@ 

@using(Html.BeginForm()) 
     { 
      @Html.ValidationSummary(false, "Please fix these errors:"); 
      @Html.EditorForModel("JobRecord", Model); 
      <div id="button"> 
       <p> 
        @Html.Button("Create", new Dictionary<string, object>() { { "id", "create" }, { "type", "submit" } }) 
        @Html.Button("Cancel", new Dictionary<string, object>() { { "id", "cancel" }, { "type", "button" } }) 
       </p> 
      </div> 
     } 

@* The Edit Template *@ 


@model GyroviewOpsManager.UI.Models.JobRecordViewModel 

@{ 
    Html.Assets().Styles.Add("/Content/jobrecord.css"); 
    Html.Assets().Styles.Add("/Content/themes/base/jquery.ui.all.css"); 
    Html.Assets().Scripts.Add("/Scripts/jobrecord.js"); 
    Html.Assets().Scripts.Add("/Scripts/jquery-ui-1.8.22.min.js"); 
} 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 


    <table id="jobinfo-table"> 
     <tr> 
      <td> 
       <a id="opener" href="#">Job Number...</a> 
      </td> 
      <td> 
       @Html.TextBoxFor(model => model.JobNo) 
      </td> 
      ... 
     </tr> 
    </table> 


@* The div for the jQuery dialog *@ 
<div id="dialog" title="Job Number Editor"> 
    <p>* All fields are required</p> 
<table id="jobnumedit-table"> 
    <tr> 
     <td>Job Number:</td> 
     <td>@Html.TextBoxFor(model => model.JobNo, new { id = "jobNo", @readonly = "readonly" })</td> 
    </tr> 
    <tr> 
     <td>Location:</td> 
     <td>@Html.DropDownListFor(model => model.Location, new SelectList(Model.Locations, "LocnID", "Name", ViewBag.UserLocation), "-- Select --", new{id="Location"})</td> 
    </tr> 
    <tr> 
     @{ 
      var jobNoDate = Model.JobNoDate; 
      if (Model.JobNoDate == null) 
      { 
       jobNoDate = DateTime.Today; 
      } 
     } 
     <td>Date:</td> 
     <td>@Html.TextBoxFor(model => model.JobNoDate, new{id="JobNoDate"})</td>  
    </tr> 
    ... 
</table> 
</div> 

<script type="text/javascript"> 
// Dialog script 
$("#dialog").dialog({ 
    autoOpen: false, 
    height: 450, 
    width: 450, 
    modal: true, 
    buttons: { 
     "Ok": function() { 
      ... 
      $(this).dialog("close"); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$("#opener").click(function() { 
    ... 
    return false; 
}); 
</script>

來源

2012-08-16 Rich

我找到了這個問題的答案從另一個問題上的SO。

萬一別人遇到這樣的jQuery的UI對話框不追加到形式，它只是之前追加，所以驗證元素是部分

問題標題外以上答案是不那麼明顯所以這裏是鏈接：jQuery UI Dialog validation without using <form> tags

答案包括樣品。

來源

2012-08-22 12:57:05 Rich

jQuery對話框中的元素沒有被綁定到ViewModel在郵政

回答

相關問題