MVC学习十二:Ajax.ActionLink用法
Ajax.ActionLink用法
<!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
1.加载部分视图
视图代码
@Ajax.ActionLink("链接文本", "Action方法名","控制器名", new AjaxOptions()
{
UpdateTargetId = "DivMsg", //数据显示容器ID
InsertionMode = InsertionMode.Replace, //替换容器内容
HttpMethod = "Post"
})
<div id="DivMsg">数据显示容器ID</div>
Controller代码
#region MVC 的 Ajax超链接请求的目标 /// <summary> /// MVC 的 Ajax超链接请求的目标 /// </summary> /// <returns></returns> public ActionResult Action方法名() { return PartialView(); } #endregion
2.异步操作(如增、删、查、改)
// 操作参数
@Ajax.ActionLink("操作", "Action方法名", "控制器名", new { t=new Random().NextDouble() }, new AjaxOptions { HttpMethod = "Get", OnBegin = "OnBegin", OnSuccess="OnSuccess", OnComplete = "OnComplete" })
脚本
function OnBegin() { //弹出遮罩层,防止用户在服务器响应期间的其他误点击 } function OnSuccess(data) { alert(data);//接收action传来的返回值 } function OnComplete() { //关闭遮罩层 }
AjaxOptions中还有其他可以指定的属性:
Confirm | 等效于javascript中的return confirm(msg),在点击该链接时先提示需要确认的信息。 |
HttpMethod | 指定使用Get或者是Post方式发送Http请求 |
InsertMode | 指定使用哪一种方式在指定的UpdateTargetId元素更新数据,可以有三种方式: "InsertAfter", "InsertBefore", or "Replace" 。默认为:Replace |
LoadingElementDuration | Loading元素显示的时间 |
LoadingElementId | 可以指定在Http请求期间显示的Loading元素 |
OnBegin | 在Http请求之前执行的javascript方法 |
OnComplete | 在Http请求结束时执行的方法 |
OnFailure | 在Http请求失败时执行的方法 |
OnSuccess | 在Http请求成功时执行的方法 |
UpdateTargetId | Http请求更新的页面元素 |
Url | Http请求的Url |
示例:
// 锚点 参数--如果没有ID的话
@Ajax.ActionLink("ActionLink", "Index", "Home", "https", "www.ayilaile.com:90", "title", new { id = 1, type = 1 }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "detailsID", InsertionMode = InsertionMode.Replace }, new{ id = "testid"})
生成的链接为:<a id="testid" herf="https://www.ayilaile.com:90/Home/Index/1?type=1#title">ActionLink</a>
@Ajax.ActionLink("ActionLink", "Index", "Home", "https", "www.ayilaile.com:90", "title", new { type = 1 }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "detailsID", InsertionMode = InsertionMode.Replace }, new{ id = "testid"})
生成的链接为:<a id="testid" herf="https://www.ayilaile.com:90/Home/Index?type=1#title">ActionLink</a>