（13）使用Ajax Helper 提高用户体验

最新推荐文章于 2021-08-05 14:38:43 发布
最新推荐文章于 2021-08-05 14:38:43 发布
阅读量160 收藏
点赞数
文章标签： 测试 javascript ViewUI
原文链接：http://www.cnblogs.com/lyaxx1314/p/3603504.html
版权

问题

当你点击链接时，整个的网页都被重新加载。尤其是你仅仅一小点内容需要被更新时，这将被感觉是一个很慢的过程。

解决方案

更新之前创建的HTML.ActionLink 去调用ajax 帮助类。Ajax.ActionLink 仅仅去重新加载那些发生变化的内容。

讨论

MVC提供了几个给力的帮助类。到目前为止，这本书中已经广泛的应用了HTML Helper。在过去创建的所有view中，HTML helper至少都使用过一次。在这个秘方中，我们将使用AjaxHelper类替换掉Book/Index中的HtmlHelper 类。

实现Ajax需要一点额外的设置才可以使用。通常情况下我发现这个额外的工作，可以打消开发人员使用它的念头。我要让大家知道，额外的安装设置是值得的，因为带来的好处是获得了更好的用户体验，这是非常值得努力去做的。

步骤从web.config开始。2个关键的地方要被设置成true. ClientValidationEnabled 和UnobtrusiveJavaScriptEnabled。

译者：原书中代码引入了整个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 文件，代码如下：

双击代码全选
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")
 

译者：上边代码标绿的地方就是我们更新的地方。

转载于:https://www.cnblogs.com/lyaxx1314/p/3603504.html

njit_peiyuan
关注
ASP.NET MVC --- AjaxHelper的使用
じ☆ve暧メ晴的博客
06-01 415
AjaxHelper概述 基于jQuery实现Ajax 需要大量的js内容 一般都会通过$.ajax(),$.get(),$.post()提交 AjaxHelper开发 和htmlHelper对应，辅助输出具有Ajax功能的视图 视图类型包含名为Ajax的AjaxHelper类型对象 AjaxHelper成员 主要属性 说明 string UpdateTargetId 服务器响应来更新的DOM元素的ID string Confirm 提交
MVC Ajax Helper或Jquery异步加载部分视图
11-23
废话不多说了，直接给大家贴代码了。 Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } public string Name { get; set; } } } 通过jQuery异步加载部分视图 Home/Index.cshtml视图中： @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div> <
ajax-helper:一个使用 HTML5-data 属性的简单 jQuery AJAX 辅助插件
06-17
Ajax 助手 v1.0.2 一个简单的 jQuery AJAX 帮助插件，它使用 HTML5 数据属性。 目录 带有确认的完整（人为）示例！ 确认对话框等，或： before事件及其冒险经历。 结果事件，或： success和error事件。 有效负载或：如何向我的后端获取额外数据？ 路线图和贡献 安装 带凉亭 只需运行bower install --save ajax-helper 手动 虽然我们强烈推荐像 Require.js 这样的 AMD 模块加载器，但你绝对可以使用ajax-helper.js而不用： 将ajax-helper.js文件放在您的供应商 javascript 目录中或任何地方。 在 HTML 中加载ajax-helper.js之前，请确保加载 jQuery。 用法 你基本上可以将ajax-helper.js附加到任何东西上。 它只是一种语法糖
MVC 之AjaxHelper
开源控Meteor的博客
03-14 1467
除了传统的Ajax方法之外，MVC提供了AjaxHelper类： Helper method Description Ajax.ActionLink Creates a hyperlink to a controller action that fires an Ajax request when clicked Ajax.RouteLin
Ajax Helper
johncools的博客
02-19 1429
基于AjaxHelper的企业门户网站构架示例深度解析Asp.Net2.0中的Callback机制摘要: 看到不少朋友最近在写使用callback的文章，也有点手痒，也来涂鸦一下，挖掘挖掘callback的潜力。callback的一般使用方法还算简单，直接参照msdn的帮助和范例就足够了。但是想要真正用好、用精，或者想开发一些基于callback机制的WEB组件，那么，就要先深
【译】MVC3 20个秘方-（13）使用Ajax Helper 提高用户体验
12-01 129
问题 当你点击链接时，整个的网页都被重新加载。尤其是你仅仅一小点内容需要被更新时，这将被感觉是一个很慢的过程。 解决方案 更新之前创建的HTML.ActionLink 去调用ajax 帮助类。Ajax.ActionLink 仅仅去重新加载那些发生变化的内容。 讨论 MVC提供了几个给力的帮助类。到目前为止，这本书中已经广泛的应用了HTML Helper。在过去创建的所有view...
AjaxHelper简介
weixin_30830327的博客
05-03 144
在Asp.Net MVC中提供了AjaxHelper类： Ajax.ActionLink 创建一个超链接，点击时，使用Ajax提交数据到一个指定的控制器 Ajax.RouteLink 和ActionLink类似，只不过不需要指定actionName，使用最多的场景是自定义的IController，里面没有action ...
C# MVC中的Ajax应用：无刷新用户体验实现指南
![Ajax](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b43ec527f244592a14cbc579c6480b7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp) ...而Ajax（Asynchronous JavaScript and XM
handlebars-helper：简化Handlebars模板的可重用与 AJAX 购买
而 handlebars-helper 则是增强 Handlebars 功能...总之，handlebars-helper 是一个强大且实用的工具，通过它开发者可以更加高效和可维护地在前端项目中使用 Handlebars 模板，从而提高开发效率并优化最终用户的体验。
ASP.NET多用户博客系统：融合AJAX与三层架构
AJAX能够提高用户体验，例如，当用户提交评论时，他们可以立即看到评论出现在页面上而无需等待整个页面的重新加载。 至于三层架构，这个模式通过将应用程序逻辑分层，简化了软件的开发和维护。每层都只与其相邻的层...
PageHelper AJAX MVC 分页封装（初体验）
07-28
PagerHelper 公具类 CommonPagination.ascx 只负责显示页码 个人感觉MVC 不怎么样..I don't bird it.
AjaxHelper使用范例
Teddy's Knowledge Base
06-16 500
前两天发布了一个《.Net环境下基于Ajax的MVC方案》，没想到被转载到优快云首页了，呵呵~不过，有好几个朋友调试那段代码出错，我也不知什么原因，因为我在好几台机器都运行正常的，这里我再提供几个基于前文所述方案的范例程序，有什么问题请留言！AjaxHelperExample下载地址使用说明：下载的压缩包内包含一个目录AjaxHelperExample和一个RAR文件AjaxHelpe
mvc ajax helper,MVC 之AjaxHelper
weixin_34530727的博客
08-05 200
MVC 之AjaxHelper2020-05-26编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了MVC 之AjaxHelper，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。除了传统的Ajax方法之外，MVC提供了AjaxHelper类：Helper methodDescriptionAjax.ActionLinkCreates a hyperli...
ASP.NET MVC2中三种ajax实现方式-使用AjaxHelper
华子的技术博客
04-28 831
<br /><%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><br /><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"><br /> IndexAjaxHelp<br /></asp:Content><br
几个AjaxHelper范例程序的在线演示
Teddy's Knowledge Base
06-29 597
http://teddy.cn/AjaxHelperExample/http://teddy.cn/AjaxHelperExample2/http://teddy.cn/AjaxPhoto/
Ajax实现查询助手（Query Helper）
xsuo
09-01 155
Ajax实现查询助手（Query Helper） 1 概述 1.1 查询助手功能介绍 在通常的BS软件项目中，查询助手使用频率非常高，其功能是点击图标，页面上元素的值为条件，到后台查询结果，弹出查询结果对话框，选择纪录，关闭对话框，并且把你选择的有关内容显示到父页面中指定的元素中。由于其友好的界面设计和操作性能，对用户和设计开发人员都有很大的吸引力，但存在开发效率低，复用性差，复...
（.NET进阶九）分布式图/JSON/Ajax异步/AjaxHelper
Tiger_shl的博客
06-09 326
目录 一、分布视图的使用 二、ASP.NET MVC中的Ajax 三、AjaxHelper使用 四、无刷新删除对象 一、分布视图的使用 简介 将页面中公共部分封装的视图技术，实现内容重用（和母版视图不同） 可以出现在其他视图的“任何位置”，相当于ASP.NET WEBForm中的用户控件 使用步骤 编写分布式图：和普通视图实现方式类似 在视图中使用分布视图：使用...
Codeigniter中使用AJAX实现无刷新文件上传
"这篇文章主要介绍了如何在CodeIgniter框架中实现无刷新文件上传，通过结合AJAX技术和AjaxFileUpload.js库来实现...这种实现方式结合了前端AJAX技术与后端PHP的CodeIgniter框架，提高了用户体验，减少了页面加载时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值