当前位置: 首页 > 工具软件 > COOLITE > 使用案例 >

Coolite Toolkit 学习二

幸弘光
2023-12-01
 Coolite 方法调用

一、按钮调用javaScript中的方法
       首先假设javascript方法为

         var   scriptMethod=function()
               {
                  ...
               };
        1.调用javascript方法的第一种方法.

           <ext:Button ID="btn1" Text="按钮1" runat="server">
               <Listeners>
                   <Click Fn="scriptMethod"/>
               </Listeners>
           </Button>
        2.调用javascript方法的第二种方法    

           <ext:Button ID="btn1" Text="按钮1" runat="server">
               <Listeners>
                   <Click Handler="={scriptMethod}"/>
               </Listeners>
           </Button>


二、按钮调用服务器端代码中的方法

       1.第一种跟asp.net非常像的方法.

           <ext:Button ID="btn1" Text="按钮1" runat="server">
               <AjaxEvents>
                    <Click onEvent="Btn1_Click"/>
               </AjaxEvents>
           </Button>


    对应的方法为:

           protected void Btn1_Click(object sender, AjaxEventArgs e)
            {
              this.SetTime();
            }
         跟原来的asp.net不同的地方就在于AjaxEventArgs这里了。

 

附:AjaxEvent

如果需要使用在标准控件或是其他的html标签元素上,则需要通过Coolite Toolkit所提供的ScriptManager来实现了,下面简单演示将AjaxEvent使用在官方的Button控件上。
<ext:ScriptManager ID="ScriptManager1" runat="server">
    <CustomAjaxEvents>
        <ext:AjaxEvent Target="myButton" OnEvent="OnAjaxEvent_Click">
            <EventMask ShowMask="true" MinDelay="500" Msg="正在处理" />
        </ext:AjaxEvent>
    </CustomAjaxEvents>
</ext:ScriptManager>
<script runat="server" language="C#">
    protected void OnAjaxEvent_Click(object sender, AjaxEventArgs e)
    {
        
    }
</script>
<asp:Button ID="myButton" runat="server" Text="点我" />

      通过上面这种方式,可以把AjaxEvent添加到任何的html元素上(比如:input,div,p,span等等)。

 

 

       2.接下来的这个方法,功能强大,传参方便,还可以加上回调函数,非常方便。

例子1:

<ext:Button ID="btn1" Text="按钮1" runat="server">
       <Listeners>
             <Click Handler="Coolite.AjaxMethods.MyServerMethod(
                                       #{textName}.value,
                                       #{textPass}.value,
                                        {
                                            success:function(result){Ext.Msg.Alert('msg',result);}
                                        }); "/>
      </Listeners>
</Button>
这样写,就会调用了服务器端代码中如下的方法:

            [AjaxMethod]
           public int MyServerMethod(string 参数1,2等等)
            {
               ...
              return ...;
             }
      传递的参数,比如#{txtName}.value 是ID为txtName的控件内所填的值,控件可以是Ext控件,也可以是asp服务器端控件,也可以是HTML控件。回调函数,就是你所调用的方法执行完毕后,会返回一个值result,你可以在这里调用javaScript去处理这个值. 

 
例子2:这样写,就会调用服务器代码中的如下方法:

<ext:Button ID="Button1" runat="server" Text="Say Hello">
     <Listeners>
         <Click Handler="Coolite.AjaxMethods.SayHello(
                                 'World',
                                 {        
                                     success: function (result) {alert(result);}   
                                 });" />
     </Listeners>
</ext:Button>
        [AjaxMethod]
       public string SayHello(string text)
        {  
            return "Hello " + text;
        }

 

附:AjaxMethod 

通过Coolite Toolkit提供的Coolie.AjaxMethods.方法名直接调用后置方法。相互之间传递数据(简单文本串,对象,JSON)支持多种格式,这点和ASP.NET AJAX是一样的。除此之外,Coolite Toolkit还提供了更强大的页面方法调用功能,就是他可以调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。如果要调用母版页的方法,则需要在对应的母版页里提供AjaxMethod方法接口,并为其通过AjaxMethodProxyIDAttribute配置代理生成策略,如所示:
[AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.None)]
public partial class MyMaster : System.Web.UI.MasterPage
{
    [AjaxMethod]
    public string PageMethod()
    {
        return "调用了母版页的后置方法:PageMethod()";
    }
}
前台页面调用:
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMaster.Master" AutoEventWireup="true"
    CodeBehind="MasterDemo.aspx.cs" Inherits="WebApplication1.MasterDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>

    <ext:Button ID="Button1" runat="server" Text="Submit">
        <Listeners>
            <Click Handler="RequestMethod()" />
        </Listeners>
    </ext:Button>

    <script type="text/javascript">
        function RequestMethod() {
            Coolite.AjaxMethods.PageMethod({
                success: function(result) {
                    Ext.Msg.alert('返回提示', result);
                }
            });
        }
    </script>
</asp:Content>
       如果是调用用户自定义控件里的方法,方式和母版页相差不大,不同的是UserControl需要设置别名才能成功调用。如下示例:
[AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.Alias, Alias = "UC")]
public partial class TimeControl : System.Web.UI.UserControl
{
    [AjaxMethod]
    public string PageMethod()
    {
        return DateTime.Now.ToString();
    }
}
 客户端使用别名调用如下:
<uc1:TimeControl ID="TimeControl1" runat="server" />
<ext:Button ID="btnUserControl" runat="server" Text="调用UserControl的方法">
    <Listeners>
            <Click Handler="Coolite.AjaxMethods.UC.PageMethod(
            {
                success:function(result)
                {
                    Ext.Msg.alert(result);
                }
            });" />
        </Listeners>
</ext:Button>

 

附:Listeners

 通过Listeners给Ext按扭添加了一个客户端方法Handler。


三、在javaScript中调用后台方法    (转)

var DelSelected=function(){
                 Ext.MessageBox.confirm('提示', '是否要删除记录',function(btn){
                            if (btn == 'yes') {
                                 Coolite.AjaxMethods.Del();
                             }
                 });

 类似资料: