简单的ExtJS与后台代码交互的例子-登陆

yelinqing

浏览: 109531 次
性别:
来自: 广州

最近访客更多访客>>

lonelythinker

zt903060249

wzh592154998

09052319

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

EXT CSS Linq UI Web

第一个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: "密&nbsp;&nbsp;&nbsp;码" }
             ]
        });
                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返回的东西会比较干净，没有冗余信息。

分享到：

编译tuxedo config文件需要注意的地方 | 牛人出的面试题（摘自论坛）之我所感

2010-02-07 02:58
浏览 5907
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论