ASP.NET – AJAX client side network calls

Jun 17, 2009 by Constantin


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 Class

In 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 Class


Attention: we need to use “return false;” when setting the OnClientClick property of the buttons, otherwise clicking the buttons will cause a full postback.




Comments


ASP.NET Application Developers commented on 5/30/2013 8:42:44 AM

This is the great information shared by you which will be implement by doing such type of activities which is helpful to minimize client call.

HiramMcintosh commented on 5/30/2013 10:32:10 AM

This type of request is different from the normal AJAX client web requests by the format and amount of data it sends to and receives from the server.

Your Comment:






Blog Home RSS Feed
SBP Home Contact

Recent blog entries



Archives

All tags