ASP. NET implements personal information registration page and jumps to display, asp.net personal information

ASP. NET implements personal information registration page and jumps to display, asp.net personal information

Question

Create an MVC project and design a personal information registration page using technologies such as HTML, CSS, JS, jQuery, Ajax, and jQuery UI. When you click "Submit", the input information is displayed on the new page.

Basic requirements:

The username is 6-10 lower-case letters (the username cannot be "wustzz" in lower case, which is verified by Ajax technology). The password is 6 digits, there is a prompt when confirming that the passwords are inconsistent; the original place uses cascade (implemented by jquery); the Email must comply with the Email format; the mobile phone number is 11 bits (assuming it must start with 1569 ); use the jQuery UI calendar component to set the date of birth. The image will be displayed on a new page.

Effect

(The source code is at the end of the article)

 

Key knowledge points

1. Basic html Interface Programming
2. JavaScript Language
3. Use of jQuery and jQuery UI
4. ASP. NET Request related operations
5. Understand the directory structure and basic programming in ASP. Net web mvc.

Code

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 () {// obtain the image file HttpPostedFileBase file = Request. files ["filename"]; if (file! = Null) {// store the image in the/Content/UpLoad/directory named 111.png var fileName = Request. MapPath ("~ /Content/UpLoad/") +" 111.png"; file. SaveAs (fileName);} return View ();}}}

Index. cshtml

@ {ViewBag. Title = "Index" ;}< script src = "~ /Scripts/my_script.js "> </script> <script src = "~ /Jquery-ui-1.11.1.custom/external/jquery. js "> </script> <script> $ (document ). ready (function () {$ ("# native_place "). change (function () {switch ($ ("# native_place "). val () {case "Jiangsu": $ ("# major "). empty (); $ ("# major "). append ("<option value =''> </option> "); $ (" # major "). append ("<option value = 'jiangyin '> Jiangyin </option>"); $ ("# major "). append ("<option value = 'wuxi '> Wuxi </option>"); $ ("# major "). append ("<option value = 'Changzhou '> Changzhou </option> "); break; case" Hubei ": $ (" # major "). empty (); $ ("# major "). append ("<option value =''> </option> "); $ (" # major "). append ("<option value = 'wuhan '> Wuhan </option>"); $ ("# major "). append ("<option value = 'wuchang '> Wuchang </option>"); $ ("# major "). append ("<option value = 'jingzhou '> Jingzhou </option>"); break ;}});}); </script> @ section scripts {<script src = "~ /Jquery-ui-1.11.1.custom/jquery-ui.min.js "> </script> <link href = "~ /Jquery-ui-1.11.1.custom/jquery-ui.min.css "rel =" stylesheet "/> <script> $ (document ). ready (function () {$ ("# birthday "). datepicker ({dateFormat: "yy-mm-dd", inline: true}) ;}</script >}< h2 style = "color: red; font-family: entity body; font-size: 30px; "> enter personal details 
Show. cshtml
@ {ViewBag. title = "Show" ;}< h2 style = "color: red; font-family:; font-size: 30px; "> personal information display 
My_script.js
Function checkName () {var u = document. getElementById ("username"); var t = document. getElementById ("tip_name"); var reg =/^ [a-z] {6, 10} $/; if (! Reg. test (u. value) {t. innerHTML = "username is 6-10 lowercase letters"; return false;} else {if (u. value = "wustzz") {t. innerHTML = "user name cannot be wustzz"; return false;} t. innerHTML = "username entered correctly"; return true ;}} function checkPassword () {var p = document. getElementById ("psd"); var t = document. getElementById ("tip_psd"); var reg =/^ \ d {6} $/; if (! Reg. test (p. value) {t. innerHTML = "6-digit password"; return false;} else {t. innerHTML = "correct password"; return true ;}} function checkPasswordAgain () {var p1 = document. getElementById ("psd"); var p2 = document. getElementById ("psd_again"); var t = document. getElementById ("tip_psd_again"); if (p1.value! = P2.value) {t. innerHTML = "inconsistent passwords" return false;} else {t. innerHTML = "consistent Password Confirmation"; return true ;}} function checkEmail () {var e = document. getElementById ("email"); var t = document. getElementById ("tip_email"); var reg =/^ [\ w-] + (\. [\ w-] +) * @ [\ w-] + (\. [\ w-] +) + $/; if (! Reg. test (e. value) {t. innerHTML = "Email format required"; return false;} else {t. innerHTML = "Email filled in correctly"; return true ;}} function checkPhone () {var p = document. getElementById ("phone"); var t = document. getElementById ("tip_phone"); var reg =/^ 1569 \ d {7} $/; if (! Reg. test (p. value) {t. innerHTML = "The phone is an 11-digit number starting with 1569"; return false;} else {t. innerHTML = "Enter the mobile phone correctly"; return true ;}} function checkAll () {if (checkName () & checkPassword () & checkPasswordAgain () & checkEmail () & checkPhone () {return true;} return false ;}
Source Code address:
Http://download.csdn.net/detail/double2hao/9691584
The above is a small series of ASP. NET personal information registration page and jump to display, hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!