asp.net mvc 의 jquery post 로 부분바인딩 처리하기

 

 

 

 

1. javascript 단에서 jquery 의 post 로 컨트롤러를 호출한다.

 

        function GetAddressList(deptID, searchText)
        {
            var p = {
                DeptID: deptID,
                SearchText: searchText
            }

 

            $.post("@Url.Action("GetUserList", "AddressBook", new { area = "TaskSupport" })", { p: GetJsonToEncParam(p) },

            function (htmlStr) {
                $(".userList").html(htmlStr);
            });
        }

 

 

 

2. 호출한 컨트롤러는 PartialViewResult 로 반환하도록 하며, PartialView() 함수를 통해 파샬 뷰인 "SearchUserPV" 를 호출하고 model 인 users 를 전달할 수 있다.

 

 

public PartialViewResult GetUserList(string p)
{

var users = dal.SelUserDept(CompanyID, true, condition);            
return PartialView("SearchUserPV", users);

}

 

 

3. 파샬 뷰인 "SearchUserPV" 를 살펴보면, 모델과 간단히 특정 부분의 html 을 생성하는 것을 볼 수 있습니다.

 

 

 

@model List<Intra.Models.ViewUserInfo>

 

@foreach (var item in Model)
{
    <div class="col-lg-4">
        <div class="contact-box">
            <a href="#">
                <div class="col-sm-4">
                    <div class="text-center">
                        @Html.UserDisplayPhoto(item.PhotoPath, "img-circle m-t-xs img-responsive", "width:85px !important;  height:85px !important")
                        <div class="m-t-xs font-bold">@item.RankName @*/ @item.DutyName*@</div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <h3><strong>@item.Name</strong></h3>
                    <p><i class="fa fa-map-marker"></i> @item.DeptName</p>
                    <address>
                        <strong>@item.RootDeptName</strong><br>
                        <abbr title="Email">E: </abbr>@item.Email<br>
                        <abbr title="Tel">T: </abbr>@item.OfficePhone<br>
                        <abbr title="Phone">P: </abbr>@item.PhoneNumber
                    </address>
                </div>
                <div class="clearfix"></div>
            </a>
        </div>
    </div>
}

 

 

이 파샬뷰가 랜더링 되면, 이는 jquery 의 post 의 결과값으로 html 이 전달되어 해당 dom 에 바인딩 합니다.

 

 

function (htmlStr) {
          $(".userList").html(htmlStr);
 });