Step by step use ext js mvc and ASP. Net MVC 3 to develop a simple CMS background management system for Logon window debugging

Now you can debug the logon window.

Open the home page file of the system, and the index. cshtml file under the views \ home directory. To dynamically load the login window, you must set the loading path first, so Add the following code to the onready function:

Ext. loader. setconfig ({

Enabled: True,

Paths :{

'Ext. UX ': 'scripts/extjs/UX'

}

});

 

 

 

In the code, if enabled is true, it indicates that dynamic loading is enabled. The paths object defines the loading path. In this example, the ext extension's loading path is "scripts/extjs/UX ".

Next, add the following code to the login request window:

Ext. Require ('ext. UX. login ');

 

In this way, ext will automatically load the logon window.

Delete the statement that originally called the alert method and add the code that displays the logon window:

Ext. UX. login. Show ();

 

Now, open the homepage and you will see the window shown in 9. It is recommended to use Firefox for debugging and open firebug on the page.

Figure 9 logon window

The window height is a little too large, the width is a little small, the width is changed to 450, and the height is changed to 300, it is almost the same.

Click one piece to refresh the verification code. But the problem is that no mouse pointer is not a hand-shaped one. It is not difficult to change it. When creating an IMG object, add the style configuration item, it uses the configured value as the image style. The modified code is as follows:

Me. Image = ext. Create (ext. IMG ,{

Style: "cursor: Pointer ",

SRC: "/verifycode ",

Listeners :{

Click: Me. onrefrehimage,

Element: "El ",

Scope: Me

}

});

 

Refresh the page and you will see the mouse moving over the image. The pointer has been replaced with a hand shape.

Because the verification is not done yet, the current submission will see an error in firebug.

Now let's leave the database aside for a simple verification test. First, create a class file named accountmodels. CS in the models directory. The code after the creation is as follows:

Using system;

Using system. Collections. Generic;

Using system. LINQ;

Using system. Web;

 

Namespace simplecms. Models

{

Public class accountmodels

{

}

}

 

First, add a reference to verify the model:

Usingsystem. componentmodel. dataannotations;

 

Modify the class name accountmodels to loginmodel and add the username, password, and vcode attributes. The Code is as follows:

Public class loginmodel

{

[Required]

[Display (name = "username")]

Public String username {Get; set ;}

 

[Required]

[Display (name = "password")]

Public String password {Get; set ;}

 

[Required]

[Display (name = "Verification Code")]

Public String vcode {Get; set ;}

}

 

 

The required attribute in the Code indicates that the field is required. Display is used to indicate the Chinese name of a field, which is not required.

After the model is created, create a controller named accountcontroller. The Code is as follows:

Using system;

Using system. Collections. Generic;

Using system. LINQ;

Using system. Web;

Using system. Web. MVC;

 

Namespace simplecms. Controllers

{

Public class accountcontroller: Controller

{

//

// Get:/account/

 

Public actionresult index ()

{

Return view ();

}

 

}

}

 

Add a reference to the model first:

Using simplecms. models;

 

JSON. Net needs to be introduced because data needs to be returned in JSON format. Select a tool, library Package Manager, and manage the nuget program of the solution from the main menu. Enter JSON. net in the search window displayed in 10, find it, and click Install. After the installation is complete, add the reference of josn. net to the account class:

Using newtonsoft. JSON;

Using newtonsoft. JSON. LINQ;

 

Figure 10 download josn. net

The second sentence of the referenced statement allows the JSON to be used for the LINQ operation, which can simplify the code. Therefore, I am used to referencing the statement.

Now you can start coding. Because the index method is not required, change it to login and change the returned result from actionresult to jobject. Because the method must receive the submitted model data, the httppost feature is added to the method and loginmodel is used as the model. The code after completion is as follows:

[Httppost]

Public jobject login (loginmodel Model)

{

Return view ();

}

 

 

The data format required by ext JS is basically fixed, basically a JSON object, and the object will contain the success keyword. Therefore, in order to simplify this work, you can create an auxiliary function to generate the returned object. Add a class file named myfunction. CS in the Helper directory. The Code is as follows:

Using system;

Using system. Collections. Generic;

Using system. LINQ;

Using system. Web;

 

Namespace simplecms. helper

{

Public class myfunction

{

}

}

 

Add a reference to JSON. net in the class. Then add a static writejobjectresult method. The return value of the method is jobject. There is currently only one method parameter, success with a Boolean value. Create a jobject to be returned in the method and add a success attribute to it. The Code is as follows:

Public static jobject writejobjectresult (bool success)

{

Jobject Jo = new jobject {

New jproperty ("success", success)

};

Return Jo;

}

 

 

The Code uses LINQ to create a jobject object, so unfamiliar with it may feel a little weird. Currently, only one keyword can be returned in the code, which will be added in future processes.

Now switch back to the accountcontroller controller, reference the Helper naming control, define a Boolean variable success, and return the result (to) using the writejobjectresult method just defined. The Code is as follows:

Boolsuccess = false;

Return myfunction. writejobjectresult (SUCCESS );

 

On the 690 page of the author's book, we can understand the return format of the field error information, which needs to be returned in the form of a jobject object. Therefore, we create an errors object of the jobject type to store the error information. The Code is as follows:

Jobject errors = new jobject ();

 

Verify whether the model has any errors. If any, write the errors in the model to the errors object. Because model data is submitted in other windows and the error status needs to be converted to the errors object, you can add a modelstatetojobject method in myfunction to process this. Switch to the myfunction class and add a static method named modelstatetojobject. The Code is as follows:

Public static void modelstatetojobject (modelstatedictionarymodelstate, jobject errors)

{

Foreach (var c in modelstate. Keys)

{

If (! Modelstate. isvalidfield (c ))

{

String errstr = "";

Foreach (VAR err in modelstate [C]. Errors)

{

Errstr + = err. errormessage + "<br/> ";

}

Errors. Add (New jproperty (C, errstr ));

}

}

}

 

 

Do not forget to reference using system. Web. MVC.

The Code traverses fields that cannot be verified in modelstate and adds them to the errors object.Note that the field name in the model must be the same as the name of the field when defining the form. Otherwise, the background field cannot match the foreground field.

After switching, the accountcontroller controller completes the authentication code for the logon model. The Code is as follows:

If (modelstate. isvalid)

{

}

Else

{

Myfunction. modelstatetojobject (modelstate, errors );

}

 

Now we need to consider how to return this errors object. The solution is to add an object of the jobject type in the writejobjectresult method and add the following code:

If (errors! = NULL & errors. hasvalues)

{

Jo. Add (New jproperty ("errors", errors ));

}

 

 

 

The errors keyword is written only when errors is not null and has a value.

Switch back to the accountcontroller controller and modify the call parameters of the writejobjectresult method.

Now, in the verification process, you must first verify the verification code. Therefore, you must first obtain the verification code stored in the session. The Code is as follows:

String vcode = "";

If (session ["vcode"]! = NULL)

{

Vcode = session ["vcode"]. tostring ();

}

 

The verification code is verified below. Because the session may time out and lose the verification code, you must ensure that the Verification Code cannot be a NULL Character during verification. The Code is as follows:

If (vcode. Count ()> 0 & vcode. tolower () = model. vcode. tolower ())

{

}

Else

{

Errors. Add ("vcode", "Verification code error ");

}

 

The tolower method ensures that the verification code is case insensitive. When a verification error occurs, write the error to the errors object so that the verification code is incorrect in the logon window.

If you do not need a database for the moment, use some default values for testing. For example, if the user name is admin and the password is 123456, the logon is successful. The Code is as follows:

If (model. username. tolower () = "admin" & model. Password = "123456 ")

{

Success = true;

}

Else

{

Errors. Add ("username", "Incorrect username or password. ");

Errors. Add ("password", "incorrect user name or password. ");

}

 

If the user name and password are incorrect, an error message is returned for the user name and password fields. If the verification succeeds and the return value of success is true, the logon is successful.

Generate a new solution and refresh the browser. Enter something in the login window and submit it. The result shown in 11 is displayed, while the returned data after submission shown in 12 is displayed in firebug.

Figure 11 logon window after submission

The cause shown in Figure 11 is that the bug mentioned in the previous article forgot to block waitmsg. Now switch to login. js blocking and try again. Everything works. Now, enter Admin as the user name, 123456 as the password, enter the correct verification code, and submit the code. The page will be refreshed again, indicating that everything went well and the login process has been completed.

Figure 12 information returned by firebug

Now, we are here today.

Appendix: the code in the login window in the previous article is incorrect. The maximum value restriction configuration item in the verification code is incorrect. Two minlengths are used to change one of them to maxlength.

 

Source code: http://download.csdn.net/detail/tianxiaode/4558834