Finestra di dialogo popup per la modifica di record tramite Grid.MVC in ASP.NET MVC3

Question

Sto utilizzando Grid.MVC disponibile a http://gridmvc.azurewebsites.net/, che fornisce funzionalità per la visualizzazione dei dati nella griglia, dove filtraggio, ordinamento, paging sono fatti bene. Questo è il modo in cui i dati in Grid guardano al momento.

Fin qui tutto bene. Per visualizzare i dati che sto usando il seguente controller e .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); 
    } 

Il .cshtml per lo stesso è

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

Quando clicco sul pulsante Modifica, il record completo viene caricato nella finestra popup come di seguito. Tra l'altro questo sta usando gli stili di Bootstrap di Twitter.

Fin qui tutto bene.

Il controller e .cshtml sono

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

Il .cshtml per il cliente Edit è

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

Sto usando convalide lato server. Il modello del cliente è.

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

    } 
} 

Quando non ci sono errori di convalida, salva i dati e carica la pagina della griglia del cliente.

Problema

Quando ci sono errori di convalida sua reindirizzando ad un EditCustomer con messaggi convalide. Come posso rendere gli errori di validazione da visualizzare nella finestra Popup.

Questo è il modo in cui visualizza gli errori in una pagina semplice.

.

Come posso rendere gli errori da visualizzare nella finestra a comparsa.

Answer 1

È necessario esaminare più da vicino la convalida AJAX e la convalida lato client. In sostanza, ciò che sta accadendo è che la vista parziale che si sta caricando e che contiene il modulo di modifica non ha una convalida associata ad esso poiché è stata caricata dopo il caricamento iniziale della pagina. Puoi provare ad aggiungerlo alla tua pagina (JQuery):

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

dove formId è l'ID del modulo HTML. È inoltre necessario utilizzare l'helper Ajax.BeginForm anziché l'helper Html che si sta utilizzando.

Oltre a ciò un'occhiata a posto:

ASP.NET MVC client validation with partial views and Ajax