Ext.Net通过DirectEvents进行服务器端异步的事件处理。【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局 中已经简单的介绍了DirectEvents,今天将详细的介绍一下DirectEvents。

DirectEvents异步执行服务器端事件

我们首先来看一下Ext.Net DirectEvents的一个最简单用法,通过点击按钮触发服务器端的事件处理方法,并在前台弹出一个提示框。

<ext:Window runat="server" ID="win1"
    Title="Ext.Net DirectEvents"
    Width="300" Height="200">
    <Buttons>
        <ext:Button runat="server" ID="btnOK"
            Text="确定" Icon="Accept"
            OnDirectClick="btnOK_DirectClick">
        </ext:Button>
    </Buttons>
</ext:Window>

这里添加了OnDirectEvents事件,它的一个简写方式,完整的写法如下:

<ext:Button runat="server" ID="btnOK"
    Text="确定" Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick"></Click>
    </DirectEvents>
</ext:Button>

事件处理方法如下:

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    X.MessageBox.Alert("提示", "按钮被点击").Show();
}

编译代码并刷新页面,点击按钮,我们会看到如下效果:

显示Mask遮罩层

上面的代码已经演示了如何使用DirectEvents执行服务器端的事件,DirectEvents是通过异步方式执行服务器端代码的,那么,我们通常会希望在执行的时候客户端显示一个遮罩层,阻止用户进行其他操作,这点Ext.Net已经为我们想到了。

<ext:Button runat="server" ID="btnOK"
    Text="确定" Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick">
            <EventMask ShowMask="true" Msg="正在处理..."></EventMask>
        </Click>
    </DirectEvents>
</ext:Button>

然后我们在服务器端事件处理方法中让程序休息一下:

        protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
        {
            System.Threading.Thread.Sleep();//将当期线程挂起3000毫秒,即3秒
            X.MessageBox.Alert("提示", "按钮被点击").Show();
        }

这样当我们再点击按钮的时候,会看到如下效果:

为事件添加自定义参数

Ext.Net DirectEvents 还允许我们为事件添加自定义参数。

<ext:Button runat="server" ID="btnOK"
    Text="确定" Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick">
            <EventMask ShowMask="true" Msg="正在处理..."></EventMask>
            <ExtraParams>
                <ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
            </ExtraParams>
        </Click>
    </DirectEvents>
</ext:Button>

在这里,我们将传给处理方法一个名称为name的参数,看一下服务器端的处理:

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    System.Threading.Thread.Sleep();

    string btnName = e.ExtraParams["name"];
    X.MessageBox.Alert("提示", btnName + "被点击").Show();
}

在服务器端,我们通过e.ExtraParams来访问这些参数。

处理服务器返回的数据

Ext.Net DirectEvents 可以通过添加一个客户端回调方法来处理服务器返回的数据。

<ext:Button runat="server" ID="btnOK"
    Text="确定" Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
            <EventMask ShowMask="true" Msg="正在处理..."></EventMask>
            <ExtraParams>
                <ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
            </ExtraParams>
        </Click>
    </DirectEvents>
</ext:Button>

在配置中添加一个success配置,表示在执行成功以后调用fnSuccess方法,fnSuccess方法的定义如下:

function fnSuccess(response, result) {
    alert(result.extraParamsResponse.data);
}

接下来看看服务器端如何返回数据的:

        protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
        {
            e.ExtraParamsResponse.Add(new Ext.Net.Parameter("data", "abc"));
        }

通过这样的处理,我们就可以从服务器返回数据,并在客户端通过js代码进行处理了,代码效果如下。

confirmation配置

confirmation配置是用来在触发事件之前进行提示,有用户决定是否提交服务器进行处理的。

它的用法很简单,却很实用。

<ext:Button runat="server" ID="btnOK"
    Text="确定" Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
            <EventMask ShowMask="true" Msg="正在处理..."></EventMask>
            <ExtraParams>
                <ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
            </ExtraParams>
            <Confirmation ConfirmRequest="true"
                Title="提示" Message="确定要提交服务器吗?">
            </Confirmation>
        </Click>
    </DirectEvents>
</ext:Button>

不需要进行多余的代码处理,只要这两行配置就可以完成在出发时间前进行提醒:

Ext.Net DirectEvents除了能够在Ext.Net中很方便的使用之外,还可以结合Asp.Net控件、HTML控件进行使用。

在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="确定" 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。

新建一个Web服务文件,文件名为ExtNetService 。

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    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)
        {
            this.txtName.Text = "http://www.cnblogs.com/yc-755909659/";
            this.txtName.Update();
        }

除了赋值以外,我们还要显示的调用Update方法,不然就会赋值失败。

前面看到了DirectEvents方便调用服务器端方法、DirectEvents调用WebService方法的使用方法,下面我们来看看DirectMethods,这家伙可比DirectEvents更加灵活了,它可以像调用JS方法一样来异步调用服务器端的方法。

使用DirectMethods在JS中调用C#方法

我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法。

来看一个例子吧:

[DirectMethod]
public void AddToServerTime(int hours)
{
    , ));
    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配置节点,那么你肯定是没有看第一篇笔记,去看看吧>>【Ext.Net学习笔记】01:在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)
{
    , ));
    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;
    , ));
    this.myLabel.Text = text + date.ToString();
}

很简单的一个设置,在DirectMethod构造函数中配置一下就可以了。

郑重的提醒,尽量少用同步的请求,这样会造成浏览器假死的现象,至于什么是浏览器假死,你去试试抢一下春运时候的火车票就知道了

提升性能:调用静态方法

先来说说非静态方法,在执行非静态方法的时候,Ext.Net会提交更多的数据,使我们可以访问页面中的控件这在处理页面相关内容时候非常有用,但是当我们只是想去执行一个处理过程,而与页面无关的时候,我们就可以通过执行静态方法来提升性能。

在静态方法中,我们不能访问页面的Form数据,不能直接访问Request、Response等数据(可以通过HttpContext.Current来访问),好处是在请求的时候,Ext.Net不会将页面数据提交给服务器,大大减少了数据传输和服务器执行的时间。

[DirectMethod(Namespace = "MyApp.DirectMethods")]
public static string AddToServerTime(int hours)
{
    , ));
    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)
{
    )
    {
        ResourceManager.AjaxSuccess = false;
        ResourceManager.AjaxErrorMessage = "number2 can't be zero!";
        ;
    }
    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);
    }
}

That's All 。

来源:

Ext.Net学习笔记05:Ext.Net DirectEvents用法详解

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

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

【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解的更多相关文章

  1. Ext.Net学习笔记03:Ext.Net MessageBus用法

    发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了, ...

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

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  3. Ext.Net学习笔记23:Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

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

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  5. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

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

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

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

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

  8. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

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

    Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...

随机推荐

  1. 依然同上~ 点击获取当前option的value与text

    $(".tjbtn").click(function(){ $('#leader').each(function(index, ele){ var leader = ele.val ...

  2. java时间和日期类型

    在java中,代表时间和日期的类型包括:java.util.Date和java.util.Calendar,此外,在JDBC API中还提供了3个扩展类,java.UtilDate类的子类:java. ...

  3. console数据

  4. postgres 约束 多个条件 联合 约束

    ADD CONSTRAINT xxx CHECK ( (col1 = 0.0) = (col2 IS NOT NULL)); ## 相当于check (true = ture)

  5. usb-to-isp-for-stm32

  6. EXE转JPG后缀格式工具(真实JPG后缀)

    EXE转JPG后缀格式工具(真实JPG后缀) exe转换为jpg工具,双击之后正常运行. 杀毒软件误报 本程序禁止用于违法操作. 下载地址 链接: https://pan.baidu.com/s/1b ...

  7. BERT模型在多类别文本分类时的precision, recall, f1值的计算

    BERT预训练模型在诸多NLP任务中都取得最优的结果.在处理文本分类问题时,即可以直接用BERT模型作为文本分类的模型,也可以将BERT模型的最后层输出的结果作为word embedding导入到我们 ...

  8. “理了么”软件特点NABCD个人分析

    在这里我就主要对此软件的‘A’(做法)和‘B’(好处)两方面进行分析. “A”:我们的软件为顾客和商家分别提供一种账户,分别登陆后会显示不同的界面. 1.用户界面:拥有“理发店”.“订单“.”和“我的 ...

  9. Java面试中的“劲敌”线程,9个疑问全面解析

    作者:我是攻城师 (一)创建线程的方式 (1)实现Runnable接口 (2)继承Thread类 推荐使用接口,能够做到定义与实现分离,耦合更低 (二)关于线程的优先级 thread2.setPrio ...

  10. Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test java.lang.IllegalStateException

    不能找到对应的带有@SpringBootConfiguration 的类,你需要将它放在包的最顶层.