第一个ExtJS程序,用了整整一个晚上才把程序调通,事实证明还是自己太菜,之前写好的三层代码原来还是有很多错误,kingcat说的没错,程序员要对自己的代码负责,明显我还是没有这一点,kingcat还有地方值得我去学习。
方便有需要的朋友,我把个人前端代码及后台cs代码全部粘贴出来,希望对初学者有用,少走像我这么SB的路线,用更多的时间去钻研更有深度的知识。
Default.aspx页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>动态生成GridPanel</title> <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" /> <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-gray.css" /> <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ExtJS/ext-all.js"></script> </head> <body> <form id="form1" runat="server"> <div> <div id="btnShow" style="text-align: center; padding-top: 300px; vertical-align: middle;"> </div> <script type="text/javascript"> function LoginDemo() { //登陆窗体 var loginPanel = new Ext.form.FormPanel ({ id: "loginPanel", labelPad: 0, labelWidth: 40, frame: true, items: [ { xtype: "field", id: "UserName", fieldLabel: "用户名" }, { xtype: "field", id: "Password", fieldLabel: "密 码" } ] }); var loginWindow; if (!loginWindow) { loginWindow = new Ext.Window ({ id: "loginWindow", title: "登陆窗口", width: 200, height: 127, resizable: false, closable: false, items: [ loginPanel ], buttons: [ { xtype: "button", text: "确定", handler: validatorData }, { xtype: "button", text: "取消", handler: function() { loginWindow.hide(); } } ] }); } loginWindow.show(); document.body.onkeydown = function() { loginWindow.show(); }; //连接数据库 function validatorData() { var UserName = Ext.getCmp("UserName").getValue(); var Password = Ext.getCmp("Password").getValue(); if (Ext.util.Format.trim(UserName) == "" || Ext.util.Format.trim(Password) == "") { Ext.Msg.alert("警告", "请正确输入数据,用户名和密码都不能够为空!"); return; } Ext.Ajax.request ({ url: "ValidatorData.aspx", //请求的地址 params: { ParamValue: "1", ParamUserName: UserName, ParamPassword: Password }, //发送的参数 success: function(response, option) { var obj = Ext.util.JSON.decode(response.responseText); //返回的信息 if (obj.success == true) { Ext.Msg.alert("好消息", "好消息:你登陆成功了!"); //清除输入框 Ext.getCmp("UserName").setValue(""); Ext.getCmp("Password").setValue(""); loginWindow.hide(); } else { Ext.Msg.alert("坏消息", "坏消息:你登陆失败了!"); } }, failure: function() { Ext.Msg.alert("坏消息", "坏消息:你登陆出现异常了!"); } }); } //显示登陆窗口 var btnShow = new Ext.Button ({ renderTo: "btnShow", text: "显示登陆窗口", handler: function() { loginWindow.show(); } }); } Ext.onReady(LoginDemo); </script> </div> </form> </body> </html>
ValidatorData.cs后台代码
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using BLL; using Model; using System.Collections.Generic; public partial class ValidatorData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string ParamValue = Request["ParamValue"]; if (ParamValue == "1") { string UserName = Request["ParamUserName"]; string Password = Request["ParamPassword"]; #region 连接数据库 User u = new User(); u.Username =UserName; u.Password = Password; UserManager um = new UserManager(); if (um.IsUser(u)==true) { Response.Write("{success:true}"); } else { Response.Write("{success:false}"); } #endregion } } }
Default.aspx是前端页面,所有的ExtJS都在页面,ValidatorData.aspx.cs是ValidatorData.aspx的后置代码,用于执行 Default.aspx页面的功能,值得注意的是ValidatorData.aspx页面代码只需保留第一句:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidatorData.aspx.cs" Inherits="ValidatorData" %> ,其余删掉就可以了。当然你也可以直接写一般的处理程序ashx来代替ValidatorData.aspx,据说ashx返回的东西会比较干净,没有冗余信息。