Ext.Net学习笔记06:Ext.Net DirectEvents用方补充

在ASP.NET控件上面使用DirectEvents

我们在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();
}

通过这段代码,我们会取到文本框输入的值,并在客户端弹出一个提示框,并且这个过程是无刷新的。效果如图:

在HTML控件上面使用DirectEvents

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

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)

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一样的效果。

DirectEvents动态生成Ext.Net控件

刚才在演示调用WebService和一般处理程序的时候,已经看到了如何生成Ext.Net控件,再看一下代码:

new Window("Server time", Icon.Time)
{
    ID = "MyWindow",
    Html = DateTime.Now.ToString()
}.Render();
return new DirectResponse();

注意,如果要Window显示出来,就必须调用Render方法。

DirectEvents更新ASP.NET控件

我们知道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的引用。

太复杂的控制我没有试过,希望以后有机会尝试吧。希望这篇文章能够帮到大家……别忘了,这是起飞网原创首发哦

时间: 2024-10-22 00:55:33

Ext.Net学习笔记06:Ext.Net DirectEvents用方补充的相关文章

【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之后,在Ext.Net GridPanel的行头会出现一个展开图标,点击图标以后能够将这一行展开: 使用XTemplate实现行折叠/展开 这是最简单的一种实现,在上一篇文章:[Ext.Net学习笔记]05:Ext.Net GridPanel的用法(包含Filter.Sorter.Grouping.汇

【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的,有基础的可以看下,可以百度到PDF文档的. Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单: <ext:Window runat="server" ID="win" Title="示

【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplate绑定数据 XTemplate是个模板,当我们为一个XTemplate绑定数据之后,将会按照模板的预定格式进行显示. <ext:Window runat="server" ID="win1" Title="XTemplates用法" Width

Ext.Net学习笔记07:Ext.Net DirectMethods用法详解

前面两篇内容中,我们看到了DirectEvents方便调用服务器端方法.DirectEvents调用WebService方法的使用方法,今天我们来看看DirectMethods,这家伙可比DirectEvents更加灵活了,它可以像调用JS方法一样来异步调用服务器端的方法. 使用DirectMethods在JS中调用C#方法 我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法. 来看一个例子吧: [DirectMethod] publ

【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net

Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http://www.ext.net/download/示例地址:http://examples.ext.net/ 1.首先下载Ext.Net,地址:http://www.ext.net/download/ ,有两种框架选择,选择下载WebForms 当前版本是2.5.1,压缩包里面包含了不同版本,分别用在相应.

【Ext.Net学习笔记】07:后续

程序员必看书籍(转载) C++: Prata<C++ Primer Plus>:基础,第一本书.(之前的版本也可,不过推荐最新的) Lippman<Inside C++ Object Model>:初级,加深语言层次上的理解.不过有点小老了.里面的cfront编译器早退出江湖好久了.思想值得学习 侯捷<STL源码剖析>:第三本书,中级,深入STL Vandevoorde<C++ Template>:第四本,中级,范式编程 罗剑锋<Boost>两本

Ext.Net学习笔记22:Ext.Net Tree 用法详解

Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"> <Root> <ext:Node Text="根节点" Expanded="true"> <Children> <ext:Node Text="节点1" Expand

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在GridPanel中添加一行配置节点: <Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ex

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridPanel中的列都具有排序功能,效果如下: 如果要禁用列排序,需要在列模型中添加一个属性Sortable="false" 客户端排序 排序是对Store的操作.如果我们要在一个Store中加入排序,可以使用下面的配置: <Sorters> <ext:DataSorter P