ASP.NET MVC 实践系列4-Ajax应用
来源:互联网 发布:python代码过长换行 编辑:程序博客网 时间:2024/05/29 15:31
ASP.NET MVC 实践系列4-Ajax应用
ASP.NET MVC中支持Ajax的方式和webform中有些区别,没有了updatepanel,所以对于初学者来说在最开始应用时似乎没有在webform中简单,但实际使用上更为灵活而跟webform比较并没有增加多少复杂度。
一、ASP.NET MVC Ajax 的 Helpers
对于ASP.NET MVC中的Ajax的学习,需要重点了解Ajax.ActionLink()和Ajax.BeginForm()这两个Helper,Ajax是System.Web.Mvc.ViewPage中的属性,它返回的类型是AjaxHelper,而ASP.NET MVC中的View都是继承于System.Web.Mvc.ViewPage,所以在页面上能直接使用这两个Helper。
1、Ajax.ActionLink():向客户端输入一个链接地址,跟Html.ActionLink()很相似,当单击这个链接时可以异步调用Controller中的方法
Ajax.ActionLink()方法有许多重载,我们这里举例说明其中一个比较常用的重载:
public static string ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
linkText:是显示在客户端的文本
actionName:是Action的名字,默认情况下我们会使用当前的Controller。
routeValues:将传入到Controller中方法的参数
ajaxOptions:配置Ajax的一些选项,看完下面的例子我们再详细讲解这个配置选项。
这里先举一个简单的例子:
View:
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<%=Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) %>
<div id="results">
</div>
虽然ASP.NET MVC 的sctrpts中已经有了Ajax的脚本,但使用之前仍然还要在页面中引用。Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) 的意思是前端页面显示的文本为test,当点击test时会调用Controller中的Hello方法,参数为lfm,返回的内容会在id=results的标签中显示。
Controller:
Code
public ActionResult ActionLinkTest()
{
return View();
}
public string Hello(string name)
{
return "Hello:" + name;
}
2、ajaxOptions重要选项讲解
属性 类型 解释
Confirm string 如果指定了这个选项,当单击链接时会弹出一个确认窗口
LoadingElementId string 如果指定了这个选项,当点击链接时,会将指定的id标签内容的css改为显示状态
UpdateTargetId string 如果指定了这个选项,异步调用完之后的返回值会替换这个标签。
Confirm例子:在View中键入 <%=Ajax.ActionLink("ConfirmTest", "Hello", new { name = "lfm" }, new AjaxOptions {Confirm="你确定么", UpdateTargetId = "results" })%>
当单击ConfirmTest时会弹出如下窗口:
LoadingElementId例子:
View:
<%=Ajax.ActionLink("LoadingTest","HelloSleep",new{name="lfm"},new AjaxOptions{LoadingElementId="loading",UpdateTargetId="results"}) %>
<div id="loading" style="display: none">
Loading......
</div>
<div id="results">
</div>
Controller:
Code
public string HelloSleep(string name)
{
Thread.Sleep(2000);
return "Hello:" + name;
}
3、Ajax.BeginForm():跟Html.BeginForm()很相似,当按提交按钮时会异步的调用相应的Controller中的方法
View:
<% using (Ajax.BeginForm("Hello",
new AjaxOptions { UpdateTargetId = "myResults" }))
{ %>
<%=Html.TextBox("name") %>
<input type="submit" value="调用" />
<% } %>
<div id="myResults">
返回结果
</div>
Controller:
public string Hello(string name)
{
return "Hello:" + name;
}
public ActionResult BeginFormTest()
{
return View();
}
- ASP.NET MVC 实践系列4-Ajax应用
- ASP.NET MVC实践系列-UrlRouting
- ASP.NET MVC框架开发系列课程(8):AJAX
- ASP.NET MVC框架开发系列课程(8):AJAX
- ASP.NET MVC框架开发系列课程(8):AJAX
- ASP.NET MVC框架开发系列课程(8):AJAX
- ASP.NET MVC框架开发系列课程(8):AJAX
- asp.net mvc Partial OutputCache 在SpaceBuilder中的应用实践
- asp.net mvc中的ajax的简单应用
- asp.net mvc Ajax由应用到深入理解
- ASP.NET MVC 学习实践
- ASP.NET MVC和AJAX
- asp.net mvc ajax 例子
- asp.net mvc ajax 例子
- Asp.Net Mvc Ajax偏方
- ASP.NET MVC之Ajax
- MSDN Webcast 系列课程之《ASP.NET MVC 3 开发实践系列课程》
- Asp.net Mvc Framework 系列
- linux中的 IO端口映射和IO内存映射
- hadoop实战之分布式模式
- SqlServer获取插入数据的自增列的值
- Fix Windows 8 Metro Apps Error – Windows 8 Metro Apps Error Report
- 下拉框Spinner使用实例
- ASP.NET MVC 实践系列4-Ajax应用
- 诙谐幽默的 bus/driver/device关系
- linux搜索系统
- drawable(hdpi,ldpi,mdpi) 的区别
- flash webgame架构
- Spring入门
- 编程技术面试的五大要点
- NDK开发环境配置
- hadoop实战之动态添加节点