PDA

View Full Version : AjaxMethods



Rod
Dec 24, 2008, 2:39 PM
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 :)

Vladimir
Dec 24, 2008, 2:54 PM
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>

jchau
Dec 24, 2008, 9:41 PM
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.

Vladimir
Dec 25, 2008, 12:49 PM
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>

Rod
Dec 25, 2008, 12:53 PM
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.