ASP.NET 비동기 호출

웹 페이지 내에서 특정 부분만 업데이트를 하기 위해 비동기 호출을 사용했었는데
그 때 사용했던 방법에 대해 정리해보려고 합니다.

Jquery AJAX Call

Microsoft Ajax 서버 컨트롤 사용

Jquery AJAX Call

jQuery.ajax() API를 사용하면 비동기 호출을 사용할 수 있다.
(jquery 1.5 보다 높은 버전을 쓰는 것이 좋을 것 같다. 1.5에서 많은 기능이 추가된 듯…)

Jquery 추가

<script type="text/javascript" src="/Source/Script/jquery-1.11.3.js"></script>

Jquery로 WebMethod 호출

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "CompanyList.aspx/GetCompanyList",
    data: '{"companyName":"' + 회사명 + '"}',
    async: false,
    success: function (response) {
        alert(response.d);
    },
    error: function (response) {
    	alert("error!");
    },
    complete : function() {
    	alert("complete!");
    }
});

호출할 WebMethod 만들기

• 리스트를 불러오기 위한 WebMethod
• Dapper를 사용해서 SELECT Query 실행
  PM> Install-Package Dapper -Version 1.50.2

• Newtonsoft.Json의 JsonConvert를 활용해서 Json 형태로 데이터 반환
  PM> Install-Package Newtonsoft.Json -Version 10.0.3

  ^{*PM : Package Manager를 통한 설치}

using System.Web.Services;
using System.Web.Script.Services;
using System.Data.SqlClient;
using System.Configuration;
using Dapper;
using Newtonsoft.Json;

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetCompanyList(string companyName)
{
    using (var db = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        var results = db.Query("SELECT * From COMPANY WHERE CompanyName = @search_com", new { search_com = companyName }).ToList();
        return JsonConvert.SerializeObject(results);
    }
}

Microsoft Ajax 서버 컨트롤 사용

두 개의 Microsoft Ajax 서버 컨트롤(ScriptManager, UpdatePanel)을 사용하면 페이지 일부분만 업데이트 할 수 있다.

리스트 화면

• ScriptManager의 EnablePartialRendering 속성값이 true 로 설정되어야 부분 페이지 업데이트가 가능합니다.
• UpdatePanel 컨트롤 내의 포스트 백 컨트롤은 비동기 포스트 백을 발생시키고 패널의 내용을 새로 고침합니다.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel ID="UpdatePanel" runat="server">
        <ContentTemplate>
            <label>검색</label>
            <asp:TextBox ID="txtSearchText" runat="server"></asp:TextBox>
            <asp:LinkButton ID="btnSearch" runat="server" OnClick="btnSearch_Click">검색</asp:LinkButton>
            <table>
                <colgroup>
                    <col style="width: 25%" />
                    <col style="width: 25%" />
                    <col style="width: 25%" />
                    <col style="width: 25%" />
                </colgroup>
                <thead>
                    <tr>
                        <th scope="col">SEQ</th>
                        <th scope="col">회사명</th>
                        <th scope="col">사업자번호</th>
                        <th scope="col">주소</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rptProject" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%# Eval("Seq") %></td>
                                <td><%# Eval("CompanyName")%></td>
                                <td><%# Eval("CompanyNO")%></td>
                                <td><%# Eval("Address")%></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

버튼 Click 이벤트

class Company
{
    public int Seq { get; set; }
    public string CompanyName { get; set; }
    public string CompanyNO { get; set; }
    public string Address { get; set; }
}

protected void btnSearch_Click(object sender, EventArgs e)
{
    using (var db = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        List<Company> results = db.Query<Company>("SELECT * From COMPANY WHERE CompanyName = @search_com", new { search_com = txtSearchText.Text }).ToList();

        rptProject.DataSource = results;
        rptProject.DataBind();
    }
}