ASP.NET AJAX is a Microsoft solution that provides support for implementing XMLHttp requests. This type of request is different from the normal web requests by the format and amount of data it sends to and receives from the server – it is a minimal (partial) postback, sending and receiving only the important data, instead of transferring the entire page, as a normal postback would do.
Normally we would take advantage of this feature by using an UpdatePanel, but we can also do it by using network calls – as we’ll be able to see in the following example:
First we need to implement a local web service, which will provide some WebMethods to be called from JavaScript. The source code can be seen below:
MyService.asmx
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Script.Services.ScriptService()> _
Public Class MyService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function ServiceMessageToUpper(ByVal mesage As String, _
ByVal controlClientId As String) As String()
Dim parametersList As New List(Of String)
parametersList.Add(mesage.ToUpper())
parametersList.Add(controlClientId)
Return parametersList.ToArray()
End Function
<WebMethod()> _
Public Function ServiceMessageToLower(ByVal mesage As String, _
ByVal controlClientId As String) As String()
Dim parametersList As New List(Of String)
parametersList.Add(mesage.ToLower())
parametersList.Add(controlClientId)
Return parametersList.ToArray()
End Function
End ClassIn the second step, we create the JavaScript code that will manage the network calls:
MyJScript.js
function JSMessageToUpper(messageControlId)
(
var control = $get(messageControlId);
var textMessage = control.value;
var messageUpper = MyExample.MyService.ServiceMessageToUpper(textMessage, messageControlId,
MessageTo_OnComplete , OnTimeout, OnError);
)
function JSMessageToLower(messageControlId)
(
var control = $get(messageControlId);
var textMessage = control.value;
var messageUpper = MyExample.MyService.ServiceMessageToLower(textMessage, messageControlId,
MessageTo_OnComplete, OnTimeout, OnError);
)
function MessageTo_OnComplete(value)
(
if(value.length == 2)
(
var textMessage = value[0];
var control = $get(value[1]);
if (control != null)
(
control.value = textMessage;
)
)
)
function OnTimeout(value)
(
alert("Timeout");
)
function OnError(value)
(
alert("Error");
)We need to mention that the WebMethods can be called only by following the naming convention: ApplicationAssembly.ServiceName.WebMethodName.
The last step is to implement our .aspx page and its code behind:
MyNetworkCalls.aspx
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MyNetworkCalls.aspx.vb"
Inherits="MyExample.MyNetworkCalls" %>
<!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>Untitled Page</title>
<script type="text/javascript" src="<%= ResolveUrl("~/MyScript.js") %>"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/service/MyService.asmx" />
</Services>
</asp:ScriptManager>
<div>
AJAX Client Side Network Calls
<br />
<br />
<asp:TextBox ID="textInput" runat="server" Width="300px"
Text="0D091455-BB0D-42da-BE98-527F53566BF3" />
<br />
<asp:Button ID="buttonToUpper" runat="server" Text="Show to upper" />
<asp:Button ID="buttonToLower" runat="server" Text="Show to lower" />
</div>
</form>
</body>
</html>MyNetworkCalls.aspx.vb
Public Partial Class MyNetworkCalls
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
buttonToUpper.OnClientClick = _
"JSMessageToUpper("" & textInput.ClientID & ""); return false;"
buttonToLower.OnClientClick = _
" JSMessageToLower("" & textInput.ClientID & ""); return false;"
End If
End Sub
End ClassAttention: we need to use “return false;” when setting the OnClientClick property of the buttons, otherwise clicking the buttons will cause a full postback.
