文档章节

ASP.NET MVC AJAX的调用示例

深圳大道
 深圳大道
发布于 2016/12/29 15:40
字数 544
阅读 7
收藏 0
@{
    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         
         */
    }
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/51768578

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
用DevExpress做界面开发:ASP.NET界面开发框架

利用 DevExpress ASP.NET Controls,可以构建高性能可触摸体验的交互式Web应用。DevExpress ASP.NET拥有95+款ASP.NET AJAX控件和多达55种MVC扩展,它可以为你带来无与伦比的高性能开发体验。...

百mumu
2015/11/05
2.3K
0
《Pro ASP.NET MVC 3 Framework》学习笔记目录

《Pro ASP.NET MVC 3 Framework》简介: 作者: Adam Freeman 和 Steven Sanderson 出版社: Apress; New 平装: 820页 语种: 英语 ISBN: 1430234040 声明:笔记里面按我自己的理解翻译了大部分...

mszhangxuefei
2012/02/07
0
0
使用 ASP.NET Core MVC 创建 Web API(六)

使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使用 ASP.NET Core MVC 创建 Web API(三) 使用 ASP.NET Core M......

DotNet菜园
05/07
0
0
Asp.Net MVC 使用 Ajax

Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面)。 Ajax工作原理 Ajax使浏览器和服务...

JoeSnail
2017/11/13
0
0
Asp.net MVC2中使用Ajax的三种方式

在Asp.net MVC中,我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留...

王二狗子11
2018/01/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

让《强化学习(第2版)》架起一座通往强化学习经典知识宝库的桥梁

上交大计算科学与工程系俞凯教授,5分钟口述讲解,带你快速认识了解年度重磅图书《强化学习(第二版)》! 在 AlphaGo战胜李世石之后,AlphaZero以其完全凭借自我学习超越人类在各种棋类游戏...

博文视点Bv
9分钟前
5
0
TLA7-EVM开发板的处理器、NOR FLASH、DDR3

TLA7-EVM开发板是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板+底板方式的开发板,可快速评估FPGA性能。核心板尺寸仅70mm*50mm,底板采用沉金无铅工艺的6层板设计,专业的PCB...

Tronlong创龙
18分钟前
3
0
UUID的变种-有序

为了解决UUID无序的问题,NHibernate在其主键生成方式中提供了Comb算法(combined guid/timestamp)。保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime)。 /// <summary> //...

Canaan_
19分钟前
3
0
Netty学习(6)——通道间数据传输

1. FileChannel实现通道间的数据传输 在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel传输到另外一个channel。 transferFrom() FileChannel的transferF...

江左煤郎
22分钟前
3
0
AngularDOM操作

gtandsn
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部