Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3

Question

I am using Grid.MVC available at http://gridmvc.azurewebsites.net/, which provides functionality for displaying the data in grid nicely, where filtering, sorting, paging is nicely done. This is the way the data in Grid looks at the moment.

So far so good. To display the data I am using the following controller and .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);
    }

The .cshtml for the same is

    @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>

When I click on Edit button, the complete record loads in the Popup window like below. By the way this is using Twitter Bootstrap styles.

So far so good.

The controller and .cshtml are

  /// <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);
        }
    }

The .cshtml for the Edit customer is

@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>
}

I am using server side validations. The customer model is.

 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; }

    }
}

When there are no validations errors then it saving the data and loading the customerList Grid page.

Problem

When there are validation errors its redirecting to a EditCustomer with validations messages. How can I make the validations errors to be displayed in the Popup window.

This is the way it displays the errors in a plain page.

.

How can I make the errors to be displayed in Popup window itself.

Answer 1

You need to look more closely at AJAX validation and client side validation. Basically what's happening is the partial view you are loading which contains your edit form does not have validation bound to it since it was loaded after the initial page load. You can try adding this to your page (JQuery):

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

where formId is the ID of your HTML form. You also need to use Ajax.BeginForm helper instead of Html helper you're using.

Beyond that take a look at post:

ASP.NET MVC client validation with partial views and Ajax