Asp. NET to achieve personal information registration page and jump display _ practical skills

Topic

Create a new MVC project that uses technologies such as HTML, CSS, JS, jquery, Ajax, and jquery UI to design a personal information registration page. When you click the "Submit" button, jump to the new page to display input information.

Basic requirements:

User name is 6-10 lowercase letters (using regular authentication in lowercase, and user name cannot be "Wustzz" – detected with Ajax technology); password is 6 digits, prompt when confirming password inconsistency; native use Cascade (jquery implementation); Email must conform to email format ; The mobile phone is 11 digits (assuming the rule begins with 1569); Date of birth use the jquery UI calendar component settings; The picture is to be passed to the new page display.

Implementation effect

(source code at the end of the article)

Mainly involved in knowledge points

1, the basic HTML interface programming

2. JavaScript language

3. jquery, jquery UI usage

4, ASP.net request related operations

5. Understand the directory structure and basic programming under 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 ()
{
//Get picture files
httppostedfilebase file = request.files["filename"];
if (file!= null)
{
//The picture is stored in the/content/upload/directory, the name is 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/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: italics; font-size:30px;" > Please enter your personal details </h2> <form onsubmit= "return Checkall ()" action= "~/project/show" method= "POST" enctype= " Multipart/form-data "> <table> <tr> <th> user name </th> <th> <input type=" text "onblur=" CheckName () "Name=" username "id=" username "/> <span style=" color:red; "id=" Tip_name ">*</span> </th > </tr> <tr> <th> password </th> <th> <input type= "text" onblur= "Checkpassword ()" Name= " PSD "id=" psd "/> <span style= color:red" id= "tip_psd" >*</span> </th> </tr> <tr> < th> Confirm Password </th> <th> <input type= "text" onblur= "Checkpasswordagain ()" Name= "Psd_again" id= "Psd_again" />; span style= "color:red" id= "Tip_psd_again" >*</span> </th> </tr> <tr> <th> sex </th > <th> <input type= "Radio" name= "Gender" value= "Men" checked= "checked"/> male <input type= "Radio" Gen Der "value=" female "/> </th> </tr> <tr> <th> birthplace </th> <th> <select id=" Native_place "Name=" Native_place "> <option value=" "></option> <option value=" Jiangsu "> Jiangsu </option> < Option value= "Hubei" > Hubei </option> </select> <select id= "Major" Name= "major" ></select> </th > </tr> <tr> <th>Email</th> <th> <input type= "text" onblur= "Checkemail ()" Id= " Email "name=" email "value=" such as xujiajia@qq.com "/> <span style=" color:red; "id=" Tip_email ">*</span> </ Th> </tr> <tr> <th> mobile number </th> <th> <input type= "text" onblur= "Checkphone ()" Id= " Telephone "name=" phone "value=" handset is 11 digits "/> <span style=" with the number beginning with 1569 Color:red, "id=" Tip_phone ">*</span> </th> </tr> <tr> <th> Professional Excel </th> <th> <select name= "speciality" multiple= "multiple" > <option value= "Windows Programming" >windows programming </option> < Option Value= "SCM Programming" > SCM programming </option> <option value= "ASP. NET Programming ">asp. NET programming </option> <option value= "Java Programming" >J2EE programming </option> <option value= programming >java option> </select> </th> </tr> <tr> <th> hobby </th> <th> <input type= " CheckBox "Name=" hobby "value=" soccer/> Soccer <input type= "checkbox" name= "Hobby" value= "basketball"/> Basketball <input type= " CheckBox "Name=" "Hobby" value= "Volleyball"/> Volleyball <input type= "checkbox" name= "hobby" value= "singing"/> Singing <input type= " CheckBox "Name=" hobby "value=" other "/> Other </th> </tr> <tr> <th> personal photos </th> <th> < Input type= "file" id= "filename" name= "filename"/> </th> </tr> <tr> <th> Birth date </th>
<th> <input type= "text" id= "Birthday" name= "Birthday" readonly= "readonly"/> </th> </tr> <tr > <th> Memo Information </th> <th> <textarea name= "More_info" cols= "rows=" "8" > can be added </textarea
> </th> </tr> <tr> <th></th> <th> <input type= "Submit" value= "submitted"/>   <input type= "reset" value= "reset"/> </th> </tr> </table> </form>

Show.cshtml

@{viewbag.title = "Show";} <h2 style= "color:red;font-family: italics; font-size:30px;"
> Personal Information </h2> <table> <tr> <th> user name </th> <th> @Request ["username"]</th> </tr> <tr> <th> Password </th> <th> @Request ["PSD"]</th> </tr> <tr> <th > Confirm Password </th> <th> @Request ["Psd_again"]</th> </tr> <tr> <th> sex </th> < Th> @Request ["Gender"]</th> </tr> <tr> <th> birthplace </th> <th> @Request ["Native_ Place "]</th> <th> @Request [" Major "]</th> </tr> <tr> <th>Email</th> <th > @Request ["Email"]</th> </tr> <tr> <th> mobile number </th> <th> @Request ["Phone"]</ Th> </tr> <tr> <th> Professional Excel </th> <th> @Request ["Speciality"]</th> </tr> < tr> <th> Hobbies </th> <th> @Request ["Hobby"]</th> </tr> <tr> <th> personal photos </
Th><TH><IMG id= "img" src= "~/content/upload/111.png" alt= ""/></th> </tr> <tr> <th> Date of birth </th> <th> @Request ["Birthday"]</th> </tr> <tr> <th> Memo Information </th> <th > @Request ["more_info"]</th> </tr> </table>

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 6-10 lowercase letters"; return false;} else {if (U.value = = "Wustzz") {t.innerhtml = "
User name may not be Wustzz ";
return false;
} t.innerhtml = "User name is filled in 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 = "password is 6 digits"; return false;} else {t.innerhtml = "password is filled in correctly"; return true;}} function Checkpasswordagain () {var p1 = document.getElementById ("psd"); var P2 = document.getElementById ("Psd_again"); v
Ar t = document.getElementById ("Tip_psd_again");
if (P1.value!= p2.value) {t.innerhtml = "inconsistent password" return false;} else {t.innerhtml = "confirm consistent password"; 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 = "must fill in the email format"; return false;} else {t.innerhtml = "email is 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 = "cell phone is 11 digits with 1569"; return false;} else {t.innerhtml = "complete phone is correct"; return true;} The function Checkall () {if (CheckName () && Checkpassword () && checkpasswordagain () && Checkemail (
) && Checkphone ()) {return true;} return false; }

Source Address:

Http://xiazai.jb51.net/201611/yuanma/ProjectOne

The above is a small set to introduce the ASP.net to realize personal Information registration page and jump display, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!