Biegral Blog

@{
    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         
         */
    }
}