JQuery, JSON.NET 그리고 MVC

JSON 형태의 데이터를 C# 형태로의 변환

  

java script에서나 Netscape 진형에서 주로 사용되는 JSON 데이터 형태를 C# class로 변환 및 이를 이용한 AJAX 개발이 가능하다.  

  

먼저, C# class의 선언

view plainprint?

1. public class Company  
2.     {  
3.         public string Name { get; set; }  
4.         public string Location { get; set; }  
5.         public string Subject { get; set; }  
6.     }  

  

여기서 간단히 3개의 Input box를 갖는 View Page의 생성

view plainprint?

1. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="CompanyView.aspx.cs" Inherits="MvcJson.Views.Home.CompanyView" %>  
2. <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">  
3. Company Name : <%=Html.TextBox("CompanyName") %> <br />  
4. Company Subject : <%=Html.TextBox("Subject") %> <br />  
5. Company Location : <%=Html.TextBox("Location") %> <br />  
6. <input type="button" id="sendCompanyData" value="Send Company Data" /><br />  
7. <div id="resultArea"></div>  
8. </asp:Content>  

HttpContext를 이용해서 json data를 HTTP-POST로 전달하는 javascript

(jQuery 이용.) 

view plainprint?

1. <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.2.6.js") %>"></script>  
2. <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.toJSON.js") %>"></script>  
3. <script type="text/javascript">  
4.   $(function() {  
5.     //sending json object to controller action:  
6.     $("#sendCompanyData").click(function() {  
7.       var company = {  
8.         "Name": $("#CompanyName").val(),  
9.         "Subject": $("#Subject").val(),  
10.         "Location": $("#Location").val()  
11.       };  
12.   
13.       var encoded = $.toJSON(company);  
14.   
15.       $.ajax({  
16.         url: "/Home/ShowCompany",  
17.         type: "POST",  
18.         dataType: 'json',  
19.         data: encoded,  
20.         contentType: "application/json; charset=utf-8",  
21.         beforeSend: function() { $("#saveStatus").html("Saving").show(); },  
22.         success: function(result) {  
23.           alert(result.Result);  
24.           $("#saveStatus").html(result.Result).show();  
25.         }  
26.       });  
27.     });  
28.   });   
29. </script>  

  

데이터를 받을 Controller 작성

view plainprint?

1. public ActionResult ShowCompany()  
2.         {  
3.             if(HttpContext.Request.ContentType.Contains("application/json"))  
4.             {  
5.                 string inputContent;  
6.                 int dataLength = (int) HttpContext.Request.InputStream.Length;  
7.                 byte[] btDatas = new byte[dataLength];  
8.                 HttpContext.Request.InputStream.Read(btDatas, 0, dataLength);  
9.   
10.                 inputContent = System.Text.Encoding.UTF8.GetString(btDatas);  
11.   
12.                 var result = (Company) JavaScriptConvert.DeserializeObject(inputContent, typeof(Company));  
13.   
14.                 return Json(new { Result = string.Format("{0} : {1} : {2}", result.Name, result.Subject, result.Location) });  
15.             }  
16.             else  
17.             {  
18.                 return Json(new { Result = "This data is not json" });  
19.             }  
20.         }  

  

결론 : JSON -> C# class 변환은 매우 자유로운 편이다. 예시의 JSON이 있다면 C# class를 자동으로 작성해주는 간단한 script만 있으면 둘이 같이 사용하기가 매우 편할것 같다.