Asp.Net+Extjs实现登录
通过对Ext的学习，发现学习分三部曲：1.看官网的Demo，宏观了解Ext能做什么；2.看相关书籍，做理论指导；3.实现官网的Demo，体会Ext的真谛。
在完毕了第一、二部后，如今我们须要做的是实现第三步，我的目标效果是用Extjs画页面，用Asp.Net的一般处理程序做后台server实现登录功能。
宏观上的指导有了，以下进行细分，我整理了实现过程，思路例如以下：
1.画一个登录的Panel--loginPanel；
2.定义一个检測是否登录成功的函数CheckLogin；
3.定义一个登录窗口--win，将loginPanel加入到登录窗口中；
4.在登录窗口中加入“确定”和“取消”，为“确定”button绑定登录验证函数CheckLogin；
5.为登录窗口绑定一个最小化事件；
6.定义一个登录成功弹出新窗口函数loginSuccess
有了理论指导，以下进行代码实现：
<!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>
<title></title>
<link href="css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="js/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.画一个登录的Panel
loginPanel = new Ext.form.FormPanel({
labelWidth: 40,
width: 230,
height: 120,
frame: true,
bodyStyle: "padding:20", //给这个面板加入内间距
items: [
{ xtype: "textfield", id: "userName", fieldLabel: "username", style: "margin:1 3 15 3", labelWidth: 10, emptyText: "请输入username...", allowBlank: false, blankText: "username不能为空" },
{ xtype: "textfield", id: "userPass", fieldLabel: "密 码", style: "margin:1 3 15 3", labelWidth: 10, inputType: "password" }
]
}); //2.定义一个检測是否登录成功的函数CheckLogin
function CheckLogin() {
var userName = Ext.getCmp("userName").getValue(); //username
var userPass = Ext.getCmp("userPass").getValue(); //密 码 if (Ext.util.Format.trim(userName) == "" || Ext.util.Format.trim(userPass) == "") {//username和password不能为空
Ext.Msg.alert("提示", "username或password不能为空");
return;
} Ext.Ajax.request({
url: "Extjs.ashx?userName=" + userName + "&passWord=" + userPass, //将username和password传送到url
method: "get",
success: function (response) {
var getData = response.responseText; //获取服务器数据
if (getData == "ok") {
loginSuccess(); //登录成功了
} else {
Ext.Msg.alert("警告", "登录失败！");
}
}, failure: function (response, options) { alert("失败"); }
});
} //3.定义一个登录窗口--win，将loginPanel加入到登录窗口中；
var win = new Ext.Window({
title: "登录窗口",
minimizable: true, //最小化
maximizable: true, //最大化
width: 240,
height: 186,
frame: true,
items: [loginPanel],
//4.在登录窗口中加入“确定”和“取消”，为“确定”按钮绑定登录验证函数CheckLogin
buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}]
}); //5.为登录窗口绑定一个最小化事件
win.minimize = function () {
Ext.MessageBox.confirm("提示", "是否要最小化", minwindow);
function minwindow(btn) {
if (btn == "yes") {
Ext.Msg.alert("提示", "确定最小化么", function () { alert("成功最小化"); });
}
}
} //6.定义一个登录成功弹出新窗口函数loginSuccess；
function loginSuccess() {
var winLoginSuccess = new Ext.Window({
title: "登录成功后的窗口",
minimizable: true, //最小化
maximizable: true, //最大化
collapsible: true,
width: 550,
height: 550,
frame: true,
items: [{ xtype: "button", frame: true, text: "我是登录成功后窗口的一个按钮"}]
});
win.hide(); //登录窗口隐藏
winLoginSuccess.show(); //显示登录成功后的窗口
} win.show(); //显示窗口
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
后台Extjs一般处理程序的代码实现：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace Demo
{
/// <summary>
/// Extjs 的摘要说明
/// </summary>
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"); //假设验证成功则返回ok
}
else
{
context.Response.Write("fail");//假设验证失败则返回fail
}
context.Response.End(); } public bool IsReusable
{
get
{
return false;
}
}
}
}
代码的运行过程：当点击确定button后，会触发CheckLogin函数，CheckLogin通过Ajax将获取的数据传到Extjs一般处理程序进行检验，并获取Extjs一般处理程序的返回值。假设返回值是ok，则调用loginSuccess函数弹出新窗口；否则，则弹出登录失败的提示。
执行代码后，登录页面效果图例如以下：
登录成功后的效果图例如以下：
到此，用Extjs实现的登录功能已经完毕。此外， 在学习过程中，发现自己存在浅尝辄止的问题，刚学会一点就以为自己明确了，希望大家能引以为戒，不要犯相同的错误。
Ext是个非常好的框架，学好它在非常大程度上能帮助我们学习DWZ，希望大家能用心学习这块。
Asp.Net+Extjs实现登录的更多相关文章
- ASP.NET MVC 用户登录Login
ASP.NET MVC 用户登录Login一.先来看个框架例子:(这个是网上收集到的) 第一步:创建一个类库ClassLibrary831. 第二步:编写一个类实现IHttpM ...
- 教你开发asp.net的单点登录系统
单点登录系统,简称SSO.以下是我花了几个小时写的一个简单实现.特把实现思路和大家分享. 背景:某项目使用ASP.NET MemberShip来做会员系统,需要同时登录多个系统.而项目的开发人员无法在 ...
- ASP.NET会员注册登录模块(MD5加密,Parameters防止SQL注入,判断是否注册)
MD5加密,Parameters防止SQL注入: protected void btnLog_Click(object sender, EventArgs e) { //获取验 ...
- asp.net web 开发登录相关操作的控件LoginName、LoginStatus和LoginView控件使用详解
http://book.51cto.com/art/200909/154039.htm http://book.51cto.com/art/200909/154041.htm ASP.NET提供了一套 ...
- 解決 IE10 浏览器无法使用 ASP.NET From 验证登录的问题
最近应项目用到ASP.Net表单验证机制(FormsAuthentication),来判断用户是否已经登录,一切测试顺利,最后发布到IIS中后在IE10测试是发现始终判断用户没登录(其他浏览器一切正常 ...
- ASP.NET5使用FaceBook登录
原版教程 使用VS2015创建Web应用: 此教程使用的是FaceBook账号登录,需要添加相关的类,打开Nuget: 搜索Microsoft.AspNet.Authentication.Facebo ...
- asp.net 完善注册登录+sqlite数据库
结合sqlite数据库,完善asp.net制作的web网页中的注册和登录操作. 1. Account-Register.aspx <%@ Page Title="" Lang ...
- ASP.NET Cookie的登录验证
做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...
- ASP.NET MVC4 Forms 登录验证
Web.config配置: 在<system.web>节下: <authentication mode="Forms"> <forms loginUr ...
随机推荐
- Delphi 使用串口模拟工具进行串口程序开发调试
版权声明:本文为博主原创文章,如需转载请注明出处及作者. 本文由小李专栏原创,转载需注明出处:[http://blog.csdn.net/softwave/article/details/8907 ...
- 微信多媒体上传图片，创建卡券上传 LOGO
//*****************************************多媒体上传图片 begin******************************************** ...
- 标准Web系统的架构分层[转]
标准Web系统的架构分层 – 转载请注明出处 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求 ...
- 关于CodeBlocks中stdc++-6.dll缺失的小问题
前一阵子在用CodeBlocks刷OJ(也并不是什么很难的算法,背包问题而已)时,遇到了个小麻烦,按下F9编译运行(有的人习惯用鼠标去点那个小button,多麻烦啊)后,Windows给我跳出个小窗说 ...
- ado.net(class0503)
ado.net组成 数据提供程序 connection //连接对象 command executeNonQuery //执行增删改 executeScalar //执行查询返回首行首列 execut ...
- 将“Cocos2dx-截屏并设置图片尺寸 ”中cocos2d-x代码转换为2.2的代码
Cocos2dx-截屏并设置图片尺寸: http://www.cocos2dev.com/?p=522 2.2 代码如下: void HelloWorld::screenShoot() { CCSiz ...
- 现代程序设计 homework-07
现代程序设计 homework-07 这次作业是要阅读C++11的新特性,按照老师blog提供的链接稍微学习了一下,一下就是一些学习总结(或者说就是介绍)之类的:由于英文能力有限,并且很多中文资料也都 ...
- work7
uno. 理解C++变量的作用域和生命周期 没有要求讲解我就简单注释了一下~ #include <iostream>int main(){ for (int i=0;i<10;i++ ...
- 查看解决Oracle对象锁住的问题
在编译的一个存储过程的时候,对象可能由于被锁住而处于假的卡死状态,这个时候有的是因为,这个过程正在运行中,所以无法编译: 上次我遇到一次,我很清楚的确定这个过程没有运行,可以我就是无法编译,对象一直被 ...
- POJ 1751 Highways （最小生成树）
Highways 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/G Description The island nation ...