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 new solution), and Solution name.
  • Click OK:

    Implement “Define Object Class” to Serialize:

    • In your project, you will need to define an object class which 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 deserilize 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 which 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

          Applications

          SharePoint apps are stand-alone applications that perform specific tasks on a SharePoint site. Apps can perform functions such as managing a discussion board or knowledge base, performing project management or time tracking tasks, or doing other workflow operations.

          SharePoint

          Product Suites

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


          Essentials


          Essentials Plus


          Bamboo Premier


          Project Management Suite


          Knowledge Management Suite


          External User Manager


          SharePoint

          Web Parts

          Extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of Web Parts. Web Parts are the building blocks of pages on a SharePoint site that can be used to customize the user interface and content of a site page. 

          SharePoint

          Product Suites

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


          Essentials


          Essentials Plus


          Bamboo Premier


          Project Management Suite


          Knowledge Management Suite


          External User Manager


          Office 365

          Cloud Parts

          Cloud Parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft Office 365. More than mere ports of existing software to the cloud, our Cloud Parts have been built from the ground up to take advantage of the best that the cloud has to offer.

          SharePoint

          Product Suites

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


          Cloud Parts Suite for O365/SP Onl.


          Featured Services

          SharePoint Health Check

          A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

          SQL Health Check

          Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

          My SharePointXperts

          The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!