14.1.配置文件

14.2.AjaxHelper – 异步链接按钮

14.3.AjaxHelper – 异步表单

  • AjaxOptions常见属性：

14.4.AjaxOptions对象生成【对应】触发ajax请求的标签的 属性

14.1.配置文件

页面添加非入侵js文件

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript">
</script>

可在单个视图页面(View)上关闭

@{Html.EnableUnobtrusiveJavaScript(false);}

@{Html.EnableClientValidation(false);}

14.2.AjaxHelper – 异步链接按钮

必须开启 非入侵式 Ajax：导入Jquery和unobtrusiveAjax文件

View中：@Ajax.ActionLink 创建 ajax 超链接按钮

一般用来请求动态生成的部分html代码(分部视图)

@Ajax.ActionLink("链接文本", "PartialView", new AjaxOptions() {
                         UpdateTargetId="divMsg",//数据显示的html容器id
                         InsertionMode= InsertionMode.Replace, //替换容器内容
                         HttpMethod="Post" })

Controller中

public PartialViewResult PartialView()

        {

            Models.Student stu = new Models.Student() {  StudentID = 1,  Name = "Ruiky" };

            return PartialView(stu);

        }
 
PartialView.cshtml (分布视图)
<h2>PartialView</h2>

@model _06MVCAjax_CodeFirst.Models.Student

@Html.ValueFor(s => s.StudentID)

@Html.ValueFor(s => s.Name)
 
效果图：
 
 
 
 

14.3.AjaxHelper – 异步表单

AjaxBeginForm.cshtml

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AjaxBeginForm</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript">

        function suc(resText) {

            alert(resText);

        };

        function err(xhr) {

            alert(xhr.readyState)

        }

    </script>

    <style type="text/css">

        #imgLoad{

            display:none

        }

    </style>

</head>

<body>

    <h1>异步表单：</h1>

    @using (Ajax.BeginForm("GetDateTime", "Html", new AjaxOptions()

    {

        HttpMethod = "post", //传输方式

        OnSuccess = "suc", //加载成功调用的js方法

        OnFailure="err", //出错调用的js方法

        LoadingElementId = "imgLoad" //请求所现实的元素

    }))

    {

        <input type="text" name="txtName" />

        <input type="submit" />

        <div id="imgLoad">loding....</div>

    }

</body>

</html>

HtmlController.cs

public ActionResult GetDateTime()

        {

            //例：报错的情况（除以0）

            //System.Threading.Thread.Sleep(2000);

            //int a = 0;

            //int b = 1 / a;

            string str =Request.Form["txtName"];

            System.Threading.Thread.Sleep(2000);

            return Content(DateTime.Now + "," + str);

        }

AjaxOptions常见属性：

UpdateTargetId 目标元素id，获取服务器响应后，将获取的响应报文体显示到目标元素的innerHTML中。
InsertionMode

  • InsertAfter插入目标元素原有内容之后；

  • InsertBefore插入目标元素原有内容之前；

  • Replace 替换目标元素原有内容
LoadingElementId

LoadingElementId：异步对象readyState==4之前显示"正在加载"状态的元素id

14.4.AjaxOptions对象生成【对应】触发ajax请求的标签的 属性

MVC – 14.ajax异步请求的更多相关文章

  1. MVC – 14.ajax异步请求

    14.1.配置文件 14.2.AjaxHelper – 异步链接按钮 14.3.AjaxHelper – 异步表单 AjaxOptions常见属性: 14.4.AjaxOptions对象生成[对应]触 ...

  2. MVC的Ajax异步请求

    @using (Ajax.BeginForm("GetTime","order",new AjaxOptions() { Confirm="你确认这么 ...

  3. MVC&WebForm对照学习：ajax异步请求

    写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...

  4. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  5. ajax异步请求实例

    1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...

  6. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  7. POI导出Excel不弹出保存提示_通过ajax异步请求(post)到后台通过POI导出Excel

    实现导出excel的思路是:前端通过ajax的post请求,到后台处理数据,然后把流文件响应到客户端,供客户端下载 文件下载方法如下: public static boolean downloadLo ...

  8. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  9. spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

随机推荐

  1. python基础----封装、封装与扩展性

    从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫,小狗,小王八,还有egon和alex一起装进麻袋,然后把麻袋封上口子.但其实这种理解相当片面 首先我们要了解 要封装什么 你钱包的有多少钱(数 ...

  2. Linux之Libcurl库的介绍与应用20170509

    一.LibCurl简介 LibCurl是免费的客户端URL传输库,支持FTP,FTPS, HTTP, HTTPS, SCP, SFTP, TFTP, TELNET, DICT, FILE ,LDAP等 ...

  3. 驱动之SPI,UART,I2C的介绍与应用20170118

    这篇文章主要介绍基本的驱动也是用的最多的协议类驱动中的SPI,I2C和UART.首先从最简单的UART也就是串口讲起: 1.UART UART由两根线也就是TX,RX以及波特率产生器组成,操作比较简单 ...

  4. 洛谷P1445 [Violet] 樱花 (数学)

    洛谷P1445 [Violet] 樱花 题目背景 我很愤怒 题目描述 求方程 1/X+1/Y=1/(N!) 的正整数解的组数,其中N≤10^6. 解的组数,应模1e9+7. 输入输出格式 输入格式: ...

  5. String的indexOf方法

    indexOf(String.indexOf 方法)字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表示第二个 ...

  6. docker-api

    __author__ = 'zxp' import docker import sys class DockerManager_Slave(object): def __init__(self): s ...

  7. org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'sessionFactory' is defined

    请检查你在web.xml中加载spring.xml文件的时候没有加载成功,看你的路径是否正确 <context-param>  <param-name>contextConfi ...

  8. Java实现JsApi方式的微信支付

    要使用JsApi进行微信支付,首先要从微信获得一个prepay_id,然后通过调用微信的jsapi完成支付,JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支 ...

  9. php每天自动备份数据库

    php每天自动备份数据库 windows中如何添加计划任务? 前提:添加windows计划任务,每天打开备份数据库的页面.1.打开http://localhost/thinkphp3.2/index. ...

  10. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...