ASP.. NET MVC 2动态页面验证
本文关键字:验证 动态 NET MVC ASP | 更新日期: 2023-09-27 17:50:19
我有注册向导在我的asp.net mvc 2应用程序与多个页面。在第一页上,我应该有参与这个过程的人的基本数据形式。我应该有3个文本框标记为名字,姓氏和地址,和1复选框与文本"添加另一个人"。当用户单击单选按钮时,将出现带有新单选按钮的新文本框,因此我们可以在同一表单中添加多个人员。理论上,我们应该能够尽可能多地插入人员。所有字段都是强制性的,所以在页面顶部的验证摘要中,我应该有类似于"请输入第二个人的名字"之类的内容。我有DTO类:
public class Person
{
public string FullName { get; set; }
public string LastName { get; set; }
public string Address{ get; set; }
}
,我想我的这个页面的模型应该是List<Person>
,我会添加html与javascript/jQuery的新人。请在这里帮助我,我应该如何验证这个动态页面?我可以通过保存和后退按钮来完成这个向导,我们应该能够取消点击页面上的任何单选按钮,那个特定的人应该消失,验证器应该不会再捕获它了。我的整个向导使用服务器端验证(DataAnnotations),我不想使用客户端验证。提前谢谢。
public int Percent { get; set; }
,如果IEnumerable<Person>
中每个person中的所有百分比之和等于100,我希望在提交时进行服务器验证。我可以为此创建自定义属性吗?如何创建?我的型号是generic List,我不能在上面应用[CustomAttribute]
,对吗?
此外,我应该在页面的顶部有验证摘要,而不是在每个输入之后。我已经放了:<%:Html.ValidationSummary(false, "Please correct the following and resubmit the page:")%>
是否有办法为每个人设置不同的验证消息?由于
在开始执行此任务之前,我强烈建议您阅读编辑可变长度列表,ASP。. NET MVC 2-style from Steven Sanderson.
准备好了吗?
好了,现在我们可以进入实现了
第一件事是为任务定义视图模型。您已经拥有了它,只需定义相应的验证规则:
public class Person
{
[Required]
public string FullName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string Address{ get; set; }
}
,我想我这个页面的模型应该是List
年,当然。
我们来创建PersonsController
:
public class PersonsController : Controller
{
public ActionResult Index()
{
var model = new[]
{
new Person()
};
return View(model);
}
[HttpPost]
public ActionResult Index(IEnumerable<Person> persons)
{
if (!ModelState.IsValid)
{
return View(persons);
}
// To do: do whatever you want with the data
// In this example I am simply dumping it to the output
// but normally here you would update your database or whatever
// and redirect to the next step of the wizard
return Content(string.Join(Environment.NewLine, persons.Select(p => string.Format("name: {0} address: {1}", p.FullName, p.Address))));
}
public ActionResult BlankEditorRow()
{
return PartialView("_PersonEditorRow", new Person());
}
}
现在让我们定义视图(~/Views/Persons/Index.cshtml
):
@model IEnumerable<Person>
@using (Html.BeginForm())
{
<div id="editorRows">
@foreach (var item in Model)
{
Html.RenderPartial("_PersonEditorRow", item);
}
</div>
@Html.ActionLink(
"Add another person",
"BlankEditorRow",
null,
new { id = "addItem" }
)
<p>
<button type="submit">Next step</button>
</p>
}
<script type="text/javascript">
$('#addItem').click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $('#editorRows').append(html); }
});
return false;
});
$(document).delegate('a.deleteRow', 'click', function () {
$(this).parents('div.editorRow:first').remove();
return false;
});
</script>
和相应的部分视图(~/Views/Persons/_PersonEditorRow.cshtml
):
@model Person
<div class="editorRow">
@using(Html.BeginCollectionItem("persons"))
{
<div>
@Html.LabelFor(x => x.FullName)
@Html.EditorFor(x => x.FullName)
@Html.ValidationMessageFor(x => x.FullName)
</div>
<div>
@Html.LabelFor(x => x.LastName)
@Html.EditorFor(x => x.LastName)
@Html.ValidationMessageFor(x => x.LastName)
</div>
<div>
@Html.LabelFor(x => x.Address)
@Html.EditorFor(x => x.Address)
@Html.ValidationMessageFor(x => x.Address)
</div>
<a href="#" class="deleteRow">delete</a>
}
</div>
备注:这里使用的Html.BeginCollectionItem
助手取自Steven Sanderson的博客文章,我在之前的回答中已经链接到,您已经阅读并熟悉了。下面是完整的源代码:
public static class HtmlPrefixScopeExtensions
{
private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_";
public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName)
{
var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();
// autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync.
html.ViewContext.Writer.WriteLine(string.Format("<input type='"hidden'" name='"{0}.index'" autocomplete='"off'" value='"{1}'" />", collectionName, html.Encode(itemIndex)));
return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex));
}
public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix)
{
return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
}
private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName)
{
// We need to use the same sequence of IDs following a server-side validation failure,
// otherwise the framework won't render the validation error messages next to each item.
string key = idsToReuseKey + collectionName;
var queue = (Queue<string>)httpContext.Items[key];
if (queue == null)
{
httpContext.Items[key] = queue = new Queue<string>();
var previouslyUsedIds = httpContext.Request[collectionName + ".index"];
if (!string.IsNullOrEmpty(previouslyUsedIds))
foreach (string previouslyUsedId in previouslyUsedIds.Split(','))
queue.Enqueue(previouslyUsedId);
}
return queue;
}
private class HtmlFieldPrefixScope : IDisposable
{
private readonly TemplateInfo templateInfo;
private readonly string previousHtmlFieldPrefix;
public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix)
{
this.templateInfo = templateInfo;
previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
}
public void Dispose()
{
templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;
}
}
}
更新:我的错,我刚刚注意到你的问题被标记为
asp.net-mvc-2
。所以我猜我的剃刀观点不适用于你的情况。不过,其他一切都应该是一样的。你所需要做的就是更新视图,让它们使用WebForms视图引擎:
~/Views/Persons/Index.aspx
:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Person>>" %>
<% using (Html.BeginForm()) { %>
<div id="editorRows">
<% foreach (var item in Model) { %>
<% Html.RenderPartial("_PersonEditorRow", item); %>
<% } %>
</div>
<%= Html.ActionLink(
"Add another person",
"BlankEditorRow",
null,
new { id = "addItem" }
) %>
<p>
<button type="submit">Next step</button>
</p>
<% } %>
<script type="text/javascript">
$('#addItem').click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $('#editorRows').append(html); }
});
return false;
});
$(document).delegate('a.deleteRow', 'click', function () {
$(this).parents('div.editorRow:first').remove();
return false;
});
</script>
,最后是(~/Views/Persons/_PersonEditorRow.ascx
)部分:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Person>" %>
<div class="editorRow">
<% using(Html.BeginCollectionItem("persons")) { %>
<div>
<%= Html.LabelFor(x => x.FullName) %>
<%= Html.EditorFor(x => x.FullName) %>
<%= Html.ValidationMessageFor(x => x.FullName) %>
</div>
<div>
<%= Html.LabelFor(x => x.LastName) %>
<%= Html.EditorFor(x => x.LastName) %>
<%= Html.ValidationMessageFor(x => x.LastName) %>
</div>
<div>
<%= Html.LabelFor(x => x.Address) %>
<%= Html.EditorFor(x => x.Address) %>
<%= Html.ValidationMessageFor(x => x.Address) %>
</div>
<a href="#" class="deleteRow">delete</a>
<% } %>
</div>