Asp. Net + Extjs Login

Through the study of Ext, we can find that learning is divided into trilogy: 1. check the Demo on the official website to learn more about Ext. 2. read related books and provide theoretical guidance; 3. implement the Demo on the official website and understand the true meaning of Ext.

After completing steps 1 and 2, what we need to do now is to implement step 3. My goal is to use Extjs to draw pages and Asp. net.

The macro-level guidance is available. The following sections detail the implementation process. The idea is as follows:

1. Draw a login Panel-loginPanel;
2. Define a function CheckLogin to check whether the logon is successful;
3. Define a logon form -- win, and add loginPanel to the logon form;
4. Add "OK" and "cancel" in the login form, and bind the "OK" button to the login verification function CheckLogin;
5. Bind a minimal event to the logon form;
6. define a new form function loginSuccess to pop up successfully

With theoretical guidance, the following code is implemented:

        
 <Script src = "javascript/ext-base.js" type = "text/javascript"> </script> <script src = "js/ext-all.js" type = "text/javascript"> </ script> <script type = "text/javascript" language = "javascript"> var loginPanel; ext. onReady (function () {// 1. draw a login Panel loginPanel = new Ext. form. formPanel ({labelWidth: 40, width: 230, height: 120, frame: true, bodyStyle: "padding: 20", // Add inner spacing to the Panel items: [{xtype: "textfield", id :" UserName ", fieldLabel:" userName ", style:" margin: 1 3 15 3 ", labelWidth: 10, emptyText:" Enter the userName... ", allowBlank: false, blankText:" user name cannot be blank "},{ xtype:" textfield ", id:" userPass ", fieldLabel:" password ", style: "margin: 1 3 15 3", labelWidth: 10, inputType: "password"}]}); // 2. define a function CheckLogin () {var userName = Ext. getCmp ("userName "). getValue (); // user name var userPass = Ext. get Cmp ("userPass "). getValue (); // The password if (Ext. util. format. trim (userName) = "" | Ext. util. format. trim (userPass) = "") {// the user name and password cannot be empty Ext. msg. alert ("prompt", "User Name or password cannot be blank"); return;} Ext. ajax. request ({url: "Extjs. ashx? UserName = "+ userName +" & passWord = "+ userPass, // send the user name and passWord to the url method:" get ", success: function (response) {var getData = response. responseText; // get server data if (getData = "OK") {loginSuccess (); // login successful} else {Ext. msg. alert ("warning", "Logon Failed! ") ;}}, Failure: function (response, options) {alert (" failed ") ;}}) ;}// 3. define a logon form -- win, and add loginPanel to the logon form; var win = new Ext. window ({title: "login form", minimizable: true, // minimize maximizable: true, // maximize width: 240, height: 186, frame: true, items: [loginPanel], // 4. add "OK" and "cancel" to the login form, and bind the "OK" button to the login verification function CheckLogin buttons: [{text: "OK", handler: CheckLogin }, {text: "cancel"}]}); // 5. bind a minimal event win to the logon form. minimize = function () {Ext. messageBox. confirm ("prompt", "Whether to minimize", minwindow); function minwindow (btn) {if (btn = "yes") {Ext. msg. alert ("prompt", "Are you sure you want to minimize", function () {alert ("successfully minimized") ;}}// 6. define a new form function loginSuccess; function loginSuccess () {var winLoginSuccess = new Ext. window ({title: "form after Successful Logon", minimizable: true, // minimize maximizable: true, // maximize collapsible: true, width: 550, height: 550, frame: true, items: [{xtype: "button", frame: true, text: "a button in the form after Successful Logon"}]}); win. hide (); // hide winLoginSuccess In the logon form. show (); // display the form after successful logon} win. show (); // display form}); </script>    

Code Implementation of General backend Extjs processing programs:

Using System; using System. Collections. Generic; using System. Linq; using System. Web; namespace Demo {////// Summary of Extjs ///Public class Extjs: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string userName = context. request. queryString ["userName"]; string userPass = context. request. queryString ["passWord"]; if (userName = "quwenzhe" & userPass = "123") {context. response. write ("OK"); // If the verification is successful, Return OK} else {context. response. write ("fail"); // If the verification fails, return fail} context. response. end () ;}public bool IsReusable {get {return false ;}}}}

Code execution process: When you click OK, The CheckLogin function is triggered. CheckLogin uploads the obtained data to the Extjs General handler for verification and obtains the return value of the Extjs General handler. If the returned value is OK, call the loginSuccess function to bring up a new form. Otherwise, the logon Failure prompt is displayed.

After running the code, the logon page is as follows:

After successful logon, the following information is displayed:

At this point, the login function implemented by Extjs has been completed. In addition, I found that I had some questions during my learning. I just learned a little and thought I understood it. I hope everyone can take the lessons and never make the same mistake.

Ext is a good framework. Learning it can help us learn DWZ to a large extent. I hope you can learn it with your heart.