ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素

ASP.NET MVC Preview 5 演示Demo系列： http://mike108mvp.cnblogs.com

ASP.NET MVC [QQ交流群1]：47788243  [QQ交流群2]：1214648  [QQ交流群3]：1215279 



JQuery is a lightweight javascript library adding the Ajax and other functionality to a web application. Recently Microsoft has announced that they will integrate JQuery into their Visual Studio IDE. The next version of ASP.NET MVC will be the first product shipped with JQuery.

This Mvc Demo #7 demonstrates how to use JQuery to validate the submit form data and how to use JQuery to manipulate Html elements.

Hope this helps, let's get started. 

Download the Code：https://files.cnblogs.com/mike108mvp/Mike108Demo07.rar

这个演示项目实现了在ASP.NET MVC中使用开源Javasript脚本库 JQuery来实现表单数据验证及操作Html元素（动态隐藏/显示一个采购数量输入框）。

开发环境：Visual Studio 2008 SP1 ＋ ASP.NET MVC Preview 5 ＋ Linq To Sql ＋ SQL Server 2005

ASP.NET MVC Preview 5 下载地址： http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16775

【Step By Step 操作步骤】

1、下载本演示源码：https://files.cnblogs.com/mike108mvp/Mike108Demo07.rar  【ok】

2、打开下载的源码中的“数据库脚本Demo07.sql”脚本文件，双击，在SQL Server 2005 中执行。该Sql脚本将生成一个新的mike108mvp数据库，里面包含5个表User、UserType、Product、Order、OrderItem。【ok】

3、Visual Studio 2008 双击打开下载的演示源码中的 Mike108Demo.sln 解决方案文件，按F5运行。【ok】

4、运行后，点击页面右上角的“采购”链接。打钩选中要采购的产品，将动态显示出“采购数量”输入框，在里面输入非数字时，点击“批量采购”就会激活JQuery数据验证。【ok】

5、点击订单列表中的“订单明细”链接，可以在右边显示该订单的明细列表。【ok】

6、母版页site.master添加JQuery引用。【ok】

<script src="/Content/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
<link href="/Content/jquery/style/validator.css" type="text/css" rel="stylesheet" />
<script src="/Content/jquery/formValidatorRegex.js" type="text/javascript"></script>
<script src="/Content/jquery/formValidator.js" type="text/javascript"></script>

7、UsersController.cs 【ok】

8、Views/Users/BuyProduct.aspx 产品采购页面，Views/Users/OrderList.aspx 订单列表与订单明细页面。【ok】

Download the Code：https://files.cnblogs.com/mike108mvp/Mike108Demo07.rar

ASP.NET MVC Preview 5 演示Demo系列： http://mike108mvp.cnblogs.com

Demo #1 实现CRUD增删查改：http://www.cnblogs.com/mike108mvp/archive/2008/08/31/1280689.html
Demo #2 实现Membership角色权限控制：http://www.cnblogs.com/mike108mvp/archive/2008/09/03/1283432.html
Demo #3 实现MVC批量上传文件：http://www.cnblogs.com/mike108mvp/archive/2008/09/04/1284087.html
Demo #4 实现RadioButtonList与DropDownList应用：http://www.cnblogs.com/mike108mvp/archive/2008/09/15/1291153.html
Demo #5 实现MikePager数据分页和GridView控件：http://www.cnblogs.com/mike108mvp/archive/2008/09/19/1294079.html
Demo #6 实现MvcContrib的Html.CheckBoxList()应用：http://www.cnblogs.com/mike108mvp/archive/2008/09/27/1300572.html