jquery Ajax(.net 인자를 object형식으로)

요즘에는 .net과 java 할것없이 모든 언어에서 Jquery를 많이 사용하고 있습니다.
java에서의 Jquery의 사용은 인터넷에 여러 사람들이 많이 올려놓았지만 .net에서의 작업은 많은 정보를 찾기가 쉽지 않고 특히, object 형식으로 배열화된 Json을 받을 수 있는 방법은 거의 찾기 어려워 이번에는 .net 인자를 object형식으로 jquery 사용하여 Ajax 통신을 하는 방법에 대해서 알아보겠습니다.

먼저 html쪽의 소스를 아래와 같이 사용합니다.
저는 Ajax 통신으로 가져온 리스트 정보를 .net의 GridView에 매핑시켜 보여주었습니다. div안에 table를 사용하셔도 됩니다.
그리고 Ajax 통신은 자바스크립트 쪽을 보시면 되겠습니다.




<script type="text/javascript">
<!--
var retuenTotal;
    var retuenTotal_;

function fnTotalPrice(object, id, type) {
var tr = object.parentNode.parentNode;

retuenTotal = $(tr).find("#TOTAL");
        retuenTotal_ = $(tr).find("#TOTAL_");

var popConstructID = $("#<%= this.FLD_CONSTRUCTID.ClientID%>").val();

var items = [
{ INPUTRESOURCEID: id, INPUTRESOURCETYPE: type, CONSTRUCTID: popConstructID }
];

var options = {
type: "POST",
url: window.location.pathname + "/GetTotal_Price",
data: "{'items':" + JSON.stringify(items) + "}", // array to string fixes it *
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
var parsed = $.parseJSON(response.d);

if (parsed != null) {
$.each(parsed, function (i, jsonData) {
var total = jsonData.TOTAL;
if (total == null || total == "")
total = 0;
else
total = parseFloat(total.replace(/,/g, ''));

var controlVolume = $(retuenVolume).val();
if (controlVolume == null || controlVolume == "")
controlVolume = 0;
else
controlVolume = parseFloat(controlVolume.replace(/,/g, ''));

$(retuenTotal).val(fnGetNumberWithComma(total + controlVolume, "d"));
$(retuenTotal_).val(jsonData.TOTAL);
});
}
},
error: function (msg) { alert(msg.d); },
complete: function (data) {
retuenTotal = null;
retuenTotal_ = null;
}
};
jQuery.ajax(options);
}
//-->
</script>



다음은 GridView 부분 입니다.

<asp:GridView ID="gvListMaterial" runat="server" AutoGenerateColumns="False" DataKeyNames="MATERIALID"
 ShowHeaderWhenEmpty="True" Style="margin-top: 0px" Width="100%" CellPadding="0"
 CssClass="table_content btn_margin" PageSize="12" ForeColor="#333333" GridLines="both"
 HorizontalAlign="Center" OnRowDataBound = "RowDataBound_Material" ShowFooter="true">
 <AlternatingRowStyle BackColor="White" />
 <Columns>
  <asp:TemplateField HeaderText="자재명" HeaderStyle-CssClass="cell_center" HeaderStyle-Width="17%">
   <ItemTemplate>
    <input type="text" id="INPUTRESOURCENAME" name="INPUTRESOURCENAME" value='<%# Eval("INPUTRESOURCENAME") %>' class="search_text textname" ReadOnly="true" maxlength="100" style="width:60%;" />
    <input type="hidden" id="INPUTRESOURCEID" name="INPUTRESOURCEID" value='<%# Eval("INPUTRESOURCEID") %>' />
    <img src="/images/btn_popsrc.gif" class="popsrc_align" id="INPUTRESOURCE_SEARCHBTN" alt="" onclick="fnSearchPopup(this, 1, 'gvListMaterial');"/>
    <img src="/images/btn/eraser.png" class="popsrc_align" id="CLIENTDELBTN" alt="" onclick="fnSearchPopup(this, 2, 'gvListMaterial');"/>

    <input type="hidden" id="MATERIALID" name="MATERIALID" value='<%# Eval("MATERIALID") %>' />
    <input type="hidden" id="STATUS_GUBUN" name="STATUS_GUBUN" value='' />
   </ItemTemplate>

  <asp:TemplateField HeaderText="누계수량" HeaderStyle-CssClass="cell_center" HeaderStyle-Width="10%">
   <ItemTemplate>
    <input type="text" id="TOTAL" name="TOTAL" value='<%# Eval("TOTAL") %>' ReadOnly="true" class="search_text_number textname" style="width:90%;" />
    <input type="hidden" id="TOTAL_" name="TOTAL_" value='<%# Eval("TOTAL_") %>' />
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
 <EditRowStyle BackColor="#ffffff" />
 <EmptyDataRowStyle CssClass="data_AC row25" />
 <EmptyDataTemplate>
  표시 할 정보가 없습니다.
 </EmptyDataTemplate>
 <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
 <HeaderStyle BackColor="#eaecf3" Font-Bold="True" ForeColor="#374994" />
 <PagerStyle HorizontalAlign="Center" />
 <RowStyle BackColor="#ffffff" CssClass="data_AC" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <SortedAscendingCellStyle BackColor="#F5F7FB" />
 <SortedAscendingHeaderStyle BackColor="#6D95E1" />
 <SortedDescendingCellStyle BackColor="#E9EBEF" />
 <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>



끝으로 넘어온 Json 인자 정보를 .aspx.cs에서 object로 받는 부분 입니다.
 using System.Collections.Generic;
using System.Web.Script.Serialization;


[System.Web.Services.WebMethod]
public static string GetSum_Volume_Price(object items)
{
 string result = string.Empty;

 // 리스트 형식
 List<object> lstItems = new JavaScriptSerializer().ConvertToType<List<object>>(items);

 for (int i = 0; i < lstItems.Count; i++)
 {
  Biz.FW.FWXmlAutoBiz oBiz = null;
  Hashtable ht = new Hashtable();
  DataSet dsData = null;

  foreach (KeyValuePair<string, object> kvp in (IEnumerable)lstItems[i])
  {
   ht.Add(kvp.Key, kvp.Value.ToString());
  }

  ht.Add("PLAN_YN", "N");

  oBiz = new Biz.FW.FWXmlAutoBiz();
  dsData = oBiz.XmlGetData("프로시저명 호출", ht);

  if (dsData != null && dsData.Tables.Count > 0 && dsData.Tables[0].Rows.Count > 0)
  {
   var list = new List<Dictionary<string, object>>();

   foreach (DataRow row in dsData.Tables[0].Rows)
   {
    var dict = new Dictionary<string, object>();

    foreach (DataColumn col in dsData.Tables[0].Columns)
    {
     dict[col.ColumnName] = (Convert.ToString(row[col]));
    }

    list.Add(dict);
   }

   // DB에서 select된 결과를 Json 구조의 string으로 변환하여 return 시킴
   JavaScriptSerializer serializer = new JavaScriptSerializer();
   result = serializer.Serialize(list);
  }
 }

 return result;
}

이상으로 jquery Ajax(.net 인자를 object형식으로)에 대해서 알아보았습니다.