asp.net-mvc-3 - 在 ASP.NET MVC3 中使用 Grid.MVC 编辑记录的弹出对话框

Question

我正在使用 http://gridmvc.azurewebsites.net/ 上提供的 Grid.MVC ，它提供了在网格中很好地显示数据的功能，很好地完成了过滤、排序、分页。这是 Grid 中的数据目前的样子。



到目前为止，一切都很好。为了显示我使用以下 Controller 和 .cshtml 的数据

Controller

  /// <summary>
    /// Brings List Of Customers
    /// </summary>
    /// <returns></returns>
    [HttpGet]
    public ActionResult CustomerList()
    {
        CustomerListViewModel custList = new CustomerListViewModel();
        List<CustomerViewModel> custVMList = new List<CustomerViewModel>();
        custVMList = custRepository.GetCustomers();
        custList.customers = custVMList;
        return View(custList);
    }

.cshtml 同样是

    @model IEnumerable<DataAccess.Models.CustomerViewModel>
@*Using Twitter Bootstrap API*@
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />

@using GridMvc.Html
@{
    ViewBag.Title = "Customers List";
}
@Html.Grid(Model).Columns(columns =>
                        {

                            columns.Add(m => m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                            columns.Add(m => m.Address1).Titled("Address1").Sortable(true).Filterable(true);
                            columns.Add(m => m.Address2).Titled("Address2").Sortable(true).Filterable(true);
                            columns.Add(m => m.City).Titled("City").Sortable(true).Filterable(true);
                            columns.Add(m => m.County).Titled("County").Sortable(true).Filterable(true);
                            columns.Add(m => m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                            columns.Add(m => m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                            columns.Add(m => m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                            columns.Add(m => m.CustomerId)
                               .Titled("Edit")
                               .Sanitized(false)
                               .Encoded(false)
                                //.RenderValueAs(o => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = o.CustomerId }, new { title = "Please click here to edit the record", @class = "modal-link" }).ToHtmlString());
                            .RenderValueAs(d => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = d.CustomerId }, new { @class = "modal-link" }));

                        }).WithPaging(4)
<br />
<br />
@Html.ActionLink("Click to Add Customer", "AddCustomer", "Customer", new { @class = "modal-link" })
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Edit Customer</h3>
    </div>
    <div class="modal-body">
        <p>
            Loading…</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
<script type="text/javascript">
    //this script reset modal each time when you click on the link:
    $(function () {
        $(".modal-link").click(function (event) {
            event.preventDefault();
            $('#myModal').removeData("modal");
            $('#myModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>

当我单击编辑按钮时，完整的记录会加载到弹出窗口中，如下所示。顺便说一句，这是使用 Twitter Bootstrap 样式。



到目前为止，一切都很好。

Controller 和 .cshtml 是

  /// <summary>
    /// Brings a Specific Customer
    /// </summary>
    /// <param name="CustomerId"></param>
    /// <returns></returns>
    [HttpGet]
    public ActionResult EditCustomer(Guid CustomerId)
    {
        CustomerViewModel cusVM = custRepository.GetCustomer(CustomerId);
        return View(cusVM);

    }

    /// <summary>
    /// Editing Customer
    /// </summary>
    /// <param name="cusVM"></param>
    /// <returns></returns>
    [HttpPost]
    public ActionResult EditCustomer(CustomerViewModel cusVM)
    {
        if (ModelState.IsValid)
        {
            custRepository.EditCustomer(cusVM);
            return RedirectToAction("CustomerList", "Customer");
        }
        else
        {
            return PartialView(cusVM);
        }
    }

编辑客户的 .cshtml 是

@model DataAccess.Models.CustomerViewModel
@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>       
        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.Address2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address2)
            @Html.ValidationMessageFor(model => model.Address2)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.County)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.County)
            @Html.ValidationMessageFor(model => model.County)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactName)
            @Html.ValidationMessageFor(model => model.ContactName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div>
            @Html.HiddenFor(model => model.CustomerId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ReferenceNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReferenceNumber)
            @Html.ValidationMessageFor(model => model.ReferenceNumber)
        </div>
        <p>
            <input type="submit" value="Save" class="btn btn-primary" />
        </p>
    </fieldset>
}

我正在使用服务器端验证。客户模型是。

 using System.ComponentModel.DataAnnotations;
using System;
namespace DataAccess.Models
{
    /// <summary>
    /// Class Holds the List Of Properties of a Customer
    /// </summary>
    public class CustomerViewModel
    {
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "Customer Name")]
        public string CustomerName { get; set; }

           [Required]
        [DataType(DataType.Text)]
        [Display(Name = "Address1")]
        public string Address1 { get; set; }

           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "Address2")]
           public string Address2 { get; set; }

           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "City")]
           public string City { get; set; }


           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "County")]
           public string County { get; set; }

           [Required]
        [DataType(DataType.Text)]
        [Display(Name = "ContactName")]
        public string ContactName { get; set; }

           [Required]
        [DataType(DataType.Date)]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [DataType(DataType.Text)]
        public Guid CustomerId { get; set; }


        [DataType(DataType.Text)]
        public string ReferenceNumber { get; set; }

        [DataType(DataType.Date)]
        public DateTime ModifiedOn{ get; set; }

    }
}

当没有验证错误时，它会保存数据并加载 customerList Grid 页面。

问题

当出现验证错误时，它会重定向到带有验证消息的 EditCustomer。 如何使验证错误显示在弹出窗口中。

这是它在普通页面中显示错误的方式。

.

如何使错误显示在弹出窗口本身中。

Answer 1

您需要更仔细地查看 AJAX 验证和客户端验证。基本上正在发生的事情是您正在加载的包含您的编辑表单的部分 View 没有绑定(bind)到它的验证，因为它是在初始页面加载后加载的。您可以尝试将此添加到您的页面(JQuery):

$.validator.unobtrusive.parse('#formId');

其中 formId 是您的 HTML 表单的 ID。您还需要使用 Ajax.BeginForm 助手而不是您正在使用的 Html 助手。

除此之外，看看帖子:

ASP.NET MVC client validation with partial views and Ajax