上一篇中介绍了Ext.Net DirectEvents的详细使用方法,包括传递和接收参数、显示遮罩层、进行提示等。
Ext.Net DirectEvents除了能够在Ext.Net中很方便的使用之外,还可以结合Asp.Net控件、HTML控件进行使用,今天要补充的就是这方面的内容。
我们在ASP.NET中实现无刷新的页面请求的时候,通常会用到UpdatePanel,现在Ext.Net为我们提供了另外一种渠道:通过DirectEvents来实现无刷新的页面请求。
<asp:Label runat="server">名称</asp:Label> <asp:TextBox runat="server" ID="txtName" /> <asp:Button runat="server" ID="btnOK" Text="确定" />
首先,我在页面放上一个文本框和按钮,当我们点击确定按钮的时候,希望在后台能够取到文本框的值。
接下来才是见证奇迹的时刻:
<ext:ResourceManager runat="server"> <CustomDirectEvents> <
ext:DirectEvent Target
="btnOK" OnEvent="btnOK_DirectClick"> </
ext:DirectEvent
> </CustomDirectEvents> </ext:ResourceManager>
我们来配置一个DirectEvent,通过这个DirectEvent来执行服务器端的事件方法,我们来看看服务器端的代码:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e) { string name = this.txtName.Text; X.MessageBox.Alert("提示", "按钮被点击,输入框的值为:" + name).Show(); }
通过这段代码,我们会取到文本框输入的值,并在客户端弹出一个提示框,并且这个过程是无刷新的。效果如图:
ASP.NET控件可以用,HTML控件同样可以使用DirectEvents(真的是万能哦)。来看看如何在HTML按钮中使用DirectEvents吧,为了演示,我在页面中添加一个HTML按钮:
<input type="button" value="HTML按钮" id="htmlBtn" />
然后再ResourceManager节点中配置:
<ext:ResourceManager runat="server"> <CustomDirectEvents> <ext:DirectEvent Target="htmlBtn" OnEvent="btnOK_DirectClick"> </ext:DirectEvent> </CustomDirectEvents> </ext:ResourceManager>
这样就完成了。当我们点击这个HTML按钮的时候,你会看到和上面一样的效果。
DirectEvents除了可以异步执行页面中的事件,还可以远程调用WebService。
[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 // [System.Web.Script.Services.ScriptService] public class ExtNetService : System.Web.Services.WebService { [WebMethod] public DirectResponse GetServerTimeWindow() { new Window("Server time", Icon.Time) { ID = "MyWindow", Html = DateTime.Now.ToString() }.Render(); return new DirectResponse(); } }
这是我们定义的Service程序,然后来配置DirectEvents:
<ext:ResourceManager runat="server"> <CustomDirectEvents> <ext:DirectEvent Target="htmlBtn" Url="ExtNetService.asmx/GetServerTimeWindow" Method="POST" Type="Load"> </ext:DirectEvent> </CustomDirectEvents> </ext:ResourceManager>
然后点击htmlBtn按钮,这个时候会打开一个来自服务器端的小窗口:
注意这个例子,如果你去跟踪一下请求过程,你会发现这里其实是远程的调用了这个WebService,这里和一般的URL请求是一样的,因此DirectEvents一样可以调用一般处理程序(.ashx)
既然可以远程调用一个WebService,那么远程调用一个一般处理程序肯定是没有问题的。
首先来看看一般处理程序的代码:
public class ServerTimeHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { new Window("Server time", Icon.Time) { ID = "MyWindow", Html = DateTime.Now.ToString() }.Render(); new DirectResponse().Return(); } public bool IsReusable { get { return false; } } }
然后,我们修改一下DirectEvents配置,将刚才的WebService链接调整一下,其他的不动:
<ext:ResourceManager runat="server"> <CustomDirectEvents> <ext:DirectEvent Target="htmlBtn" Url="ServerTimeHandler.ashx" Method="POST" Type="Load"> </ext:DirectEvent> </CustomDirectEvents> </ext:ResourceManager>
运行程序以后,你会看到与调用WebService一样的效果。
刚才在演示调用WebService和一般处理程序的时候,已经看到了如何生成Ext.Net控件,再看一下代码:
new Window("Server time", Icon.Time) { ID = "MyWindow", Html = DateTime.Now.ToString() }.Render(); return new DirectResponse();
注意,如果要Window显示出来,就必须调用Render方法。
我们知道UpdatePanel的更新过程:首先向服务器发送一个异步请求,然后服务器进行重绘,将控件重新生成HTML代码,并返回给客户端,最后,由UpdatePanel客户端JS决定如何替换,达到更新页面的效果。
那么,通过DirectEvents一样可以更新ASP.NET控件。
我们回到第一个例子,通过点击按钮来得到文本框的值。我们在例子中已经完成了取值的过程,接下来我们希望为文本框赋值:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e) { //string name = this.txtName.Text; //X.MessageBox.Alert("提示", "按钮被点击,输入框的值为:" + name).Show();
this.txtName.Text = "www.qeefee.com"
;
}
这里是标准的赋值方式,如果在ASP.NET UpdatePanel中肯定可以完成我们想要的功能,但是在Ext.Net中并不行的,不信你可以试试……反正我是试过了。
那么如何来更新ASP.NET控件呢?我来告诉你答案:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e) { //string name = this.txtName.Text; //X.MessageBox.Alert("提示", "按钮被点击,输入框的值为:" + name).Show(); this.txtName.Text = "www.qeefee.com"; this.txtName.Update(); }
看到了吧,除了赋值以外,我们还要显示的调用Update方法。
需要说明一下,这个Update方法是Ext.Net中的静态方法,要用它的时候你必须添加Ext.Net的引用。
太复杂的控制我没有试过,希望以后有机会尝试吧。希望这篇文章能够帮到大家……别忘了,这是起飞网原创首发哦
原文链接:Ext.Net学习笔记06:Ext.Net DirectEvents用方补充
以上内容来自Ext.Net教程