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

  • 相关阅读:
    Sona && Little Elephant and Array && Little Elephant and Array && D-query && Powerful array && Fast Queries (莫队)
    P1494 [国家集训队]小Z的袜子(luogu)
    【题解】洛谷P1311 [NOIP2011TG] 选择客栈(递推)
    【题解】洛谷P2296 [NOIP2014TG] 寻找道路(SPFA+DFS)
    【题解】洛谷P2661 [NOIP2015TG] 信息传递
    【题解】洛谷P1065 [NOIP2006TG] 作业调度方案(模拟+阅读理解)
    【题解】洛谷P1032 [NOIP2002TG]字串变换(BFS+字符串)
    [BZOJ2127]happiness-[网络流-最小割]
    [BZOJ3218]a + b Problem-[主席树+网络流-最小割]
    BZOJ4049][CERC2014]Mountainous landscape-[线段树+凸包+二分]
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234082.html
Copyright © 2020-2023  润新知