（13）使用Ajax Helper 提升用戶體驗

時間  2019-11-19
標籤 使用 ajax helper 提升 用戶 體驗 欄目 Ajax 简体版
原文   原文鏈接

問題javascript

當你點擊連接時，整個的網頁都被從新加載。尤爲是你僅僅一小點內容須要被更新時，這將被感受是一個很慢的過程。css

解決方案html

更新以前建立的HTML.ActionLink 去調用ajax 幫助類。Ajax.ActionLink 僅僅去從新加載那些發生變化的內容。java

討論jquery

MVC提供了幾個給力的幫助類。到目前爲止，這本書中已經普遍的應用了HTML Helper。在過去建立的全部view中，HTML helper至少都使用過一次。在這個祕方中，咱們將使用AjaxHelper類替換掉Book/Index中的HtmlHelper 類。web

實現Ajax須要一點額外的設置纔可使用。一般狀況下我發現這個額外的工做，能夠打消開發人員使用它的念頭。我要讓你們知道，額外的安裝設置是值得的，由於帶來的好處是得到了更好的用戶體驗，這是很是值得努力去作的。ajax

步驟從web.config開始。2個關鍵的地方要被設置成true. ClientValidationEnabled 和UnobtrusiveJavaScriptEnabled。app

譯者：原書中代碼引入了整個web.config文件。咱們只須要到appSettings節點下便可找到這兩個keys。佈局

雙擊代碼全選
1
2
3
4
5
< appSettings >
   < add key = "webpages:Version" value = "1.0.0.0" />
   < add key = "ClientValidationEnabled" value = "true" />
   < add key = "UnobtrusiveJavaScriptEnabled" value = "true" />
</ appSettings >
 

接下來的步驟是咱們要引入幾個javascript 文件。咱們要在裏shared 的layout文件夾裏完成這件事，由於幾乎咱們建立全部的view時都會引用它（佈局模板）。在Views/Shared /_Layout.cshtml 文件的<head>標籤中。咱們引入2個javascript 文件，代碼以下：spa

雙擊代碼全選
1
2
3
4
5
6
< 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 >
 

這些文件被自動的包含在基礎MVC3應用程序中。（譯者：你能夠從scripts文件夾中找到他們）。以上的步驟完成AJAX的核心配置。接下來，咱們要更新Book/index view。在下邊的例子裏，三個filter link和sortable header link將用Ajax.ActionLink 替換Html.ActionLink.代碼以下：

雙擊代碼全選
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@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
         }
     &nbsp; | &nbsp;
     @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
         }
     &nbsp; | &nbsp;
     @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")
 

譯者：上邊代碼標綠的地方就是咱們更新的地方。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程