AjaxMethods

  1. #1

    AjaxMethods

    Lo.
    I just realised after losing half an hour trying to make an AjaxMethod works that I was trying in an ascx.
    I don't think it was said anywhere that you have to code it in your aspx (even if you can call it from an ascx).
    Imo that could be a usefull thing to add in the samples, will avoid some ppl to lose more time than needed :)

  2. #2

    RE: AjaxMethods

    Hi Rod,

    Please see the following sample

    Page.aspx
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <%@ Register src="AjaxUC.ascx" tagname="AjaxUC" tagprefix="uc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Configuration Portal</title>
        
        <script type="text/javascript">
            add = function(x, y) {
                //AjaxUC1 is client id of user control. Please ensure that you use correct client id
                Coolite.AjaxMethods.AjaxUC1.Add(x, y, {
                    success: function(result) {
                        alert('Result - ' + result);
                    },
    
                    failure: function(msg) {
                        alert('Failure - ' + msg);
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="scriptManager" runat="server"/>        
            <uc1:AjaxUC ID="AjaxUC1" runat="server" />
            
            <ext:Button runat="server" Text="Add 3+4">
                <Listeners>
                    <Click Handler="add(3, 4);" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>

    UserControl.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        [AjaxMethod]
        public int Add(int x, int y)
        {
            return x + y;
        }
    </script>

  3. #3

    RE: AjaxMethods

    What do you recommend with the clientID issue? *My user control is inside a content form so its client id is not the same as the server id. *I really don't want to hardcode the id.
  4. #4

    RE: AjaxMethods

    Hi jchau,

    There are several ways:

    1. We have very simple control TokenScript. Just it is hidden becuase we are not sure yet useful it or not (may be it should be changed) . I made it public. You can update from the SVN, test it and say useful it or not.

    In TokenScript you can use all kind of tokens which are availbale in Listener. iUsage example:
    <ext:TokensScript runat="server">
            <script type="text/javascript">
                add = function(x, y) {
                    Coolite.AjaxMethods.#{AjaxUC1}.Add(x, y, {
                        success: function(result) {
                            alert('Result - ' + result);
                        },
    
                        failure: function(msg) {
                            alert('Failure - ' + msg);
                        }
                    });
                }
            </script>
        </ext:TokensScript>
    2. Second way. We added IDMode to the WebControl (also you can set it globally in web.config or ScriptManager). IDMode is enum: Inherit, Legacy, Static. It's a way of controlling what .id is written to the client config.

    "Static" will write the .ID.
    "Legacy" will write the .ClientID
    "Inherit" will inherit from the Parent control.

    The default is "Inherit". Give the ability to set a Parent (such as ViewPort) with "Static", then all child controls will inherit the "Static" value.

    The clientconfig is much cleaner if using a MasterPage and "Static". Also a list of id's is maintained and an exception thrown if multiple id's are detected.

    So, You can set Static IDMode and use ID in js code

    3. You can write ClientID in code-behind to js variable and use it js code.

    protected void Page_Load()
            {
                if(!Ext.IsAjaxRequest)
                {
                    ScriptManager1.AddScript("this.myUC1 = '{0}';", this.AjaxUC1.ClientID);
                }
            }
    <script type="text/javascript">
            add = function(x, y) {            
                Coolite.AjaxMethods[myUC1].Add(x, y, {
                    success: function(result) {
                        alert('Result - ' + result);
                    },
    
                    failure: function(msg) {
                        alert('Failure - ' + msg);
                    }
                });
            }
        </script>

  5. #5

    RE: AjaxMethods

    Thx for your sample Vlad, I'll try it when I find time to do so.
    But I dn't really get why my code worked right away when I moved in my aspx :(
    Thx anyway.

Similar Threads

  1. [CLOSED] AjaxMethods with MVC
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 05, 2009, 1:19 PM
  2. Coolite.AjaxMethods AND EventMask
    By LoreX75 in forum 1.x Help
    Replies: 6
    Last Post: Jul 27, 2009, 11:26 AM
  3. AjaxMethods
    By flaviodamaia in forum 1.x Help
    Replies: 4
    Last Post: Mar 10, 2009, 2:08 PM
  4. [CLOSED] AjaxMethods
    By Justin_Wignall in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 29, 2009, 12:36 PM
  5. Confirm with AjaxMethods
    By afhi in forum 1.x Help
    Replies: 1
    Last Post: Jan 20, 2009, 12:27 PM

Posting Permissions