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

转载于:https://www.cnblogs.com/smartsmile/p/6234082.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值