验证在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); 
    } 
}