使用DirectMethods在JS中调用C#方法
我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法。
来看一个例子吧:
[DirectMethod]
public void AddToServerTime(int hours)
{
var date = DateTime.Now.Add(new TimeSpan(hours, 0, 0));
this.myLabel.Text = date.ToString();
}
这是一个aspx页面中的服务器端方法,为了能够在JS中来调用,必须添加DirectMethod特性。
接下来让我们看看JS调用:
<script type="text/javascript">
function fnUpdate() {
App.direct.AddToServerTime(3);
}
</script>
就是这句话,它被定义在命名空间App.direct下,当然,这个命名空间是可以修改的,我会在接下来告诉你怎么修改。
然后添加一个按钮,在点击按钮的时候来执行fnUpdate方法。
<ext:Window runat="server" ID="win1" Width="300" Height="200" Title="DirectMethods">
<Items>
<ext:Label runat="server" ID="myLabel"></ext:Label>
</Items>
<Buttons>
<ext:Button runat="server" ID="btnUpdate" Text="更新" Handler="fnUpdate()"></ext:Button>
</Buttons>
</ext:Window>
我们这里使用的是Ext.Net按钮,你还可以使用Asp.Net按钮,或者是Html按钮,不再细说。
然后我们编译代码,刷新页面,点击这个按钮吧,你会看到window中的显示:
设置DirectMethods的命名空间
默认情况下,DirectMethods的命名空间是App.direct,我们可以通过N中方法来改变这个默认的命名空间:
在Ext.Net全局配置中更改
<extnet theme="Neptune"
directMethodNamespace="MyApp.DirectMethods
" />
这种更改方式是在web.config中完成的,如果你不知道怎么在web.config中添加extnet配置节点,那么你肯定是没有看我的第一篇笔记,去看看吧>>在ASP.NET WebForm中使用Ext.Net
这种更改方式将对所有页面有效。
在Ext.Net ResourceManager配置中更改
<ext:ResourceManager runat="server"
DirectMethodNamespace="MyApp.DirectMethods">
</ext:ResourceManager>
这种更改方式是在页面中完成的,它只对当前页面有效,当然了,它肯定是要覆盖全局的设置的。
在DirectMethod特性构造函数中更改
这是最后一种设置方式,它更加灵活,它可以更改某一个方法的命名空间。
[DirectMethod(Namespace = "MyApp.DirectMethods"
)]
public void AddToServerTime(int hours)
{
var date = DateTime.Now.Add(new TimeSpan(hours, 0, 0));
this.myLabel.Text = date.ToString();
}
这种方法只对设置的方法有用,它将会覆盖页面和全局的配置。
添加回调方法
前面提到过,Ext.Net DirectMethods和DirectEvents类似,都是通过JS实现的异步调用,因此,如果要处理服务器端的执行结构,就必须在JS中添加相应的回调方法。
function fnUpdate() {
MyApp.DirectMethods.AddToServerTime(5, {
success: onSuccess,
failure: onFailure,
eventMask: { showMask: true }
});
} function onSuccess() {
alert("成功");
} function onFailure() {
alert("失败");
}
在这段代码中,我们在调用DirectMethod方法的时候添加了一些配置,包括执行成功和失败的回调方法,以及来显示一个遮罩层。
同步执行服务器端方法
一般情况下我们都是采用异步的方式来执行服务器端的方法,这样能够获得更好的用户体验,当然,如果你有怪癖,希望能够通过同步的方式来执行服务器端方法,Ext.Net DirectMethods也是支持的。
[DirectMethod(Namespace = "MyApp.DirectMethods", Async = false)]
public void AddToServerTime(int hours)
{
string text = this.btnUpdate.Text;
var date = DateTime.Now.Add(new TimeSpan(hours, 0, 0));
this.myLabel.Text = text + date.ToString();
}
很简单的一个设置,在DirectMethod构造函数中配置一下就可以了。
郑重的提醒,尽量少用同步的请求,这样会造成浏览器假死的现象,至于什么是浏览器假死,你去试试抢一下春运时候的火车票就知道了(这里说的是 2014年春运的火车票,今天是2014年1月16日,目前12306的验证码校验用的就是同步请求,不知道有多少同学被卡死在校验验证码的路上……)
提升性能:调用静态方法
先来说说非静态方法,在执行非静态方法的时候,Ext.Net会提交更多的数据,使我们可以访问页面中的控件这在处理页面相关内容时候非常有用,但是当我们只是想去执行一个处理过程,而与页面无关的时候,我们就可以通过执行静态方法来提升性能。
在静态方法中,我们不能访问页面的Form数据,不能直接访问Request、Response等数据(可以通过HttpContext.Current来访问),好处是在请求的时候,Ext.Net不会将页面数据提交给服务器,大大减少了数据传输和服务器执行的时间。
[DirectMethod(Namespace = "MyApp.DirectMethods")]
public static string AddToServerTime(int hours)
{
var date = DateTime.Now.Add(new TimeSpan(hours, 0, 0));
return date.ToString();
}
这是我们刚才的方法,现在把它改成了静态方法。JS的调用基本没有改变,只不过我们需要在JS中来更新控件的显示了。
function fnUpdate() {
MyApp.DirectMethods.AddToServerTime(5, {
success: onSuccess,
failure: onFailure,
eventMask: { showMask: true }
});
} function onSuccess(result) {
App.myLabel.setText(result);
}
我们需要对onSuccess回调方法进行修改,在它接收到执行结果之后更新界面显示。
Ext.net.DirectMethod.request调用WebService
DirectMethods不能直接访问WebService,但可以通过Ext.net.DirectMethod.request来请求WebService,实现类似于页面后台方法的效果。
var showRelativeServerTime = function () {
Ext.net.DirectMethod.request({
url: "EchoService.asmx/Echo",
cleanRequest: true,
params: {
something: "Hello world!"
},
success: function (result) {
alert(Ext.DomQuery.selectValue("string", result, ""));
}
});
}
这是方法的调用过程,不再演示了。
附加说明:这种方法受用于一切WebService、一般处理程序、MVC等通过url访问的东东,非常好用。
异常处理
这是一个大问题,一般情况下,如果你想偷懒,Ext.Net默认已经帮我们进行了异常处理。当然,如果你想更友好的给用户进行提示,那就来手动处理吧。
[DirectMethod]
public static int Divide(int number1, int number2)
{
if (number2 == 0)
{
ResourceManager.AjaxSuccess = false;
ResourceManager.AjaxErrorMessage = "number2 can't be zero!";
return 0;
}
return number1 / number2;
}
这样一来,我们手动的判断是否执行成功。当然,你还可以这样写:
[DirectMethod]
public static void DoSomething()
{
try
{
// call through to your business logic layer
}
catch (Exception e)
{
ResourceManager.AjaxSuccess = false
;
ResourceManager.AjaxErrorMessage = GetFriendlyMessage(e);
// Do any logging and other operations here
}
}