extjs 简单登陆

这种年代。。不会extjs真的很郁闷。。在google里找了找。。很多人都用extjs做了一个登陆。。

所以咱也做也个吧。。废话不多说。。现在咱也来做一个吧。。。

首先。。。下载extjs资源包。。加载到项目中。。

然后。。。新建aspx页面。。extjsTest.aspx

在extjsTest.aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="extjsTest.aspx.cs" Inherits="Maticsoft.Web.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 runat="server">
    <title>extjstest</title>
    <link rel=stylesheet type="text/css" href="ExtJS/resources/css/ext-all.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>

       <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 },
                    {xytpe:"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:"WebForm1.aspx",
             method:'GET',
             params: { ParamValue: "1", ParamUserName: UserName, ParamPassword: Password }, 
             success: function(response, option) {
             var obj = Ext.util.JSON.decode(response.responseText);
             if(obj.success==true)
                {
                        Ext.MessageBox.alert('信息',obj.msg);
                }
             else
                {
                        Ext.Msg.alert("信息","出错啦！！");
                }
              },
               failure: function() {
                    Ext.Msg.alert("信息", "登陆失败！！");
              }          
        });
        }
       }
         Ext.onReady(LoginDemo); 
       </script>
    </div>
    </form>
</body>
</html>

新建WebForm1.aspx页面：

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 System.Data.SqlClient;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string ParamValue = Request.QueryString["ParamValue"];

            if (ParamValue == "1")
            {
                string UserName = Request.QueryString["ParamUserName"];
                string Password = Request.QueryString["ParamPassword"];
                SqlConnection conn = new SqlConnection();
                conn.ConnectionString = "Data Source=.;Initial Catalog=TestDB;Integrated Security=True";
                if (conn.State == ConnectionState.Closed)
                    conn.Open();
                SqlCommand cmd = new SqlCommand();
                cmd.Connection = conn;
                cmd.CommandText = string.Format("select User_ID from Users where User_Name = '{0}' and User_Password = '{1}'", UserName, Password);
                object obj = cmd.ExecuteScalar();
                if (obj != null)
                {
                    if (Convert.ToString(obj) != "")
                    {
                        Response.Write("{success:true,msg:'登陆成功！'}");
                    }
                    else
                    {
                        Response.Write("{success:false}");
                    }
                }
                else
                {
                    Response.Write("{success:false}");
                }
                if (conn.State == ConnectionState.Open)
                    conn.Close();
                Response.End();
            }
        }
    }
}

比较简单。。但啥说都是咱的第一次哈！！！继续努力中。。。。！！！！

posted @ 2011-03-14 16:33 CarlyChen 阅读(625) 评论(0) 收藏举报

刷新页面返回顶部

extjs 简单登陆

公告