Ext与.NET超完美整合 .NET开发者的超级优势
回顾学习EXT的过程,自己一直从事.NET快速开发(不喜欢JAVA平台比较乱的Jar包,版本控制力太差)。EXT虽然是纯UI东东,但似乎跟JAVA一直有着亲蜜的关系,找的所有成型点的例子中,跟JAVA的居多,用WebService和ASP的都非常不适用,Ext的界面设计非常方便,但通信起来,只有用JSON或XML等中间件来传递,存在解译成本和传递成本,WebService即要花N多安全功夫,效率也很低,加上用LINQ镜像延时,用.net来做EXT实在很痛苦,跟ASPX淘汰的刷新机制无太大差别。今天我就是来解放大家的
我喜欢EXT,终于想到了一个超完美的整合
1。VS2008支持JS单步调试,可设断点调试JS,(不用代码提示,可以提高自己的熟练度,自己看看要不要在VS2008里面加代码提示的JS文件吧)
2。母版将所有JS调用全定义好
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Ext2Empty.master.cs" Inherits="tmksoft.Web.Ext2Empty" %>
<html>
<head runat="server">
<title>TMKSOFT CRM V2.0</title>
<script type="text/javascript">
var BaseUrl = "<%=BaseUrl%>";
</script>
<meta http-equiv="Content-Type" c/>
<link rel="stylesheet" type="text/css" href="../Javascript/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=BaseUrl%>Javascript/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=BaseUrl%>Javascript/ext/ext-all.js"></script>
<script type="text/javascript"src="<%=BaseUrl%>Javascript/ext/build/locale/ext-lang-zh_CN.js"></script>
<%-- <script type="text/javascript">
Ext.util.CSS.swapStyleSheet("theme", "<%=BaseUrl%>App_Themes/slate/css/skin.css");
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentMainWorkSpace" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
3。所有网页继承母版,后台类直接写C#方法即可,爱怎么写就怎么样。
Ajax类的通信取代,如下代码
[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public bool UserCheck(string name,string pass)
{
if (name.Equals("aa") && pass.Equals("aa"))
{
return true;
Session["Uname"] = name;
Session["Upass"] = pass;
}
else
{
return false;
}
}
4。前台JS-AJAX直接调用服务器方法
//现在只需直接调用类.方法,就行了,效率测试非常不错,页面无刷新,所见即所得,太爽了吧!!
var login = function(){
var c=Login.UserCheck(document.getElementById('Uname').value,document.getElementById('Upass').value);
if(c.value==true)
{
alert('通过');
}
else{
alert('不通过');
}
var ck=Login.SessionCheck();
if(ck.value){alert('已登陆')}else{alert('未登陆');}
//原来的EXT实现很麻烦,需要按下面的步骤来
// // 执行当前表单面板的submit
// f.form.submit({
// // 动作发生期间显示的文本信息
// waitMsg : '正在登录......',
// // submit发生时指向的地址
// url : 'http://localhost:2020/Service1.asmx/UserLogin',
// // 表单提交方式
// method : 'POST',
// // 数据验证通过时发生的动作
// success : function(form, action){
// window.location.href = 'index.htm';
// },
// // 反之......
// failure : function(form, action){
// reset();
// if (action.failureType == Ext.form.Action.SERVER_INVALID)
// Ext.MessageBox.alert('警告', action.result.errors.msg);
// }
// });
EXT超完美整合终于完成了,只须3分钟你就能快速用Xtype画出界面(因为有代码提示和单步调试),只须3分钟你就能快速完成数据库增删查改的代码(因为微软C#帮我们做了太多),只须3分钟你就能把前台和后台联结起来(即是独立的UI-JS界面,又是独立的业务逻辑层)
我喜欢EXT,终于想到了一个超完美的整合
1。VS2008支持JS单步调试,可设断点调试JS,(不用代码提示,可以提高自己的熟练度,自己看看要不要在VS2008里面加代码提示的JS文件吧)
2。母版将所有JS调用全定义好
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Ext2Empty.master.cs" Inherits="tmksoft.Web.Ext2Empty" %>
<html>
<head runat="server">
<title>TMKSOFT CRM V2.0</title>
<script type="text/javascript">
var BaseUrl = "<%=BaseUrl%>";
</script>
<meta http-equiv="Content-Type" c/>
<link rel="stylesheet" type="text/css" href="../Javascript/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=BaseUrl%>Javascript/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=BaseUrl%>Javascript/ext/ext-all.js"></script>
<script type="text/javascript"src="<%=BaseUrl%>Javascript/ext/build/locale/ext-lang-zh_CN.js"></script>
<%-- <script type="text/javascript">
Ext.util.CSS.swapStyleSheet("theme", "<%=BaseUrl%>App_Themes/slate/css/skin.css");
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentMainWorkSpace" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
3。所有网页继承母版,后台类直接写C#方法即可,爱怎么写就怎么样。
Ajax类的通信取代,如下代码
[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public bool UserCheck(string name,string pass)
{
if (name.Equals("aa") && pass.Equals("aa"))
{
return true;
Session["Uname"] = name;
Session["Upass"] = pass;
}
else
{
return false;
}
}
4。前台JS-AJAX直接调用服务器方法
//现在只需直接调用类.方法,就行了,效率测试非常不错,页面无刷新,所见即所得,太爽了吧!!
var login = function(){
var c=Login.UserCheck(document.getElementById('Uname').value,document.getElementById('Upass').value);
if(c.value==true)
{
alert('通过');
}
else{
alert('不通过');
}
var ck=Login.SessionCheck();
if(ck.value){alert('已登陆')}else{alert('未登陆');}
//原来的EXT实现很麻烦,需要按下面的步骤来
// // 执行当前表单面板的submit
// f.form.submit({
// // 动作发生期间显示的文本信息
// waitMsg : '正在登录......',
// // submit发生时指向的地址
// url : 'http://localhost:2020/Service1.asmx/UserLogin',
// // 表单提交方式
// method : 'POST',
// // 数据验证通过时发生的动作
// success : function(form, action){
// window.location.href = 'index.htm';
// },
// // 反之......
// failure : function(form, action){
// reset();
// if (action.failureType == Ext.form.Action.SERVER_INVALID)
// Ext.MessageBox.alert('警告', action.result.errors.msg);
// }
// });
EXT超完美整合终于完成了,只须3分钟你就能快速用Xtype画出界面(因为有代码提示和单步调试),只须3分钟你就能快速完成数据库增删查改的代码(因为微软C#帮我们做了太多),只须3分钟你就能把前台和后台联结起来(即是独立的UI-JS界面,又是独立的业务逻辑层)