Monday, July 13, 2009

Ajax Tips: UpdatePanel,WebMethods & PageMethods

UpdatePanel Tips
Use UpdateMode=Conditional
By setting the UpdatePanel's UpdateMode property to Conditional, it will only update its contents when one of its triggers occurs or a control within the UpdatePanel itself raises a Postback.
To do this just do the following:

<asp:updatepanel id="UpdatePanel_List" runat="server" updatemode="Conditional"></asp:updatepanel>

Programmatically Tell the ScriptManager to handle a specific controls postbacks asynchronously
Programmatically telling the ScriptManager to raise a Postbacks Asynchronously can be usefull in some scenarios; such as when you may want to optionally enable ajax for certain things on the page.
To do this you just use the ScriptManagers RegisterAsyncPostBackControl method and pass it the reference to the control you want to make asynchronous.
Here's an example page that does this:
Default.aspx

<asp:updatepanel id="UpdatePanel_List" runat="server" updatemode="Conditional">
<contenttemplate>
<asp:button id="btnShowTime" onclick="btnShowTime_Click" runat="server" text="Show Time">
</asp:button>
</contenttemplate>
</asp:updatepanel>

Default.aspx.cs
public partial class UpdatePanel_01_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ /// Make btnShowTime postback
this.ScriptManager1.RegisterAsyncPostBackControl(btnShowTime);
}
protected void btnShowTime_Click(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToLongTimeString();
}
}

WebMethods and PageMethods
Using WebMethods
By attaching the ScriptService and ScriptMethod attributes to your WebServices you can enable them to be accessed from within your pages via JavaScript.
Here's a sample WebService with the ScriptService and ScriptMethod attributes attached:
[System.Web.Script.Services.ScriptService][WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WSTime : System.Web.Services.WebService
{
[WebMethod] [System.Web.Script.Services.ScriptMethod]
public string GetServerTime()
{
return DateTime.Now.ToLongTimeString();
}
}

Then to access the WebService from within JavaScript you need to first tell the ScriptManager about the WebService by giving it a ServiceReference. This can be done declaratively within the page, like so:

<asp:scriptmanager id="ScriptManager1" runat="server"><services><asp:servicereference path="~/WebMethods/WSTime.asmx"></asp:servicereference></servicesglt;</asp:scriptmanager>

Now to acess the WebServices methods you just use the namespace that ASP.NET Ajax creates in the page for the WebService and access its methods like normal JavaScript methods. The namespace that is created is the same name as the WebService, in this case it's WSTime. The whole Ajaxiness of calling the server and getting the results back are handled for you, and all you have to worry about is processing the results. Remember, WebMethods can only be called Asynchronously.
Here's an example of using the WSTime.GetServerTime WebService method from within JavaScript:
function btnGetServerTime_Click()
{ // call the WebMethod and pass it the method // to call once it gets the response from // the server.
WSTime.GetServerTime(SucceededCallback);
}
function SucceededCallback(result, eventArgs)
{
alert(result);

}

Using PageMethods
PageMethods are accessed in the same fashion as WebMethods, except they do not require the creation of a WebService. PageMethods are actually WebMethods that are added to the page itself. Once thing to note is there is No way to embed PageMethods within Custom User Controls or Server Controls, they must be added to the Page; hence the name PageMethods.
Here's the C# code of an example page with a PageMethod defined:

public partial class PageMethods_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod] 

public static string GetServerTime()
{
return DateTime.Now.ToLongTimeString();
}
}

To enable the PageMethods you must first set the ScriptManagers EnablePageMethods property to True.
<asp:scriptmanager enablepagemethods="true" id="ScriptManager1" runat="server"></asp:scriptmanager>
Then you can call the PageMethods in the same way as WebMethods, except the namespace you use to access the methods is named PageMethods.
Here's the example code of calling the above PageMethod from JavaScript:
function btnGetServerTime_Click()
{
PageMethods.GetServerTime(SucceededCallback);
}
function SucceededCallback(result, eventArgs)
{
alert(result);

}

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments : on " Ajax Tips: UpdatePanel,WebMethods & PageMethods "