用于在ASP.NET MVC3中使用Grid.MVC编辑记录的弹出对话框

Question

我正在http://gridmvc.azurewebsites.net/上使用Grid.MVC ,它提供了很好地在网格中显示数据的功能,其中很好地完成了过滤,排序和分页.这就是Grid中数据的当前表现方式.

到现在为止还挺好.要显示数据,我使用以下控制器和.cshtml

调节器

  /// <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样式.

到现在为止还挺好.

控制器和.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网页.

问题

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

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

.

如何使错误显示在弹出窗口中.

Answer 1

您需要更仔细地了解 AJAX 验证和客户端验证。基本上发生的事情是您正在加载的包含编辑表单的部分视图没有绑定验证，因为它是在初始页面加载后加载的。您可以尝试将其添加到您的页面（JQuery）：

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

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

除此之外，请看一下帖子：

使用部分视图和 Ajax 进行 ASP.NET MVC 客户端验证