SharePoint 2010 Cookbook: How to Serialize/Deserialize an Object to JavaScript Object Notation (JSON) Format

As many of you have probably experienced, it becomes necessary from time to time to implement a custom SharePoint application page and to retrieve data from the server via jQuery and/or a Web Service. As it happens, when data on the server-side is in an object state, it will be serialized and the data will interact with the browser as a JSON format string.  However, when the data is on the client-side, the string needs to be deserialized to the client object, which is something you can use jQuery to accomplish.

In this blog post, we’ll introduce you to the steps needed to serialize an object state to JSON format, as well as how to deserialize an object to the client-side.

Create an Empty SharePoint Project:

  • To begin, open Microsoft Visual Studio and go to File > New > Project.
  • Under Installed Templates in your Project Types menu, go to Visual C# > SharePoint > 2010 and select Empty SharePoint Project.
  • Input the Name of the project as well as its LocationSolution (in this example, we’ll Create a new solution), and Solution Name.
  • Click OK:

Implement “Define Object Class” to Serialize:

  • In your project, you will need to define an object class that will respond back to the client. In this example, the objects we will be creating will be a company’s employees:

Implement Web Service to Speak with the Client Side:

  • To begin, add a Web Service in the Layouts folder.
  • Next, implement a service that will process client call requests:

  • In Web Service, implement a Web method that will identify the object mode and deserialize it so that it will be responsive to the JSON data string format:

  • To serialize the object state to a state that is compatible with a JSON data string format, use the JavaScriptSerializer class in C#:

  • To use JavaScriptSerialization, you must add a reference to the following DLL extension: System.Web.Extensions.dll.
  • Using the Serializer, you will now be able to receive an object as a data string in JSON format. You will now be positioned to finalize your backend implementation.

Build the aspx Page and Client Script:

Your next step will be to build a client script from which you will be able to both derive a value from the Web Service as well as display the information in your browser.

  • In the Layout folder, add a SharePoint application page. In this example, we will be adding four textbox controls that will display each employee’s properties.
  • At the end of the Employee information form, add an asp:Button:

  • From there, input a function that will allow you to programmatically implement client callbacks:

Deploy your custom page:

  • Navigate to the SharePoint page you created above:

  • Click on the Get User button. Using jQuery’s Ajax, it will call and fetch data from the Web Service. The object that is returned from the Web Service will be deserialized using jQuery. The object’s properties will now be displayed on the form on your custom SharePoint page:


SharePoint Online

The cloud parts are functional components that extend your SharePoint Online environment in Microsoft 365.

Supports Classic and Modern sites for SharePoint Online/Microsoft 365

SharePoint

Top SharePoint Online Products

Experience greater power and savings by bundling our SharePoint apps and cloud parts.


Calendar Plus


Chart Plus


Knowledge Base


Project Management Central


Simple List Search

 

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019 – Classic Pages Only

SharePoint

Top On-Premises Only Products

Experience greater power and savings by bundling our SharePoint apps and web parts.


Calendar Plus


Data Viewer


Password Change


Password Expiration


Password Reset

 

Our team of Microsoft 365 experts help you get the most out of your Microsoft technology, we have the best Microsoft 365 talent to streamline your organization.

Streamline Your Department

We Have What You Need

Bamboo Solutions

About


Blogs


Webinar & Events


Twitch


Culture & Diversity

 

 

Bamboo Solutions

Tools


Resources


Bamboo Installer