新建一个MVC项目，利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技术设计一个个人信息注册页面。当点击“提交”按钮时，跳转到新的页面显示录入信息。
基本要求：
用户名为6-10个小写字母（小写使用正则式验证，且用户名不能为“wustzz” –用Ajax技术来检测）；密码为6位数字，确认密码不一致时有提示；籍贯使用级联（jquery实现）；Email必须符合Email格式；手机是11位（假设规定以1569开头）；出生年月使用jQuery UI日历组件设置；图片要传递到新的页面显示。
实现效果
（源码在文章结尾）
主要涉及知识点
1、基本的html界面编程
2、JavaScript语言
3、jQuery、jQuery UI的使用
4、ASP.NET Request相关操作
5、了解ASP.Net WEB MVC下的目录结构以及基础编程
代码
ProjectController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ProjectOne.Controllers { public class ProjectController : Controller { // GET: Project public ActionResult Index() { return View(); } public ActionResult Show() { //获取图片文件 HttpPostedFileBase file = Request.Files["filename"]; if(file != null) { //将图片存储在/Content/UpLoad/目录下，名字为111.png var fileName = Request.MapPath("~/Content/UpLoad/") + "111.png"; file.SaveAs(fileName); } return View(); } } }
Index.cshtml
@{ ViewBag.Title = "Index"; } <script src="https://www.jb51.net/~/Scripts/my_script.js"></script> <script src="https://www.jb51.net/~/jquery-ui-1.11.1.custom/external/jquery/jquery.js"></script> <script> $(document).ready(function () { $("#native_place").change(function () { switch ($("#native_place").val()) { case "江苏": $("#major").empty(); $("#major").append("<option value=''></option>"); $("#major").append("<option value='江阴'>江阴</option>"); $("#major").append("<option value='无锡'>无锡</option>"); $("#major").append("<option value='常州'>常州</option>"); break; case "湖北": $("#major").empty(); $("#major").append("<option value=''></option>"); $("#major").append("<option value='武汉'>武汉</option>"); $("#major").append("<option value='武昌'>武昌</option>"); $("#major").append("<option value='荆州'>荆州</option>"); break; } }); }); </script> @section scripts{ <script src="https://www.jb51.net/~/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script> <link href="https://www.jb51.net/~/jquery-ui-1.11.1.custom/jquery-ui.min.css" /> <script> $(document).ready(function () { $("#birthday").datepicker({ dateFormat: "yy-mm-dd", inline: true }); }); </script> } <h2>请输入个人详细信息</h2> <form onsubmit="return checkAll()" action="~/Project/Show" method="post" enctype="multipart/form-data"> <table> <tr> <th>用户名</th> <th> <input type="text" onblur="checkName()" /> <span>*</span> </th> </tr> <tr> <th>密码</th> <th> <input type="text" onblur="checkPassword()" /> <span>*</span> </th> </tr> <tr> <th>确认密码</th> <th> <input type="text" onblur="checkPasswordAgain()" /> <span>*</span> </th> </tr> <tr> <th>性别</th> <th> <input type="radio" value="男" checked="checked" /> 男 <input type="radio" value="女" />女 </th> </tr> <tr> <th>籍贯</th> <th> <select> <option value=""></option> <option value="江苏">江苏</option> <option value="湖北">湖北</option> </select> <select></select> </th> </tr> <tr> <th>Email</th> <th> <input type="text" onblur="checkEmail()" value="如 xujiajia@qq.com" /> <span>*</span> </th> </tr> <tr> <th>手机号</th> <th> <input type="text" onblur="checkPhone()" value="手机是11位以1569开头的数字" /> <span>*</span> </th> </tr> <tr> <th>专业擅长</th> <th> <select multiple="multiple"> <option value="Windows编程">Windows编程</option> <option value="单片机编程">单片机编程</option> <option value="ASP.NET编程">ASP.NET编程</option> <option value="J2EE编程">J2EE编程</option> <option value="JAVA编程">JAVA编程</option> </select> </th> </tr> <tr> <th>业余爱好</th> <th> <input type="checkbox" value="足球" />足球 <input type="checkbox" value="篮球" />篮球 <input type="checkbox" value="排球" />排球 <input type="checkbox" value="唱歌" />唱歌 <input type="checkbox" value="其他" />其他 </th> </tr> <tr> <th>个人照片</th> <th> <input type="file" /> </th> </tr> <tr> <th>出生年月</th> <th> <input type="text" readonly="readonly" /> </th> </tr> <tr> <th>备注信息</th> <th> <textarea cols="40" rows="8"> 可以补充一下 </textarea> </th> </tr> <tr> <th></th> <th> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </th> </tr> </table> </form>
Show.cshtml