驗證在MVC中的另一個窗體內的JQuery UI模式窗體4

Question

我在MVC 4中有一個窗體，其中包含幾個字段，根據組合的值，我需要打開模式對話框窗體並加載到另一個窗體中。這些字段會影響我在主窗體中創建/編輯的實體。 對於這個模式對話框，我使用了jQuery UI中的一個。

現在，我需要做的是驗證（必填）模式對話框中的字段，以便用戶保留輸入的值，這些值將在稍後由主窗體提交。

我的問題是如何從模態窗體中執行這3個字段的驗證（因爲他們將無法提交主窗體，直到對話框關閉）。

任何提示或想法？

Regards， Cesar。

Answer 1

您可以使用AJAX將表單模式提交給服務器。模態形式當然會有一個與之相關的獨立視圖模型。讓我們來舉例說明：

主視圖模型：

public class MyViewModel 
{ 
    [DisplayName("select a value")] 
    public string SelectedValue { get; set; } 
    public IEnumerable<SelectListItem> Values { get; set; } 
    public string SomeOtherProperty { get; set; } 
} 

模態對話框視圖模型：

public class DialogViewModel 
{ 
    [Required] 
    public string Prop1 { get; set; } 
    [Required] 
    public string Prop2 { get; set; } 
    [Required] 
    public string Prop3 { get; set; } 
} 

然後，你可以有一個包含4個操作的控制器：

public class HomeController : Controller 
{ 
    // Renders the main form 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      Values = new[] 
      { 
       new SelectListItem { Value = "1", Text = "item 1" }, 
       new SelectListItem { Value = "2", Text = "item 2" }, 
       new SelectListItem { Value = "3", Text = "item 3" }, 
      } 
     }; 
     return View(model); 
    } 

    // Processes the submission of the main form 
    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return Content(
      string.Format(
       "Thanks for filling out the form. You selected value: \"{0}\" and other property: \"{1}\"", 
       model.SelectedValue, 
       model.SomeOtherProperty 
      ) 
     ); 
    } 

    // Renders the partial view which will be shown in a modal 
    public ActionResult Modal(string selectedValue) 
    { 
     var model = new DialogViewModel 
     { 
      Prop1 = selectedValue 
     }; 
     return PartialView(model); 
    } 

    // Processes the submission of the modal 
    [HttpPost] 
    public ActionResult Modal(DialogViewModel model) 
    { 
     if (ModelState.IsValid) 
     { 
      // validation of the modal view model succeeded => 
      // we return a JSON result containing some precalculated value 
      return Json(new 
      { 
       value = string.Format("{0} - {1} - {2}", model.Prop1, model.Prop2, model.Prop3) 
      }); 
     } 

     // Validation failed => we need to redisplay the modal form 
     // and give the user the possibility to fix his errors 
     return PartialView(model); 
    } 
} 

接下來你可以有主視圖（~/Views/Home/Index.cshtml）：

@model MyViewModel 

@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(x => x.SelectedValue) 
     @Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { id = "ddl" }) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.SomeOtherProperty) 
     @Html.TextBoxFor(x => x.SomeOtherProperty, new { id = "otherProperty" }) 
     @Html.ActionLink(
      "click here to open a modal and help you fill the value", 
      "Modal", 
      "Home", 
      null, 
      new { id = "showModal" } 
     ) 
    </div> 
    <button type="submit">OK</button> 
} 

<div id="modal"></div> 

和局部視圖包含模態形式（~/Views/Home/Modal.cshtml）：

@model DialogViewModel 

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "handleModalSubmit" })) 
{ 
    <div> 
     @Html.LabelFor(x => x.Prop1) 
     @Html.EditorFor(x => x.Prop1) 
     @Html.ValidationMessageFor(x => x.Prop1) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Prop2) 
     @Html.EditorFor(x => x.Prop2) 
     @Html.ValidationMessageFor(x => x.Prop2) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Prop3) 
     @Html.EditorFor(x => x.Prop3) 
     @Html.ValidationMessageFor(x => x.Prop3) 
    </div> 
    <button type="submit">OK</button> 
} 

好了，現在所有剩下的就是寫一些JavaScript來使整個事情還活着。首先，我們要確保我們首先包括所有所需的腳本：

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

，然後寫我們自己：

$(function() { 
    $('#showModal').click(function() { 
     $.ajax({ 
      url: this.href, 
      type: 'GET', 
      cache: false, 
      data: { selectedValue: $('#ddl').val() }, 
      success: function (result) { 
       $('#modal').html(result).dialog('open'); 
      } 
     }); 
     return false; 
    }); 

    $('#modal').dialog({ 
     autoOpen: false, 
     modal: true 
    }); 
}); 

function handleModalSubmit(result) { 
    if (result.value) { 
     // JSON returned => validation succeeded => 
     // close the modal and update some property on the main form 
     $('#modal').dialog('close'); 
     $('#otherProperty').val(result.value); 
    } else { 
     // validation failed => refresh the modal to display the errors 
     $('#modal').html(result); 
    } 
}