twitter-bootstrap 在 ASP.NET MVC3 中使用 Grid.MVC 编辑记录的弹出对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17594915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3
提问by Hari Gillala
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.
我正在使用http://gridmvc.azurewebsites.net/ 上的Grid.MVC ，它提供了在网格中很好地显示数据的功能，其中过滤、排序、分页做得很好。这就是 Grid 中的数据目前的样子。
So far so good. To display the data I am using the following controller and .cshtml
到现在为止还挺好。要显示数据，我使用以下控制器和 .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 .cshtmlfor the same is
同样的.cshtml是
@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.
当我单击“编辑”按钮时，完整的记录会加载到弹出窗口中，如下所示。顺便说一下，这是使用 Twitter Bootstrap 样式。
So far so good.
到现在为止还挺好。
The controller and .cshtml are
控制器和 .cshtml 是
/// <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
编辑客户的 .cshtml 是
@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.
当没有验证错误时，它会保存数据并加载 customerList 网格页面。
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.
当出现验证错误时，它会重定向到带有验证消息的 EditCustomer。如何使验证错误显示在弹出窗口中。
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.
如何使错误显示在弹出窗口本身中。
采纳答案by Marko
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):
您需要更仔细地查看 AJAX 验证和客户端验证。基本上发生的事情是您正在加载的包含编辑表单的部分视图没有绑定到它的验证，因为它是在初始页面加载后加载的。您可以尝试将其添加到您的页面 (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.
其中 formId 是您的 HTML 表单的 ID。您还需要使用 Ajax.BeginForm 助手而不是您正在使用的 Html 助手。
Beyond that take a look at post:
除此之外，看看帖子：
