第一个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返回的东西会比较干净,没有冗余信息。
分享到:
相关推荐
医疗病历交互系统-医疗病历交互系统的设计与实现代码-java-springboot-基于springboot的医疗病历交互系统项目-代码-源码-项目-系统-毕设-网站 1、技术栈:java,springboot,vue,ajax,maven,mysql,MyBatisPlus等 ...
医疗病历交互-医疗病历交互系统-医疗病历交互系统源码-医疗病历交互管理系统-医疗病历交互管理系统java代码-医疗病历交互系统设计与实现-基于springboot的医疗病历交互系统-基于Web的医疗病历交互系统设计与实现-...
医疗病历交互-医疗病历交互系统-医疗病历交互系统源码-医疗病历交互管理系统-医疗病历交互管理系统java代码-医疗病历交互系统设计与实现-基于springboot的医疗病历交互系统-基于Web的医疗病历交互系统设计与实现-...
用户管理是与后台的servlet进行交互的,包括增删改查
由于最近本人在学习extjs,所以做了一个简单的extjs和后台交互的例子,和大家分享一下,因为本人积分不多,所以要点积分哈。
Extjs和后台数据库交互的程序,增删改查(终极版),个人测试过,直接导入myeclipse,然后启动tomcat即可运行,增删改查都实现了,可成功运行。 如有问题,可联系我,一起解决。
Extjs和数据库交互,增删改查Extjs和数据库交互,增删改查(修改测试通过)
医疗病历交互系统的设计与实现代码-java-springboot-基于springboot的医疗病历交互系统项目-代码-源码-项目-系统-毕设-网站 1、技术栈:java,springboot,vue,ajax,maven,mysql,MyBatisPlus等 2、系统的实现 ...
extjs和数据库的后天交互,好好的学习中,。。。。。。。
extjs和servlet数据交互的例子,对初次接触这方面的学习很有帮助
ext精髓,Extjs如何与数据库交互,可以很快的叫你EXT一些知识
部网络货运信息交互系统代码集 - 2020-09-21.pdf
Jquery例子,前后台交互,验证,图片热点,等实用的js代码,直接用meyeclipse运行就可以
DWR与后台异步交互简单例子,两个JAR包,配置文件dwr.xml/web.xml
websocket前端页面与后台交互的例子,解压文件后,用idea导入项目,启动WebsocketServer类,接着用浏览器打开websocket.html页面,会看到建立连接,然后在发送框输入{"id":"1","type":"yes"},返回666,输入其他信息...
Jquery与后台的交互方式