Popup-Dialog zum Bearbeiten von Datensatz mit Grid.MVC in einem ASP.NET MVC3

Question

Ich verwende Grid.MVC verfügbar unter http://gridmvc.azurewebsites.net/, die Funktionalität für die Anzeige der Daten im Raster schön bietet, wo Filterung, Sortierung, Paging ist schön gemacht. So sehen die Daten in Grid den Moment aus.

So weit so gut. Um die Daten anzuzeigen ich folgende Controller verwenden und .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); 
    } 

Die .cshtml für das gleiche ist

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

Wenn ich auf Schaltfläche Bearbeiten, Der vollständige Datensatz wird im Popup-Fenster wie folgt geladen. Übrigens benutzt das Twitter Bootstrap Styles.

So weit so gut.

Die Steuerung und .cshtml sind

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

Die .cshtml für die Unternehmen Kunden ist

@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 Serverseite Validierungen verwende. Das Kundenmodell ist.

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

    } 
} 

Wenn keine Validierungsfehler vorliegen, werden die Daten gespeichert und die Seite customerList Grid geladen.

Problem

Wenn es Nachrichten Validierungsfehler seines Umleiten auf eine EditCustomer mit Validierungen. Wie kann ich die Validierungsfehler im Popup-Fenster anzeigen lassen?

Auf diese Weise werden die Fehler in einer einfachen Seite angezeigt.

.

Wie kann ich die Fehler im Popup-Fenster selbst angezeigt werden.

Answer 1

Sie müssen sich die AJAX-Validierung und die clientseitige Validierung genauer ansehen. Im Grunde genommen ist die Teilansicht, die Sie laden, die Ihr Bearbeitungsformular enthält, nicht gebunden, da es nach dem ersten Laden der Seite geladen wurde. Sie können versuchen, das zu Ihrer Seite (JQuery) hinzuzufügen:

wo FormId die ID Ihres HTML-Formulars ist. Sie müssen auch den Ajax.BeginForm-Helper anstelle des von Ihnen verwendeten HTML-Helpers verwenden.

Darüber hinaus werfen Sie einen Blick auf Beitrag:

ASP.NET MVC client validation with partial views and Ajax