（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教程