环境 VS2010 +Ext.Direct+ExtJs4.0.2
1、 首先我们创建ASP.Net webApplication(dotNet FX4.0),
2、 从官方下载ExtJs4.0.2,将下载源码解压到上边所创建的项目目录中
3、 下载Ext.Direct源码,将下载源码解压后,找到Ext.Direct/ExtDirectSample/ExtDirectSample/ext,将Ext文件夹复制到到上边所创建的项目目录中
4、 然后修改Masterpage内容,如下
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<%-- <link href="ext-4.0.2-commercial/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.2-commercial/ext-all-debug.js" type="text/javascript"></script>--%>
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="ext/ext-all-debug.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
红色部分为使用ExtJs4.0.2时的文件调用,紫色为使用Ext.Direct源码中示例时文件的调用
5、 添加对/Ext.Direct/Ext.Direct/bin/Release文件夹中Ext.Direct.dll和Newtonsoft.Json.dll的引用
6、 创建DirectHandle
创建DirectHandles文件夹,然后在此文件夹中添加新项—Generic handler,输入UsersHandler,代码如下
namespace ExtNetWeb.DirectHandlers
{
/// <summary>
/// 在js中调用此Handler,必须标DirectAction Attribute
/// Js 中调用时使用
/// 比如: Justin.myUser.HelloWord(....),
/// </summary>
[DirectAction("myUser")]
public class UsersHandler : DirectHandler
{
/// <summary>
/// Ext.Direct.addProvider(provider),provider便是此处返回的值,两个值必须一致
/// 比如此处应是:Ext.Direct.addProvider(Justin.Users.UsersHandler);
/// </summary>
public override string ProviderName
{
get { return "Justin.Users.UsersHandler"; }
}
/// <summary>
/// Js 中调用时使用
/// 比如: Justin.myUser.HelloWord(....),
/// </summary>
public override string Namespace
{
get
{
return "Justin";
}
}
/// <summary>
/// Js 中调用时使用
/// 比如: Justin.myUser.HelloWord(....),
/// </summary>
/// <returns></returns>
[DirectMethod("HelloWord")]
public string GetGreeting()
{
return "Hello World!";
}
}
}
7、 添加Userlist.aspx文件,使用模板页。修改内容
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="DirectHandlers/UsersHandler.ashx" type="text/javascript"></script>
<script type="text/javascript">
var x = 1;
//此时在Js中监控变量Justin,会发现Justin已经被赋值,赋值位于 <script src=DirectHandlers/UsersHandler.ashx type=text/javascript/>
//在此注册 provider ,注:Justin.Users.UsersHandler即UsersHandler.ashx 的ProviderName
Ext.Direct.addProvider(Justin.Users.UsersHandler);
Ext.onReady(function () {
//在此调用UsersHandler.ashx的方法,格式:Namespace+DirectAction aliasName+DirectMethod aliasName
Justin.myUser.HelloWord(function (data, trans) {
alert(data);
});
}); </script>
</asp:Content>
8、 调试,查看结果
9、 注意点:若是修改过handler的名字,则注意修改后,调用是否正确,比如
第一步:我们重命名了UsersHandler.ashx为UserHandler.ashx,然后修改UserList.aspx中的调用文件名字
<script src="DirectHandlers/UserHandler.ashx" type="text/javascript"></script>
调试发现成功弹出helloWord.
第二步:若我们也修改了UserHandler.ashx中的类名为UsersHandler,调试发现,出错,Justin Undifined
因为我们忘了修改<%@ WebHandler Language="C#" CodeBehind="UserHandler.ashx.cs" Class="ExtNetWeb.DirectHandlers.UsersHandler" %>
中对类的引用,修改后,重新调试,结果如下(调试起来后,重新刷新一下),