ASP.NET MVC轻教程 Step By Step 12——客户端验证
前面两节使用的两种数据验证方法都是在服务器端进行的，也就是提交了表单，数据回传给服务器才能验证。这样会带来两个问题，一是用户体验不好，用户提交了表单之后才知道存在问题；二是会给服务器带来额外的压力。我们可以使用客户端验证来解决这两个问题。
客户端验证一般使用Javascript脚本，JQuery.validate就是一个不错的JQuery验证组件，很多项目都会用它来实现客户端验证。
Step 1. 添加脚本
ASP.NET MVC对JQuery有很好的支持，实际上后者已经集成在前者里面了，新建一个MVC的项目模板就已经内置了JQuery、JQuery.validate。但是MesssageBoard是一个由空模板创建的项目，所以我们需要在项目中手动添加这些脚本文件。在项目中添加Scripts文件夹，并将下载好的JQuery、JQuery.validate和JQuery.validate.unobtrusive放置其中。
下面将这些脚本依次加入Write视图，注意先后顺序。
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<title>Write</title>
</head>
<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>
</html>
Step 2. 开启客户端验证
在默认情况下ASP.NET MVC项目就已经开启客户端的验证了。打开Web.config文件，可以看到ClientValidationEnabled和UnobtrusiveJavaScriptEnabled这两项键值都为True，说明支持客户端验证。如下图所示。
也可以为单个视图启用或禁用客户端验证，比如在Write视图里，我们可以设置HtmlHelper.ClientValidationEnabled = true来启用客户端验证。
@model MessageBoard.Models.Message
@{
Layout = null;
HtmlHelper.ClientValidationEnabled = true;
}
<!DOCTYPE html>
.
.
.
试一试，你就可以看到客户端验证的效果了。不过客户端验证有其局限性，如果用户浏览器不支持或关闭了Javascript的使用，客户端验证就会完全失效。所以要将客户端和服务器端结合使用，不能只依赖客户端验证。
ASP.NET MVC轻教程 Step By Step 12——客户端验证的更多相关文章
- ASP.NET MVC轻教程 Step By Step 1 ——入门
使用ASP.NET MVC有一段时间了,本人还是非常喜欢ASP.NET MVC这个框架模式的.在经历了WebForm复杂粗暴的做法后,自然感觉简洁优雅的MVC清新可人,只不过WebForm和MVC的设 ...
- ASP.NET MVC轻教程 Step By Step 8——路由
在前面的教程里,细心的你可能会有个疑问,就是地址栏输入/Home/Write就可以进入留言页面.无论是静态HTML还是ASP/ASP.NET.PHP,URL都是和某个页面相关.比如假设有个URL是“w ...
- ASP.NET MVC轻教程 Step By Step 13——页面布局
一般在一个网站中页面会使用相同的结构和元素,如果每个页面都要重复添加这些元素,不仅繁琐更会给我们后期维护带来大麻烦.所以我们采用网页模板之类的技术,将固定不变的元素放入模板,同时留下一些占位符供页面各 ...
- ASP.NET MVC轻教程 Step By Step 9——分页
现在我们要把Index视图的留言信息进行分页显示. Step 1. 创建路由 我们希望以类似地址http://localhost:41583/Page1来表示第一页,Page2表示第二页,以此类推.在 ...
- ASP.NET MVC轻教程 Step By Step 7——改进Write动作方法
在上一节我们使用强类型视图改进Write视图获得更好的智能感知和代码重构,现在可以进一步的改进动作方法. Step 1. 数据模型绑定 在Save方法中我们使用Request来获取表单传送的值,其实可 ...
- ASP.NET MVC轻教程 Step By Step 6——改进表单
上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单. Step 1. 修改Form标签 首先,我们可以使用Html.B ...
- ASP.NET MVC轻教程 Step By Step 2 ——View初探
在上一节我们完成了一个最简化的MVC程序,最重要的是下面这段代码. public class HomeController : Controller { public string Index() { ...
- ASP.NET MVC轻教程 Step By Step 4——Model、View和Controller
ASP.NET MVC中的Model(数据模型)主要包括定义数据结构.数据库读写.数据验证等等和对象处理相关的工作. 在解决方案资源管理器中找到Model文件夹,点击右键,添加一个新类,名为“Mess ...
- [ASP.NET MVC]笔记（四 UnobtruSive AJAX和客户端验证
UnobtruSive AJAX和客户端验证 ASP.NET MVC 已经默认开启非侵入试js和客户端验证,在web.config可以看到如下配置: <configuration> < ...
随机推荐
- 连接数据库超时设置autoReconnect=true
1,问题现象: com.mysql.jdbc.CommunicationsException: The last packet successfully received from the serve ...
- Http(2)
1.传递的请求参数如何获取 GET方式: 参数放在URI后面 POST方式: 参数放在实体内容中 核心的API: request.getParameter("参数名"); 根据参 ...
- java数据库连接池dbcp的使用
近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的3层开发模式 ...
- UVA10518 - How Many Calls?（矩阵高速幂）
UVA10518 - How Many Calls?(矩阵高速幂) 题目链接 题目大意:给你fibonacci数列怎么求的.然后问你求f(n) = f(n - 1) + f(n - 2)须要多少次调用 ...
- hibernate入门之person表
下面的hibernate入门person表指的是:根据mysql数据库中的test表和其中的元素-->建立映射表==>进而创建持久化类的顺序来操作了,下面为步骤 1.配置MySQL驱动程序 ...
- 如何让MFC程序关闭按钮失效，也无法右击任务栏关闭窗口来关闭？
如何让MFC程序关闭按钮失效,也无法右击任务栏关闭窗口来关闭,即右键任务栏的关闭窗口失效呢?很简单,有一个小窍门就是:响应IDCANCEL消息,具体实现如下: 首先定义消息映射:ON_BN_CLICK ...
- php curl_init函数用法
原文地址:curl_init函数用法">php curl_init函数用法作者:loading 使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓 ...
- 《高性能js》读书笔记
第一章:加载和执行 .浏览器的JavaScript的引擎是编译器层的优化: .当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着 .主流浏览器都允许并行下载JS. .减 ...
- 一个自定义线程池的小Demo
在项目中如果是web请求时候,IIS会自动分配一个线程来进行处理,如果很多个应用程序共享公用一个IIS的时候,线程分配可能会出现一个问题(当然也是我的需求造成的) 之前在做项目的时候,有一个需求,就是 ...
- Android - 向服务器发送数据(POST) - HTTPClient.
该篇文章主要说明使用Apache提供的HTTPClient,通过post方式,向服务器发送数据.由于有些东西在 Android - 向服务器发送数据(GET)中提到过,就不再重复. 一,Android ...