Go JSON and Microsoft Technologies (translation)

This article translates an article on CodeProject (link), the article on the concept of JSON and its application in some Microsoft technology has played a very good role in literacy, summed up very well, suitable for beginners.

Directory

• Introduced
• What is a JavaScript object?
  • Experiment One: Understanding JavaScript objects
  • Experiment two: An array of JavaScript objects
• What is XML and why is XML used?
• What is JSON?
  • Experiment three: Convert a JSON string to a JavaScript object
• JSON in ASP. NET Web Forms
  • Experiment four: Get request-javascript request JSON data
  • Experiment Five: Post request–javascript send JSON data
• JSON in ASP.
  • Experiment Six: Get request–javascript request JSON data
  • Experiment Seven: Post request–javascript send JSON data
• JSON in WCF
  • Experiment Eight: Get request–javascript request JSON data
  • Experiment Nine: Post request–javascript send JSON data
• JSON in the Web API
  • Lab Ten: Get request–javascript request JSON data
  • Lab 11: Post Request–javascript sending JSON data
• Summarize

Introduced

In this article, we will learn about the concept of JSON and how JavaScript interacts with some of Microsoft's technologies such as ASP. NET MVC, ASP. NET Web Forms, WCF, and Web APIs.

What is JavaScript object?

JavaScript contains two kinds of things: variables and functions. Variables store data, and functions are responsible for performing specific actions. Variables can be int, string, float, or object type. "A JavaScript object is a wrapper that contains variables and functions."

Experiment One: Understanding JavaScript Object

To understand JavaScript objects, we don't need to create an ASP. NET MVC or Web Forms project, just create a simple HTML file.

The first step. Open Visual Studio, click File--new file, select HTML type file as

Step two. Create a JavaScript object as follows

Step three. Use "." To access the properties of a JavaScript object

Fourth step. Save the HTML file

Fifth step. Use your browser to open the HTML file

Output:

experiment Two: JavaScript Object Array

An array is defined as a collection that contains elements of the same type. The exciting is that the object array is also supported in JavaScript.

The first step. Same as in experiment one

Step two. Create an array of JavaScript objects in the following manner

The third step is to open the HTML file in a browser, see

What is XML and why use XML ?

In, a man tried to talk to a dog. Will they communicate correctly? Of course not! They each use their own expression, and do not understand each other.

Solution?

The only solution is to have a common communication standard, and if they use a mutually understandable way to express their ideas, then the problem is solved.

Looking back, we will find that any two different systems want to interact normally, they must follow a common standard of interaction (such as Network Communication protocol HTTP, TCP/IP, etc., translator Note).

Xml

XML or Extensible Markup Language is a specification that we need to comply with when we transmit data (messages). In the internet world, "interaction" occupies an important position, especially among the two different systems.

XML is a data transmission specification, and the data in the Internet can be transmitted according to this specification. XML can be understood by almost every technology (system, platform).

XML A simple example of

For example, we need to transfer "Customer information (customer name, address and age)" On the Internet, first we need to use XML to represent the customer data

The following is an XML that represents multiple customer data

XML What are the drawbacks?

There are two main disadvantages of XML:

• difficult to parse . For some lightweight technologies like JavaScript, XML parsing is not simple.
• data Redundancy . Looking at the XML example of the customer information above, we can see that there are a lot of unnecessary tags present. XML is a lot more redundant than the JSON we're going to talk about next.

What is JSON ?

JSON is another standard for exchanging data between different platforms (systems, technologies).

JSON how to represent data?

It represents data in much the same way as JavaScript objects

JSON How do I represent a data collection?

JSON and JavaScript is the object a thing?

Certainly not the same. JSON is a way for us to represent data (passing data), while JavaScript objects are variables that store data in memory. There is no direct relationship between them, and JSON is called "JavaScript Object Notation" because they are very similar in structure.

JSON What are the advantages?

• JSON is very concise, it consists of a series of "key/value", but there are a lot of redundant tags in XML. JSON is more lightweight than XML.
• As with XML, JSON is platform-independent. JSON data can be recognized by almost all technologies (platforms, systems).
• Data expressed in JSON can be more easily converted to JavaScript objects (because it is similar in structure), so it is easier for JavaScript scripts to handle JSON.

experiment Three: the JSON string conversion to JavaScript Object

The first step. As before, create an HTML page.

Step two. Define two JSON strings in the following way

Simple JSON string:

A JSON string that contains multiple customer information:

Step three. Use the Json.parse method in JavaScript to convert a JSON string into a JavaScript object

Fourth step. Access properties in JavaScript objects in the following way

Fifth step. Save the HTML file and open the view using your browser

Note: In the actual development process, in different systems (platforms), the JSON string may be converted to a variety of different data types, such as ASP. , WCF , JAVA and so on.

Fortunately, there are some techniques that can automatically convert JSON strings. For example, when we send a JavaScript object directly, it is automatically converted to a JSON string, sent to the server, then the server side automatically converts the JSON string to the server-side data type, and vice versa.

Each subsequent experiment is a validation of the JSON application in various Microsoft technologies. In JavaScript code, we used jquery.

Initialization preparation:

We define a C # class called the Customer class

ASP. NET Web Forms in the JSON

in ASP. NET Web forms, we are going to use the HTTP handlers (ashx file).

experiment Four: Get request-javascript Request JSON Data

The first step. Create a web App

Step two. Create an HTTP Handler

Right-click the project, tap Add > New Item, create a new ashx file, name the CUSTOMERWEBFORM.ASHX

Step three. Writing code in the Ashx file

Add the following code to the default ProcessRequest method:

• Create a Customer object

　　

• Convert the created Customer object to a JSON string using System.Web.Script.Serialization.JavaScriptSerialier

　　

• Change the Response.ContentType from the default Text/plain to Text/json

　　

• Writes the JSON string to the response output stream

　　

Fourth step. Writing code for the client (browser) to request JSON data

• Add a new item to the project, create a new ASPX page, add a jquery reference to the ASPX page

　　

• Add a button to the page to bind it to a point-and-click event

　　

• Add the <Script> tag inside the <HEAD> tag and add the following code

　　

Fifth step. Perform the test

Click F5 to run the app, click the button in the page to view the output

Experiment Five: Post request–javascript Send JSON Data

The first step. Based on the project of Experiment Four, create a customerpost.ashx file

Step two. Get JSON sent by the client in the ProcessRequest method

Step three. Writing the client (browser) code to send JSON

• Add another button to the original ASPX page

　　

• Add the following JavaScript script to the <Script> tab

　　

Fourth step. Perform the test

Press F5 to run the app, click on the newly added button to view the output

Now we come to the conclusion that

• How to establish communication between JavaScript and Web Forms;
• How JSON data is passed between JavaScript and Web forms.

Let's try to do the same thing in ASP.

ASP . NET MVC in the JSON

Experiment Six: Get request–javascript Request JSON Data

The first step. Create an MVC4 application

Step two. Create a controller and action method

• Add a controller named Jsontestcontroller
• Add an action method named index

　　

• Add an action method named Jsondata
• Create a Customer object in the Jsondata method and initialize the property
• The JSON method of the base class is called in the Jsondata method, and the method returns a Jsonresult object that converts the customer object to a JSON string

　　

Step three. Add code to request JSON data at the client (browser)

• Right-click the action named Index and select Add view to create a view for it named index

　　

• As you do in Web Forms

Referencing jquery in view

Add a button and bind a point-click event

Add the following JavaScript code to the pages <script> tags

　　

Fourth step. Run the test

Press F5 to run the app

experiment Seven: Post request–javascript Send JSON Data

The first step. In the same controller as the original project, create an action method named Jsonpost

Step two. Writing code for the client (browser) to send JSON data

• Add another button to the original view (ASPX page)

　　

• Add the following JavaScript code to the <script> tab

　　

Note: In ASP . NET MVC does not require you to explicitly place JavaScript object into JSON string, and vice versa. These work systems are automatically done internally by default.

Step three. Run the test

Press F5 to run the app, click button to view the output

WCF in the JSON

Next, we use WCF REST for server-side technology.

experiment Eight: Get request–javascript Request JSON Data

First step. Create a WCF Project

The second step is to remove unnecessary files.

Remove IService1.cs and Service1.svc files

Step three. Create a new service

Right-click on the project and tap Add > New Item. Select the WCF Service, named Jsontest. This process creates two new content in the project, one is IJsonTest.cs (service agreement) and the other is jsontest.svc (specific service).

Fourth step. Create an Operation protocol

Open the IJsonTest.cs file and add a method named Getjsondata

Fifth Step. Implementing the Operation

Open the Jsontest.svc file to implement the Getjsondata method

Sixth step. Create a Rest node

• Open the Web. config configuration file
• Locate the System.ServiceModel node

　　

• Add a new service tag inside the node, create service tags inside the newly added tags, point to the services we just created

　　

• Configure as follows in the newly added service node

　　

Seventh step. Add the WebInvoke property to the Getjsondata method

Eighth step. Write code that requests JSON data in the client (browser)

• Create a new HTML file named Wcfrestclient.html and refer to jquery in the page
• As with the previous experiments, add a button to the page and bind the point-and-click event

　　

Nineth step. Run the test

Press F5 to run, open wcfrestclient.html page, click button

Experiment Nine: Post request–javascript Send JSON Data

First step. Create a new Operation protocol

Add a new method to the IJsonTest.cs, named Postjsondata

Step two. Implementing the Operation

Open the Jsontest.svc file to implement the newly added Postjsondata method

Step three. Add the WebInvoke property to the Postjsondata method

Fourth step. Write the code that sends the JSON in the client (browser)

• On the original wcfrestclient.html page, add a button, bind the point click event
• Write the following JavaScript code in the <script> tab

　　

Note that you are no longer using the $.post method, but instead use $.ajax. Because we need to set the ContentType property to Application/json. $.post is a package of $.ajax, without $.ajax flexibility.

Fifth step. Run the test

Press F5 to run the app

Web API in the JSON

We know that WCF rest allows us to create HTTP services, but the real purpose is to support SOA. In Microsoft technology, we can also use the ASP. NET Web API to create HTTP services.

I'll focus on Web APIs and WCF Rest in the future. This time we will focus on the interaction between Webapi and JavaScript.

Experiment Ten: Get request–javascript Request JSON Data

The first step. Creating a Web API Project

Open Visual Studio, click File > New > Project, and select the ASP. MVC4 Project. In the Template selection dialog box, select Webapi, click OK

The second step is to remove all unnecessary files.

Remove all existing Controller,view and CSS files.

Step three. Create Apicontroller

• Right-click Controller, select Add >controller
• In the Add Controller dialog box, type a name, such as Jsoncontroller
• Select a blank API controller template
• Click OK

Fourth step. Create an Action method

You will find that the base class of Jsoncontroller is Apicontroller (not controller, translator), then add a new action method named get in the Jsoncontroller class

Fifth step. Write JavaScript code that requests JSON data in the client (browser)

• Create a new controller, named Testingcontroller. Note that the testingcontroller here are no longer derived from Apicontroller.
• Add a new action method named index in Testingcontroller

　　

• Right-click the action method named index to add a view to it, named index
• Referencing jquery in a newly created view
• Add a button to the newly created view, bind the point-and-click event
• Write the following JavaScript code in the <script> tab

　　

Sixth step. Run the test

Press F5 to run the program

Lab 11: Post request–javascript Send JSON Data

The first step. Add a new action method named post to the above Jsoncontroller

The second step. Write the code that sends the JSON data in the client (browser)

• Add a button on the original view page to bind the point-and-click event
• Add the following JavaScript script to the <script> tab

　　

Step three. Run the test

Finally, we tested the JSON application in all Microsoft-related technologies.

Summarize

Through this article, we have learned the concept of JSON, the advantages of JSON and its application in Microsoft technology.

Transferred from: http://www.cnblogs.com/xiaozhi_5638/p/4185223.html

Go JSON and Microsoft Technologies (translation)