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

  • 相关阅读:
    mysql逻辑备份
    Configuring ProxySQL
    CSS伸缩布局
    溢出文字隐藏三种方式
    CSS过渡效果transition和动画
    伪元素before和after本质
    css滑动门技术
    字体图标iconfont
    CSS精灵技术(sprite)
    行内块和文字垂直对齐vertical-agign
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234082.html
Copyright © 2020-2023  润新知