【 역 】 MVC 3 20 개 비법 - (13) Ajax Helper 를 사용 하여 사용자 체험 향상
23301 단어 Ajax
링크 를 클릭 하면 모든 웹 페이지 가 다시 불 러 옵 니 다.특히 작은 내용 만 업데이트 되 어야 할 때 느 린 과정 으로 느껴 진다.
해결 방안
이전에 만 든 HTML. ActionLink 를 업데이트 하여 ajax 도움말 류 를 호출 합 니 다.Ajax. ActionLink 는 변 화 된 내용 만 다시 불 러 옵 니 다.
토론 하 다.
MVC 는 몇 가지 기 똥 찬 도움 류 를 제공 했다.지금까지 이 책 에는 HTML 헬 퍼 가 광범 위 하 게 활용 됐다.과거 에 만 든 모든 view 에서 HTML helper 는 적어도 한 번 사용 한 적 이 있 습 니 다.이 비법 에 서 는 북 / Index 의 HtmlHelper 클래스 를 AjaxHelper 클래스 로 교체 합 니 다.
Ajax 를 실현 하려 면 약간의 추가 설정 이 있어 야 사용 할 수 있 습 니 다.일반적으로 나 는 이 추가 적 인 일 을 발견 하면 개발 자 들 이 그것 을 사용 할 생각 을 단념 할 수 있다.저 는 여러분 에 게 추가 설치 설정 이 가치 가 있다 는 것 을 알려 드 리 겠 습 니 다. 왜냐하면 좋 은 점 은 더 좋 은 사용자 체험 을 얻 었 기 때 문 입 니 다. 이것 은 매우 노력 할 만 한 가치 가 있 습 니 다.
절 차 는 웹. config 에서 시작 합 니 다.두 개의 중요 한 부분 을 true 로 설정 합 니 다. Client ValidationEnabled 와 Unobtrusive JavaScriptEnabled.
번역자: 원본 에서 코드 가 웹. config 파일 전 체 를 도 입 했 습 니 다.우 리 는 app Settings 노드 에서 이 두 keys 를 찾 을 수 있 습 니 다.
<appSettings>
<add key="webpages:Version" value="1.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>다음 단 계 는 우리 가 몇 개의 자바 script 파일 을 도입 하 는 것 이다.거의 모든 view 를 만 들 때 인용 하기 때문에 shared layot 폴 더 에서 이 일 을 완성 해 야 합 니 다.Views / shared /Layout. cshtml 파일 의 < head > 탭 에 있 습 니 다.자 바스 크 립 트 파일 2 개 를 도입 합 니 다. 코드 는 다음 과 같 습 니 다.
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
</head>이 파일 들 은 기본 MVC 3 프로그램 에 자동 으로 포 함 됩 니 다.(번역자: scripts 폴 더 에서 그들 을 찾 을 수 있 습 니 다).이상 의 절 차 는 AJAX 의 핵심 설정 을 완성 합 니 다.다음은 북 / index view 를 업데이트 해 야 합 니 다.다음 예 에서 filter link 세 개 와 sortable header link 는 Ajax. ActionLink 로 Html. ActionLink 를 교체 합 니 다. 코드 는 다음 과 같 습 니 다.
@model PagedList.IPagedList<MvcApplication.Models.Book>
@if (IsAjax)
{
Layout = null;
}
<h2>
Title</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<p>
Show:
@if (ViewBag.CurrentFilter != "")
{
@Ajax.ActionLink("All", "Index",
new
{
sortOrder = ViewBag.CurrentSortOrder,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
}
else
{
@:All
}
|
@if (ViewBag.CurrentFilter != "NewReleases")
{
@Ajax.ActionLink("New Releases", "Index", new
{
filter = "NewReleases",
sortOrder = ViewBag.CurrentSortOrder,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
}
else
{
@:New Releases
}
|
@if (ViewBag.CurrentFilter != "ComingSoon")
{
@Ajax.ActionLink("Coming Soon", "Index", new
{
filter = "ComingSoon",
sortOrder = ViewBag.CurrentSortOrder,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
}
else
{
@:Coming Soon
}
</p>
@using (Html.BeginForm())
{
@:Search: @Html.TextBox("Keyword")<input type="submit" value="Search" />
}
@Html.Partial("_Paging")
<table>
<tr>
<th>
@Ajax.ActionLink("Title", "Index", new
{
sortOrder = ViewBag.TitleSortParam,
filter = ViewBag.CurrentFilter,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
</th>
<th>
@Ajax.ActionLink("Isbn", "Index", new
{
sortOrder = ViewBag.IsbnSortParam,
filter = ViewBag.CurrentFilter,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
</th>
<th>
Summary
</th>
<th>
@Ajax.ActionLink("Author", "Index", new
{
sortOrder = ViewBag.AuthorSortParam,
filter = ViewBag.CurrentFilter,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
</th>
<th>
Thumbnail
</th>
<th>
@Ajax.ActionLink("Price", "Index", new
{
sortOrder = ViewBag.PriceSortParam,
filter = ViewBag.CurrentFilter,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
</th>
<th>
@Ajax.ActionLink("Published", "Index", new
{
sortOrder = ViewBag.PublishedSortParam,
filter = ViewBag.CurrentFilter,
Keyword = ViewBag.CurrentKeyword
},
new AjaxOptions { UpdateTargetId = "main" })
</th>
<th>
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Isbn)
</td>
<td>
@Html.DisplayFor(modelItem => item.Summary)
</td>
<td>
@Html.DisplayFor(modelItem => item.Author)
</td>
<td>
@Html.DisplayFor(modelItem => item.Thumbnail)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.Published)
</td>
<td>
@Html.ActionLink("Edit","Edit", new { id = item.ID }) |
@Html.ActionLink("Details","Details", new { id = item.ID }) |
@Html.ActionLink("Delete","Delete", new { id = item.ID })
</td>
</tr>
}
</table>
@Html.Partial("_Paging")번역자: 위의 코드 가 녹색 으로 표 시 된 곳 이 바로 우리 가 업데이트 한 곳 입 니 다.
우리 가 하 는 관건 적 인 일 은 ActionLink 의 마지막 매개 변수 에 Ajax Options 를 추가 하 는 것 이다.이 는 사용자 가 이 AJAX link 를 클릭 하면 AJAX 가 요청 한 결 과 는 id 가 'main' 인 html 요 소 를 업데이트 한 다 는 뜻 이다.share 폴 더 에서 초기 에 우리 가 수정 한 layot 파일 을 보면 < div > id 가 "main" 이라는 것 을 알 수 있 습 니 다.실제로 이 div 는 @ Renderbody () 의 용기 입 니 다. view 가 출력 하 는 곳 입 니 다.
또 하나의 중요 한 것 은 우리 가 view 의 맨 위 에 AJAX 가 완 성 했 는 지 의 검 사 를 추가 한 것 이다.AJAX 를 통 해 요청 이 완료 되면 layot 는 null 로 설정 합 니 다.이것 은 매우 중요 한 요소 입 니 다. 만약 그것 이 완성 되 지 않 았 다 면, Ajax 가 요청 한 결 과 는 view 의 result 뿐만 아니 라, 전체 layot 도 포함 되 며, layot 를 교체 할 필요 가 없 기 때 문 입 니 다.
이 예제 를 완성 하기 위해 share 폴 더 의Paging 도 Ajax helper 를 사용 하여 업데이트 해 야 합 니 다. 코드 는 다음 과 같 습 니 다.
<p>
@if (Model.HasPreviousPage)
{
@Ajax.ActionLink("<< First", "Index", new
{
page = 1,
sortOrder = ViewBag.CurrentSortOrder,
filter = ViewBag.CurrentFilter
},
new AjaxOptions { UpdateTargetId ="main" })
@Html.Raw(" ");
@Html.ActionLink("< Prev", "Index", new
{
page = Model.PageNumber - 1,
sortOrder = ViewBag.CurrentSortOrder,
filter = ViewBag.CurrentFilter
}, new AjaxOptions { UpdateTargetId ="main" })
}
else
{
@:<< First
@Html.Raw(" ");
@:< Prev
}
@if (Model.HasNextPage)
{
@Ajax.ActionLink("Next >", "Index", new
{
page = Model.PageNumber + 1,
sortOrder = ViewBag.CurrentSortOrder,
filter = ViewBag.CurrentFilter
}, new AjaxOptions { UpdateTargetId ="main" })
@Html.Raw(" ");
@Ajax.ActionLink("Last >>", "Index", new
{
page = Model.PageCount,
sortOrder = ViewBag.CurrentSortOrder,
filter = ViewBag.CurrentFilter
}, new AjaxOptions { UpdateTargetId ="main" })
}
else
{
@:Next >
@Html.Raw(" ")
@:Last >>
}
</p>현재 사용자 가 링크 를 클릭 하여 북 목록 을 바 꿀 때 전체 페이지 는 다시 불 러 오지 않 고 도서 목록 만 업 데 이 트 됩 니 다.이것 은 더욱 좋 고 빠 른 사용자 체험 을 제공 했다.
그리고 클 라 이언 트 가 자바 script (예 를 들 어 검색엔진 접근) 을 지원 하지 않 으 면 이 링크 는 이전 처럼 작 동 합 니 다.전체 페이지 를 다시 불 러 옵 니 다.
따로 참고 하 시기 바 랍 니 다
AjaxHelper
좋은 웹페이지 즐겨찾기
