ASP.Net AJAX Programming models
When we set out to develop AJAX based web applications, we need to make a clear choice whether the application is going to be based on :
- Server-centric programming model
- Client-centric programming model
- Hybrid or a mixture of Server-centric programming model and Client-centric programming model
Many a times this decision is based on the existing applications which needs to be upgraded. Often factors like skills of a programmers available determine the choice of the programming model. Note that there are no clear guidelines which can help us to decide on the programming model. In this blog post we will see how a client-centric model and server-centric model is implemented.
Server-centric programming model
- The application logic (written in VB.Net or C# )and user interface is hosted on the server.
- This model is more like a minimal ajax implementation because we use only ScriptManager control, UpdatePanel control and almost no JavaScript code.
- For existing applications to be upgraded to Ajax, we can retain the core Application logic and UI.
- Flicker free increamental updates by using only the ScriptManager control, UpdatePanel control.
In the example below, we use the <UpdatePanel> tag and one of its child tags <ContentTemplate> to allow to refresh the label. By using the above tags, we are leveraging the power of Ajax to refresh the label without the need to postback the entire page.
The Server-Centric programming model involves adding the UpdatePanel control and placing all Asp.net controls within it. Note that in every Asp.net Ajax page, we need to place the one ScriptManger control.
The functionality of the below code is to increament the counter of the Label control when user clicks on the PartialButton.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode=Always ChildrenAsTriggers=true>
<ContentTemplate>
<asp:Button ID="PartialButton" runat="server" text="Partial Post Back" OnClick="InsideButton_OnClick" />
<br />
<br />
Counter (Partial):
<asp:Label ID="PartialLabel" Text="1" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<script runat="server">
Sub InsideButton_OnClick(ByVal sender As Object, ByVal e As System.EventArgs)
PartialLabel.Text += 1
End Sub
</script>
Client-centric programming model
The client-centric model is chosen when there is a compelling need to provide rich user experience in your application. In this programming model, both application logic and UI is implemented in the browser. The rich user experience is implemented using JavaScript, DHTML. Web service calls are used to retrieve the data from the server.
To learn more on creation of web services click here : Create a Web Service
So, the client-centric programming model requires a high level of Javascript expertise and atleast one team member should posses the knowledge of security issues of a web application.
In the example given below, we will add a new web service called myservice.asmx. this web service takes the string as input and returns the same. Note that in every client-centric application, a web service has to be used to retrieve the data from the server. As the given example is only for demonstration purposes, the input and returning value is the same and the example is straight forward. As the programs become sophisticated the input and return values will be varied.
In the below code, we have used namespace System.Web.Script.Services namespace, which
is part of the core ASP.NET AJAX framework.
Note that the two new attributes, [ScriptService], [ScriptMethod]. The attribute [ScriptService] is the attribute of the class myservice and [ScriptMethod] is the attribute of the web method GetData(). These attributes are parsed by the ASP.NET AJAX framework and is used to determine what portions of the service are exposed in the JavaScript proxies.
Next we add a new web form called client-centricexample.aspx. the first step is to include ScriptManager control. Next, we declare a service reference to the local web service myService.asmx. In the web form, we use two regular Html elements two textbox controls and one button. Whenever user clicks on the button in the page, the GetResult() javascript function is called. In this function we call the web service to display the text enetered by the user in another textbox control. In the statement, myService.GetData(document.form1.Text1.value,onComplete);
The first parameter is the data entered in the first textbox control and the second parameter is the name
of the callback function onComplete that is called when the method returns succesfully. When the call return is completed, the changes to be made in the user interface is mentioned here.
In the statement document.form1.Text2.value = result;
the control text2 is assigned the result of the web service. So, whenever user click the button, the textbox control is updated dynamically.
WebService/WebMethod code:
<%@ WebService Language="C#" Class="myService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class myService : System.Web.Services.WebService
{
[ScriptMethod]
[WebMethod]
public string GetData(string myString)
{
return myString;
}
}
HTML code:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="myService.asmx" />
</Services>
</asp:ScriptManager>
<input type=text id=Text1 name=Text1 />
<input type=text id=Text2 name=Text2 />
<input type=button id="btnGet" value="Getdata" onclick="GetResult();" />
JavaScript code:
<script type="text/javascript">
function GetResult()
{
myService.GetData(document.form1.Text1.value,onComplete);
}
function onComplete(result)
{
document.form1.Text2.value = result;
}
</script>
</form>
Comments