ASP.NET MVC AJAX的调用示例

时间:2023-03-09 05:27:01
ASP.NET MVC AJAX的调用示例
@{
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('审核通过');
location.reload();
}
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>
</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
*/
}
}