ASP.NETMVCAJAX的调⽤⽰例@{
ViewBag.Title = "Home Page";
//下⾯引⽤Jquery和unobtrusive-ajax
}
@Scripts.Render("~/bundles/jquery")
@{
//设置ajaxOptions
var ajaxOptions = new AjaxOptions()
{
OnSuccess = "SetPassSuccess",
OnFailure = "SetPassFailure",
Confirm = "设置留⾔审核状态为'通过'?",
HttpMethod = "Post"
};
}
<script type="text/javascript">
$(function () {
$("#alink").click(function () {
$.get("/Home/GetTime", function (response) {
$("#showInfo").html(response);
});
});
});
function SetPassSuccess() {
alert('审核通过');
}
function SetPassFailure(xhr) {
alert('审核失败(HTTP状态代码:' + xhr.status + ')');
}
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
</div>
<div class="row">
<div class="col-md-4">
<a id="alink" href="javascript:void(0);">①传统⽅式Ajax</a><br/>
@Ajax.ActionLink("②MVC中使⽤Ajax", "GetTime", new AjaxOptions { UpdateTargetId = "showInfo" })<br />
@using (Ajax.BeginForm("GetPostStr", new AjaxOptions { UpdateTargetId = "showInfo" }))
{
<input type="text" name="username" /><br />
<input type="text" name="userage" /><br />
<input type="submit" value="③MVC Post⽅式提交Ajax" />
}
<br/>
@Ajax.ActionLink("MVC中Ajax请求带回调执⾏", "ConfirmPass", new { id = 1 }, ajaxOptions)<br />
<div id="showInfo">更新区域</div>
@Ajax.ActionLink("Ajax删除数据", "DeleteUser", "Home", new { id = 1 },
new AjaxOptions() {
UpdateTargetId = "strcontent",
HttpMethod = "Post",
Confirm = " 您确定要删除该记录吗?该操作不可恢复!"
})
</div>
mvc实例</div>
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Demo2016.Controllers
{
/// <summary>
/// 控制器部分
/// </summary>
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
/// <summary>
/// 获取系统时间强制不缓存
/// </summary>
/// <returns></returns>
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult GetTime()
{
return Content(DateTime.Now.ToString());
}
[HttpPost]
public ActionResult GetPostStr(FormCollection form)
{
string userName = form["username"];
string userAge = form["userage"];
return Content(userName + userAge);
}
/// <summary>
/
// 删除⽤户
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult DeleteUser()
{
//省略操作部分
return JavaScript("alert('删除成功')");
}
public ActionResult ConfirmPass(int id)
{
/
/省略操作部分
return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}
/*
* 需安装Microsoft jQuery Unobtrusive Ajax 这个 NuGet 插件
AjaxOptions中还有其他可以指定的属性:
Confirm 等效于javascript中的return confirm(msg),在点击该链接时先提⽰需要确认的信息。
HttpMethod 指定使⽤Get或者是Post⽅式发送Http请求
InsertMode 指定使⽤何种⽅式在指定的元素更新数据,"InsertAfter", "InsertBefore", or "Replace" 默认为:Replace LoadingElementDuration Loading元素显⽰的时间
LoadingElementId 可以指定在Http请求期间显⽰的Loading元素
OnBegin 在Http请求之前执⾏的javascript⽅法
OnComplete 在Http请求结束时执⾏的⽅法
OnFailure 在Http请求失败时执⾏的⽅法
OnSuccess 在Http请求成功时执⾏的⽅法
UpdateTargetId Http请求更新的页⾯元素
Url Http请求的Url
*/
}
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论