ASP.NET MVC轻教程 Step By Step 10——模型验证

时间:2023-03-09 08:09:53
ASP.NET MVC轻教程 Step By Step 10——模型验证

在使用表单获取用户输入的数据时,我们必须对数据进行有效性验证,因为来自网络的信息都是不可信的。同时也要给用户即时的反馈,避免让用户感到困惑。这就涉及到数据验证的范畴。

数据验证最直接的做法是在服务器端对回传的数据加以甄别。在MessageBoard这个demo中,用户留言时昵称和留言内容都不能为空,并且留言内容不得少于15字。为此我们需要修改Write动作方法。

        [HttpPost]
public ActionResult Write(Message message)
{
if (string.IsNullOrEmpty(message.NickName))
{
ModelState.AddModelError("NickName", "昵称不能为空");
}
if (string.IsNullOrEmpty(message.Content))
{
ModelState.AddModelError("Content", "内容不能为空");
}
else if(message.Content.Count() < )
{
ModelState.AddModelError("Content", "内容不能少于15字");
}        
if (ModelState.IsValid)
{

                message.ReleaseDate = DateTime.Now;
                messages.Add(message);   
Response.Redirect("/Home/Index");
return View();
}
else
{
return
View(message);
}

}

我们添加一组if语句来判断回传的数据,注意ModelState包含模型绑定的状态。通过ModelState.AddModelError添加错误信息以及ModelState.IsValid判断模型是否通过验证。

接下来要在Write视图显示验证错误提示,可以使用一些HTML辅助方法帮助我们完成。示例如下。

<body>
<h1>MVC留言板</h1>
@using (Html.BeginForm("Write", "Home"))
{
@Html.ValidationSummary()
@Html.LabelFor(m=>m.NickName,"昵称")
@Html.TextBoxFor(m => m.NickName)
<br /><br />
@Html.LabelFor(m => m.Content,"内容")
@Html.TextAreaFor(m => m.Content,5,50,null)
<br /><br />
<input type="submit" value="提交" />
}
</body>

Html.ValidationSummary可以显示模型验证的所用错误,如下图所示。

ASP.NET MVC轻教程 Step By Step 10——模型验证

如果想在文本框之后显示错误信息,可以使用Html.ValidationMessageFor方法。

<body>
<h1>MVC留言板</h1>
@using (Html.BeginForm("Write", "Home"))
{
@Html.LabelFor(m=>m.NickName,"昵称")
@Html.TextBoxFor(m => m.NickName)
@Html.ValidationMessageFor(m=>m.NickName)
<br /><br />
@Html.LabelFor(m => m.Content,"内容")
@Html.TextAreaFor(m => m.Content,5,50,null)
@Html.ValidationMessageFor(m=>m.Content)
<br /><br />
<input type="submit" value="提交" />
}
</body>

效果如下。

ASP.NET MVC轻教程 Step By Step 10——模型验证

Html.ValidationMessageFor方法在页面渲染时会生成一个<span>标签,如@Html.ValidationMessageFor(m=>m.NickName) 生成为<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NickName">昵称不能为空</span>,我们可以利用生成的span标签的class属性修改CSS样式,使页面更美观。