title: Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3
body: <p>I am using Grid.MVC available at <a href="http://gridmvc.azurewebsites.net/" rel="noreferrer">http://gridmvc.azurewebsites.net/</a>, 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.</p>
  
  <p><img src="https://i.stack.imgur.com/iao1L.gif." alt="GridData Display"></p>
  
  <p>So far so good. To display the data I am using the following controller and .cshtml</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>  /// &lt;summary&gt;
      /// Brings List Of Customers
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      [HttpGet]
      public ActionResult CustomerList()
      {
          CustomerListViewModel custList = new CustomerListViewModel();
          List&lt;CustomerViewModel&gt; custVMList = new List&lt;CustomerViewModel&gt;();
          custVMList = custRepository.GetCustomers();
          custList.customers = custVMList;
          return View(custList);
      }
  </code></pre>
  
  <p>The <strong>.cshtml</strong> for the same is </p>
  
  <pre><code>    @model IEnumerable&lt;DataAccess.Models.CustomerViewModel&gt;
  @*Using Twitter Bootstrap API*@
  &lt;link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"&gt; &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"&gt; &lt;/script&gt;
  &lt;link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" /&gt;
  
  @using GridMvc.Html
  @{
      ViewBag.Title = "Customers List";
  }
  @Html.Grid(Model).Columns(columns =&gt;
                          {
  
                              columns.Add(m =&gt; m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                              columns.Add(m =&gt; m.Address1).Titled("Address1").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.Address2).Titled("Address2").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.City).Titled("City").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.County).Titled("County").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                              columns.Add(m =&gt; m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                              columns.Add(m =&gt; m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                              columns.Add(m =&gt; m.CustomerId)
                                 .Titled("Edit")
                                 .Sanitized(false)
                                 .Encoded(false)
                                  //.RenderValueAs(o =&gt; Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = o.CustomerId }, new { title = "Please click here to edit the record", @class = "modal-link" }).ToHtmlString());
                              .RenderValueAs(d =&gt; Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = d.CustomerId }, new { @class = "modal-link" }));
  
                          }).WithPaging(4)
  &lt;br /&gt;
  &lt;br /&gt;
  @Html.ActionLink("Click to Add Customer", "AddCustomer", "Customer", new { @class = "modal-link" })
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
              ×&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;
              Edit Customer&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;
              Loading…&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;
              Close&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      //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") });
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/RVwUP.jpg" alt="Popup dialog box showing data for edit"></p>
  
  <p>So far so good. </p>
  
  <p>The controller and .cshtml are </p>
  
  <pre><code>  /// &lt;summary&gt;
      /// Brings a Specific Customer
      /// &lt;/summary&gt;
      /// &lt;param name="CustomerId"&gt;&lt;/param&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      [HttpGet]
      public ActionResult EditCustomer(Guid CustomerId)
      {
          CustomerViewModel cusVM = custRepository.GetCustomer(CustomerId);
          return View(cusVM);
  
      }
  
      /// &lt;summary&gt;
      /// Editing Customer
      /// &lt;/summary&gt;
      /// &lt;param name="cusVM"&gt;&lt;/param&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      [HttpPost]
      public ActionResult EditCustomer(CustomerViewModel cusVM)
      {
          if (ModelState.IsValid)
          {
              custRepository.EditCustomer(cusVM);
              return RedirectToAction("CustomerList", "Customer");
          }
          else
          {
              return PartialView(cusVM);
          }
      }
  </code></pre>
  
  <p>The .cshtml for the Edit customer is</p>
  
  <pre><code>@model DataAccess.Models.CustomerViewModel
  @{
      Layout = null;
  }
  @using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;       
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.CustomerName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.CustomerName)
              @Html.ValidationMessageFor(model =&gt; model.CustomerName)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Address1)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Address1)
              @Html.ValidationMessageFor(model =&gt; model.Address1)
          &lt;/div&gt;
           &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Address2)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Address2)
              @Html.ValidationMessageFor(model =&gt; model.Address2)
          &lt;/div&gt;
           &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.City)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.City)
              @Html.ValidationMessageFor(model =&gt; model.City)
          &lt;/div&gt;
           &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.County)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.County)
              @Html.ValidationMessageFor(model =&gt; model.County)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ContactName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ContactName)
              @Html.ValidationMessageFor(model =&gt; model.ContactName)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Email)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Email)
              @Html.ValidationMessageFor(model =&gt; model.Email)
          &lt;/div&gt;
          &lt;div&gt;
              @Html.HiddenFor(model =&gt; model.CustomerId)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ReferenceNumber)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ReferenceNumber)
              @Html.ValidationMessageFor(model =&gt; model.ReferenceNumber)
          &lt;/div&gt;
          &lt;p&gt;
              &lt;input type="submit" value="Save" class="btn btn-primary" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>I am using server side validations. The customer model is.</p>
  
  <pre><code> using System.ComponentModel.DataAnnotations;
  using System;
  namespace DataAccess.Models
  {
      /// &lt;summary&gt;
      /// Class Holds the List Of Properties of a Customer
      /// &lt;/summary&gt;
      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; }
  
      }
  }
  </code></pre>
  
  <p>When there are no validations errors then it saving the data and loading the customerList Grid page.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>When there are validation errors its redirecting to a EditCustomer with validations messages. <strong>How can I make the validations errors to be displayed in the Popup window.</strong> </p>
  
  <p>This is the way it displays the errors in a plain page.</p>
  
  <p><img src="https://i.stack.imgur.com/t1mgU.jpg" alt="Errors should be displayed in a Popup Window, but reloading page in different URL. ">.</p>
  
  <p><strong>How can I make the errors to be displayed in Popup window itself.</strong></p>