zoukankan      html  css  js  c++  java
  • 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         
             */
        }
    }

  • 相关阅读:
    查看端口有没有被占用
    微信公众号2()
    How to insert a segment of noise to music file
    puppet practice
    Docker Commands
    LempelZiv algorithm realization
    The algorithm of entropy realization
    Java network programmingguessing game
    Deploy Openstack with RDO and Change VNC console to Spice
    puppet overview
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234082.html
Copyright © 2011-2022 走看看