Tip of the day – How to create a class from json string using visual studio

In the last week, I had developed one web API method which return kinda complex json response. Then i gave that API to another team who gonna consumes it in their application. One of the team member of their team request me to provide class structure as per the api’s json response and that question inspired me to write this post.

Many times we waste our time to prepare class structure on our own from json string which sometimes leads us to some severe bugs. Well Microsoft already provide the solution to create concrete class from json string using visual studio. This feature is available only in VS 2015 and above. Let’s understand this feature by example.

Consider we have below json string –

{
	"APIResult": {
	"IsException": false,
	},
	"APIResponse": [
	  {
		"PlacedOrder": "91124",
		"ProductName": "Redmi 5A (Gold, 16 GB)",
		"ProductDetail": "Redmi 5A boasts of a beautiful fully-laminated 12.7 cm (5) HD display",
		"Price": "4,999",
		"RelatedProducts": [
			{
			"ProductID": "94666",
			"ProductName": "Nokia 6 (Matte Black, 64 GB)",
			"ProductDetail": "Get the Nokia 6 smartphone that exemplifies the ideal balance between performance and battery",
			"Price": "16,999"
			},
			{
			"ProductID": "59687",
			"ProductName": "HTC One E9 (White, 64 GB)",
			"ProductDetail": "No description available.",
			"Price": "21,500"
			}
		],
	}]
}

Now open one blank .cs file in visual studio and click on “Edit” menu and go to “Paste Special” which have 2 sub menus and then click on “Paste JSON As Classes”.
 

Paste_Special

Above process generates class structure as follows.

public class Rootobject
{
    public ApiResult APIResult { get; set; }
    public ApiResponse[] APIResponse { get; set; }
}

public class ApiResult
{
    public bool IsException { get; set; }
}

public class ApiResponse
{
    public string PlacedOrder { get; set; }
    public string ProductName { get; set; }
    public string ProductDetail { get; set; }
    public string Price { get; set; }
    public Relatedproduct[] RelatedProducts { get; set; }
}

public class Relatedproduct
{
    public string ProductID { get; set; }
    public string ProductName { get; set; }
    public string ProductDetail { get; set; }
    public string Price { get; set; }
}

That’s it. Hope you like this post.

Advertisements

Zen Coding in Visual Studio 2015 using Web Essesntial Extension

Few months ago, I have added web essentials 2015 extension to my visual studio and studied its features. This is truly for web developers which makes their life easier. In this post we’ll see one of its great productivity booster feature and that is Zen Coding.

Zen Coding is a plug-in to generate HTML or CSS code in much faster way using jquery/css like selectors. Before we go into the detail let’s first install it in our visual studio.

Follow the below steps.

  • Open the visual studio.
  • Go to the Tools menu and click on Extensions and Updates menu item which will open one window.
    Web_Essesntials_Install
  • In the Extensions and Updates window, click on “Online” in the left pane. Once you click on it you got the list of extensions on the right side.

Web_Essesntials_Extension

  • Select the “Web Essesntials 2015” and click on “Download” button.

 

After installing this plug-in, it’s time to play with it.

Let’s say I want to generate simple table tr HTML. So here is how you can generate it with Zen coding.

table>tr>td

Now hit “Tab” key and it generate the following html code.

<table>
    <tr>
        <td></td>
    </tr>
</table>

Now I want to generate table with 3 “tr” and 2 “td” with some content in each “td”.

table>tr*3>td{hello world}*2

Now hit “Tab” key and it generate the following html code.

<table>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
</table>

As a web developer you know all the html tags but what is the use of “*”(star) and “{ }”(curly braces) in the above zen code ?

Well, there are some more characters available which will have its own usage in zen code. Let’s first understand each one with example.

1). “#” – Creates an Id attribute for specified tag.

Example

div#testId>span

Hit “Tab” key which will generate the following html code.

<div id="testId">
    <span></span>
</div>

 

2). “.” – Creates a class attribute for specified tag.

Example

div.inlineBlock>ul>li

Hit “Tab” key which will generate the following html code.

<div class="inlineBlock">
    <ul>
        <li></li>
    </ul>
</div>

 

3). “[]” – Creates a custom attribute for specified tag.

Example

div[title]>button[value=”Save”]

generates the following html.

<div title="">
    <button value="Save"></button>
</div>

 

4). “>” – Creates a child element after specified tag.

Example

div>p>img

generates the following html.

<div>
    <p>
        <img src="" alt="" />
    </p>
</div>

 

5). “+” – Creates a Sibling element.

Example

div>p>img+a

generates the following html.

<div>
    <p>
        <img src="" alt="" />
        <a href=""></a>
    </p>
</div>

 

6). “*n” – Creates the specified elements for n number of times.

Example

div>ul>li*2>a

generates the following html.

<div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

 

7). “$$” – Generates the incremental numbers.

Example

table>tr#id$$*3>td

generates the following html.

<table>
    <tr id="id01">
        <td></td>
    </tr>
    <tr id="id02">
        <td></td>
    </tr>
    <tr id="id03">
        <td></td>
    </tr>
</table>

 

8). “{}” – Add the text inside the elements.

Example

div>p*4>span{This is my own text $$}

generates the following html.

<div>
    <p>
        <span>This is my own text 01</span>
    </p>
    <p>
        <span>This is my own text 02</span>
    </p>
    <p>
        <span>This is my own text 03</span>
    </p>
    <p>
        <span>This is my own text 04</span>
    </p>
</div>

 

9). “()” – Grouping the expression and generate HTML accordingly.

Example

table>(tr>th{column $$}*3)+(tr>td*3)

generates the following html.

<table>
    <tr>
        <th>column 01</th>
        <th>column 02</th>
        <th>column 03</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

 

Apart from all of the above, you can now also add Lorem Ipsum text in your HTML Code. Simply type lorem and hit TAB and a 30 words of Lorem Ipsum text is inserted. If you want to add only 4 words of Lorem Ipsum then just type below code and hit “Tab” key.

div>p*4>lorem4

<div>
    <p>Amet, consectetur adipiscing elit.</p>
    <p>Fusce vel sapien elit.</p>
    <p>In malesuada semper mi.</p>
    <p>Id sollicitudin urna fermentum.</p>
</div>

You can find many more other features from its official web site.

That’s it for now. Hope you enjoy this post.