1、Ext.NET 1.7官方示例笔记-事件

官网参考地址：https://examples1.ext.net/#/Events/DirectEvents/Overview/

先了解一下“事件”

Ext.NET包括3种事件机制

以下每个示例的操作都将触发对服务器的DirectEvent Ajax请求，并将通知窗口返回给浏览器

//服务端代码，会向客户端返回一条服务器时间信息提示
<script runat="server">
    protected void UpdateTimeStamp(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
    }
</script>
使用方法一，把 DirectEvent 添加到按钮中

<ext:Button ID="Button1" runat="server" Text="点击我" OnDirectClick="UpdateTimeStamp" />

这样就能访问服务器的 UpdateTimeStamp 方法了，点击后会在浏览器右下角弹出消息提示

----------------------------------------------------------------------------------------------

使用方法二，提交服务器请求前加确认提示

<ext:Button ID="Button4" runat="server" Text="点击我">
     <DirectEvents>
          <Click OnEvent="UpdateTimeStamp">
                <Confirmation ConfirmRequest="true" Title="Title" Message="你确定要向服务器发出请求吗..." />
          </Click>
     </DirectEvents>
</ext:Button>

点击后会跳出提示窗，点击是，会发出请求，点击否，不发出请求，很适合删除记录前需要一个再确认的动作。

--------------------------------------------------------------------------------------------------------------------

使用方法三，给传统的<asp:Button>添加 DirectEvent 事件

<asp:Button ID="Button2" runat="server" Text="Click Me" />

看上去什么都没有，这是一个标准的aspx控件，如果要让它和Ext.NET DirectEvent 事件产生关联，就需要在资源管理标记里加些东西

<ext:ResourceManager runat="server">
     <CustomDirectEvents>
          <ext:DirectEvent Target="Button2" OnEvent="UpdateTimeStamp" />                
     </CustomDirectEvents>
</ext:ResourceManager>

他们关联的标记就是 ID="Button2" => Target="Button2" ,Target 就是目标的意思，意思是作用于那个对象上！

这样点击按钮也可以请求服务器的方法

--------------------------------------------------------------------------------------------------------------------------

使用方法四，绑定一个标准的HTML <input> button

<input  />
这个和什么的用法一样，也要在资源管理标记中加上
-----------------------------------------------------------------------------
使用方法五，和 HTML 标记 <span>关联

<span  就可以了，

style="cursor: pointer;" 的作用是，鼠标移到span标记上变手型状。
-------------------------------------------------------------------------------
使用方法六，使用目标查询将Click DirectEvent添加到多个html <div>元素

通过使用目标查询，我们可以将相同的DirectEvent（或监听器）附加到几个html元素或控件，并触发服务器端事件。

目标不需要“id”，也不需要runat =“server”属性。元素可以是页面上可用的任何html元素。

以下目标查询将选择页面上包含css类“box”的所有<div>元素，但不包含css类“red”。

<div class="box">Click Me</div>
<div class="box red">Not Me</div>
<div class="box blue">Click Me too!</div>

<ext:ResourceManager runat="server">
    <CustomDirectEvents>                
         <ext:DirectEvent Target="${div.box:not(div.red)}" OnEvent="UpdateTimeStamp" />
    </CustomDirectEvents>
</ext:ResourceManager>

$表示选取的意思，div.box 表示div元素class为box的元素，:not(div.red)是个过滤器，表示排除div 标签有class=red的标签。和jQuery很像！
因为我不了解ExtJS，所以只能用jQuery类比。Ext.NET 就是用.net技术包装ExtJS 前端库的，方便.net 程序员操作ExtJS.
--------------------------------------------------------------------------------------

异步DirectEvents

快速单击每个按钮。每个将在其配置的延迟后返回值，该延迟模拟长时间运行的服务器端任务。

<ext:Button runat="server" Text="Submit 1 (10 sec)" OnDirectClick="Button1_Click" />
<ext:Button runat="server" Text="Submit 2 (1 sec)" OnDirectClick="Button2_Click" />
<ext:Button runat="server" Text="Submit 3 (5 sec)" OnDirectClick="Button3_Click" />
<ext:Button runat="server" Text="Submit 4 (1 sec)" OnDirectClick="Button4_Click" />

<ext:Label ID="Label1" runat="server" /><br />
<ext:Label ID="Label2" runat="server" /><br />
<ext:Label ID="Label3" runat="server" /><br />
<ext:Label ID="Label4" runat="server" />

//服务端脚本
<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e) 
    {
        System.Threading.Thread.Sleep(10000);
        this.Label1.Text = "Label1 : " + DateTime.Now.ToLongTimeString();
    }

    protected void Button2_Click(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        this.Label2.Text = "Label2 : " + DateTime.Now.ToLongTimeString();
    }

    protected void Button3_Click(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        this.Label3.Text = "Label3 : " + DateTime.Now.ToLongTimeString();
    }

    protected void Button4_Click(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        this.Label4.Text = "Label4 : " + DateTime.Now.ToLongTimeString();
    }
</script>

-------------------------------------------------------------------------------------------

DirectEvent连接到[WebMethod] WebService

以下示例演示如何配置DirectEvent以连接到ASP.NET WebService [WebMethod]以及两个用于将数据返回给客户端的选项。

第一个Button调用a [WebMethod]并返回一个简单的脚本，该脚本在成功响应后在客户端上执行。//从服务器返回的字符串脚本“alert('')”

第二个Button调用a [WebMethod]并返回带有“Greeting”的新参数。然后，Greeting参数的值用于填充简单的JavaScript alert消息。

1、Ext.NET 1.7官方示例笔记-事件

    <script type="text/javascript">
        var sayHello = function (result) {
            var params = result.extraParamsResponse || {};//如果result有返回参数就给params，否则给空对象

            if (params.Greeting) { 
                alert(params.Greeting);
            }
        }
    </script>

        <ext:Panel 
            runat="server" 
            Title="Say Hello" 
            Width="300" 
            Height="185" 
            Frame="true" 
            ButtonAlign="Center"
            Layout="Form">
            <Items>
                <ext:TextField 
                    ID="txtName" 
                    runat="server" 
                    FieldLabel="Name" 
                    EmptyText="Your name here..." 
                    AnchorHorizontal="100%" 
                    />
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="[WebMethod]">
                    <DirectEvents>
                        <Click 
                            Url="TestService.asmx/SayHello1" 
                            Type="Load" 
                            Method="POST" 
                            CleanRequest="true">
                            <ExtraParams>
                                <ext:Parameter Name="name" Value="#{txtName}.getValue()" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                
                <ext:Button runat="server" Text="[WebMethod] with Params">
                    <DirectEvents>
                        <Click 
                            Success="sayHello(result);" //多了这个，如果成功返回，就调用客户js方法
                            Url="TestService.asmx/SayHello2" 
                            Type="Load" 
                            Method="POST" 
                            CleanRequest="true">
                            <ExtraParams>
                                <ext:Parameter Name="name" Value="#{txtName}.getValue()" Mode="Raw" /> //Mode=Raw 表示值是通过计算获取的
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </form>

using System.Web.Services;
using Ext.Net;

namespace Ext.Net.Examples
{
    /// <summary>
    /// Summary description for TestService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class TestService : System.Web.Services.WebService
    {
        [WebMethod]
        public DirectResponse SayHello1(string name)
        {
            DirectResponse response = new DirectResponse();
            
            // Return a script to be executed on the client
            response.Script = string.Concat("alert('Hello, ", name, "');");

            return response;
        }

        [WebMethod]
        public DirectResponse SayHello2(string name)
        {
            DirectResponse response = new DirectResponse();
            
            ParameterCollection parameters = new ParameterCollection();

            parameters["Greeting"] = "Hello, " + name;
            
            response.ExtraParamsResponse = parameters.ToJson();

            return response;
        }
    }
}

后端WebService代码