Rajeesh's Blog

ASP.NET AJAX - Passing JSON object from client to server

Rajeesh — Mon, 27 Oct 2008 18:39:15 +0000

Part 1- Calling server side methods from client side

Read the Part 1 of this tutorial if you don’t know how to call server side methods directly from client side.

In this post, I will explain how to pass data from client to server in JSON format.

Microsoft AJAX client library has built-in methods which helps in serializing and de-serializing JSON. The methods are defined in "Sys.Serialization.JavaScriptSerializer" class. In server side we have "JavaScriptSerializer"that will help you out to do the JSON serialization and de-serialization.

With the help of these two classes, we can easily do the data transfer. Suppose you have class called "Customer" in server side, which looks like this

using System;

namespace ServerClientInteration
{
    [Serializable]
    public class Customer
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }
    }
}

This is our payload for this example, we are going to move this object from server to client and vice versa. For that I have exposed two static methods on the server side; one is for retrieving the customer details and the other is for updating the customer.

  public partial class _Default : System.Web.UI.Page
    {
        private static Customer customer = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (customer == null)
            {
                customer = new Customer();
                customer.ID = 1;
                customer.Name = "microsoft";
                customer.Address = "www.microsoft.com";
            }

        }

        [WebMethod]
        [ScriptMethod(UseHttpGet=true)]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }

        [WebMethod]
        [ScriptMethod(UseHttpGet = true)]
        public static string GetCustomer()
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(customer);
        }

        [WebMethod]
        [ScriptMethod]
        public static string UpdateCustomer(string jsonCustomer)
        {
            try
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                Customer cust = serializer.Deserialize(jsonCustomer);
                customer.ID = cust.ID;
                customer.Name = cust.Name;
                customer.Address = cust.Address;

                return "Updated";
            }
            catch(Exception Exception)
            {

            }

            return "Error occured while updating";
        }
    }

In the above code, you can see "GetCustomer" and "UpdateCustomer" methods. "GetCustomer" will serialize the static customer object and return it as JSON string; "UpdateCustomer" method accepts JSON string as input and that string is de-serialized in to a customer object and the static customer variable is updated with the new values. "UpdateCustomer" will return status message after the update.

Usually, we persist the customer in DB or some other states, but here for simplicity I have used a static variable which will simulate the persistence.

Now we need to call this from the client-side, for that I have two hyperlinks; one will get the customer from the server and other send the customer to the server.

Here is how the HTML looks like


Untitled Page







Call Server method

Get Customer



ID : 

Name : 

Adress : 


Update customer

I think the above code is self explanatory, let me know if you have any difficulty in understanding this.

Hope this will gave some idea about passing JSON between client and server. I have uploaded the source code in my server and you can get it from here - http://www.rajeeshcv.com/download/ServerClientInteration.zip

ASP.NET AJAX - Calling server side methods from client side

Rajeesh — Fri, 24 Oct 2008 19:13:52 +0000

ASP.net AJAX has got nice bridging between your server side and client side technologies. Using the ASP.net AJAX you can easily call a method in a page. The restriction here is that, the methods your are trying to call should be static and public.

This feature(calling server side static method) is not enabled by default, so you have to manually enable this and it is very very simple; just set the "EnablePageMethods" property of the "ScriptManager" to true like this

After this, create a public static method in your asp.net page and decorate it with WebMethod(System.Web.Services.dll) and ScriptMethod(System.Web.Extensions.dll) attributes. For example I have created a static method called "GetTime()" which returns current time as string.

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        [ScriptMethod]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }
    }

Now you have configured everything correctly and I will show you how to call this method from the client side.

Earlier you have set the "EnablePageMethods" property of "ScriptManager" to true, as a result of that a new object called "PageMethods" is created by the ScriptManager when the page is rendered. This object has all the public static methods in that page. So that you call the server side method like PageMethods.[ServerSideMethodName]. When calling this methods from client side you have to provide a callback function because here all the call scriptmanager made will be asynchronous, and this callback method will get the returned result.

Below is the sample code

	function callServerMethod()
        {
            PageMethods.GetTime(callBackMethod);
        }

        function callBackMethod(result)
        {
            alert(result);
        }

Complete aspx page looks like this

                                  Call Server method

Extra bits

In the above code you can see that I have placed link, when user click on that link a message is shown with the server time. So behind an asynchronous request is send to the server in this format (http://[sitename]/[MethodName]). Server in turn returns the result as JSON back to the client. Here is a screen shot from the firebug

There is optimization we have do here - you can see that, by default the request is a POST request, but in our case a POST request is heavy because we could have achieved the same using a GET request ( Difference between POST and GET ).

In order to change this request in to a GET request, we need to do a minor tweaking in the server side, set "UseHttpGet=true" parameter for the "ScriptMethod" attribute.

	[WebMethod]
        [ScriptMethod(UseHttpGet=true)]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }

After this you can see that, request is changed to a GET request

Photosynth - Nothing is impossible

Rajeesh — Fri, 24 Oct 2008 17:38:40 +0000

Yesterday one of my colleague showed me one of the coolest tool on web - Photosynth

You can share or relive a vacation destination or explore a distant museum or landmark. With nothing more than a digital camera and some inspiration, you can use Photosynth to transform regular digital photos into a three-dimensional, 360-degree experience. Anybody who sees your synth is put right in your shoes, sharing in your experience, with detail, clarity and scope impossible to achieve in conventional photos or videos.

- photosynth.com

Below is one of the synth I liked most, you have to install a plugin to view this

Note: this plugin doesn’t support google chrome

Silverlight 2 released

Rajeesh — Wed, 15 Oct 2008 15:47:03 +0000

Silverlight 2 is out now with new features like rich set of controls, improved Text Rendering capabilities, rich networking support including calling secured(SSL) services etc…

Moreover Microsoft is partnered with Soyatec to sponsor tools for developing Silverlight applications using cross platform Eclipse development platform. eclipse2SL is first of that kind.

eclipse2SL is an open source tools integrated with the Eclipse development platform that enable Java developers to use the Eclipse platform to create applications that run on the Microsoft Silverlight runtime platform. Specifically, the project will be an Eclipse plug-in that works with the Eclipse Integrated Development Environment (IDE) and Eclipse Rich Client Platform (RCP) to provide both a Silverlight development environment and greater interoperability between Silverlight and Java, to facilitate the integration of Silverlight-based applications into Java-based web sites and services.

As an addition to the control set Microsoft is releasing Silverlight Toolkit by end of this month with more UI controls.

Silverlight 2 resources

To get the basic understanding go to Get started

And here are some good articles written by Scott Guthrie

Part 0: Introduction

Part 1: Creating "Hello World" with Silverlight 2 and VS 2008

Part 2: Using Layout Management

Part 3: Using Networking to Retrieve Data and Populate a DataGrid

Part 4: Using Style Elements to Better Encapsulate Look and Feel

Part 5: Using the ListBox and DataBinding to Display List Data

Part 6: Using User Controls to Implement Master/Details Scenarios

Part 7: Using Templates to Customize Control Look and Feel

Part 8: Creating a Digg Desktop Version of our Application using WPF

Google Chrome not rendering the checkboxes properly

Rajeesh — Sun, 05 Oct 2008 18:37:23 +0000

Google chrome(0.2.149.30) has got some problem in rendering the checkboxes. Today I thought about buying a new laptop, so I was searching for a laptop that will fit into my budget and requirements. And I came across a website called http://www.compareindia.com/products/laptops/ , I was using Google chrome for browsing, but when viewed that page it was like this

There was no way for me to narrow my search because I couldn’t select any of options listed under "Narrow your Search" section, but after sometime i.e after doing some scrolling and switching tabs checkboxes appeared on the left side of this list

Initially I thought that, it will a problem with the way that page was developed(may be some JavaScript issues), but when I opened the same page in Firefox(3.0.1) it was rendering properly, even in IE 6 is rendered that page correctly.

I think this is a Chrome bug; I have reported this , follow this URL http://code.google.com/p/chromium/issues/detail?id=3151 if you have experienced same problem.

JQuery in asp.net

Rajeesh — Mon, 29 Sep 2008 19:17:47 +0000

A good news for the JQuery lovers like me; Scott Guthrie anounced that JQuery will be shipped along with Visual Studio and Microsoft is planning to use this excellent javascript library in their future control release.

“Server Error” in asp.net official website

Rajeesh — Sat, 27 Sep 2008 16:57:33 +0000

Today I opened asp.net official website www.asp.net in Google chrome and this was the response…..

But the site is working very well in IE6 and firefox

LayoutManager - custom control for asp.net

Rajeesh — Mon, 22 Sep 2008 17:52:36 +0000

I have created an asp.net custom control on top of my JQuery Plugin, with good design time support. So that you don’t need to write any lines code.

Get more details from here http://code.google.com/p/weblayoutmanager/

Please let me know your suggestions

LayoutManger plugin - documenation and demos

Rajeesh — Tue, 16 Sep 2008 19:02:36 +0000

I have created a separate page for this plugin with documentation and demos.

Please go to http://www.rajeeshcv.com/projects/layoutmanager-jquery-plugin/ to read more about this plugin and how to use it.

Google Syntax highlighter test

Rajeesh — Tue, 16 Sep 2008 14:54:21 +0000

Testing Google syntax highlighter plugin…

public override object EditValue(System.ComponentModel.ITypeDescriptorContext context, IServiceProvider provider, object value)
        {
            if (provider != null)
            {
                editorService = provider.GetService(typeof(IWindowsFormsEditorService)) as IWindowsFormsEditorService;
            }

            if (editorService != null)
            {
                DockableItemCollection items = value as DockableItemCollection;
                if (items == null)
                {
                    items = new DockableItemCollection();
                }
                DockableCollectionEditor itemEditor = new DockableCollectionEditor(items, editorService);
                editorService.ShowDialog(itemEditor);
                value = itemEditor.Items;
                context.OnComponentChanged();
            }

            return value;
        }

I hope the above sample code is highlighted and formatted properly