The logon dialog box uses the dialog box provided by jquery, so you do not need to add other js files. First, add a form model for the logon dialog box. Create an "AccountModels" class file under the Models directory and add a Logon class. The Code is as follows:
1 public class LogOnModel
2 {
3 [Required (ErrorMessage = "enter" User Name ")]
4 [Display (Name = "username:")]
5 public string UserName {get; set ;}
6
7 [Required (ErrorMessage = "enter" password ")]
8 [DataType (DataType. Password)]
9 [Display (Name = "password")]
10 public string Password {get; set ;}
11
12 [Required (ErrorMessage = "Enter the" Verification Code ")]
13 [StringLength (6, ErrorMessage = "enter the correct verification code", MinimumLength = 6)]
14 [Display (Name = "Verification Code")]
15 public string VaildCode {get; set ;}
16
17 [Display (Name = "Remember me? ")]
18 public bool RememberMe {get; set ;}
19}
20
The form contains four input items: User Name, password, verification code, and "remember me.
Create an operation and division view to display the form. Create the "AccountController" Controller in the "Controllers" directory and create a "Logon" operation. The Code is as follows:
1 [ChildActionOnly]
2 public ActionResult Logon ()
3 {
4 return PartialView ();
5}
6
The code is very simple. Just return to the segment view. Next, create the corresponding segment view. The Code is as follows:
1 @ model Extshop. Models. LogOnModel
2
3 @ using (Ajax. BeginForm ("Logon", "Account", new AjaxOptions {OnSuccess = "LogonSuccess", LoadingElementId = "LogonLoad", UpdateTargetId = "LogonMsg"
4, OnBegin = "LogonBegin"}, new {id = "LogonForm "}))
5 {
6 <div>
7 <fieldset>
8 <legend> </legend>
9 <p>
10 @ Html. LabelFor (m => m. UserName)
11 @ Html. TextBoxFor (m => m. UserName)
12 </p>
13 <div class = "error">
14 @ Html. ValidationMessageFor (m => m. UserName)
15 </div>
16 <p>
17 @ Html. LabelFor (m => m. Password)
18