Okno wyskakujące do edycji rekordu przy użyciu Grid.MVC w ASP.NET MVC3

Question

Używam Grid.MVC dostępnego pod http://gridmvc.azurewebsites.net/, który zapewnia funkcjonalność wyświetlania danych w sieci ładnie, gdzie filtrowanie, sortowanie, stronicowanie jest ładnie wykonane. Tak właśnie wygląda dane w Gridzie.

tej pory tak dobrze. Aby wyświetlić dane używam następujący kontroler i .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); 
    } 

.cshtml za to samo

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

Po kliknięciu na przycisk Edycja pełne ładowanie rekordów w oknie podręcznym, jak poniżej. Tak przy okazji, używasz stylów Bootstrap na Twitterze.

tej pory tak dobrze.

Kontroler i .cshtml są

/// <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 dla Edycja klienta jest

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

Używam walidacji po stronie serwera. Model klienta jest.

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

    } 
} 

Gdy nie ma błędów sprawdzania poprawności, to zapisywanie danych i ładowanie strony Grid clientList.

Problem

Jeżeli istnieją błędy sprawdzania jego przekierowanie do EditCustomer z komunikatów walidacji. Jak mogę wyświetlać błędy sprawdzania poprawności w oknie wyskakującym.

W ten sposób wyświetla błędy na zwykłej stronie.

.

Jak mogę wyświetlić błędy w oknie Popup?

Answer 1

Należy bliżej przyjrzeć się walidacji AJAX i walidacji po stronie klienta. Zasadniczo, to, co się dzieje, to ładowany widok częściowy, który zawiera formularz do edycji, który nie jest związany z weryfikacją, ponieważ został załadowany po wczytaniu strony początkowej. Możesz spróbować dodać to do swojej strony (JQuery):

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

gdzie formID jest identyfikatorem formularza HTML. Musisz również użyć helpera Ajax.BeginForm zamiast używanego helpera HTML.

Poza tym spójrz na post:

ASP.NET MVC client validation with partial views and Ajax