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. sqlmap笔记本

    /* 转载请注明出处 ID:珍惜少年时 */ 相关命令--current-user #当前数据库用户--privileges #查看当前数据库权限--dbms=mssql #指定数据库的类型--os- ...

  2. 怎样将runlmbench 获取的数值传给上层app

    前面那个随笔 , 已经成功将runlmbench 移植到了Android , 并成功的运行. 今天就写一下将runlmbench 获取的那些性能值传给上层 App 进行人机交互. 一开始 , 我是想直 ...

  3. BZOJ 1004: [HNOI2008]Cards

    Description 给你一个序列,和m种可以使用多次的置换,用3种颜色染色,求方案数%p. Sol Burnside定理+背包. Burnside定理 \(N(G,\mathbb{C})=\fra ...

  4. 【云计算】Cloudify-基于TOSCA规范的开源云应用编排系统

      .cloudify-manager-blueprints:https://github.com/cloudify-cosmo/cloudify-manager-blueprints/tree/3. ...

  5. Tomcat 7最大并发连接数的正确修改方法

    这是个很简单的问题,但是搜了一圈,发现大家都写错了.所以这里总结一下: 几乎所有的中文网页都介绍,要修改Tomcat的默认最大并发连接数,应该进行如下设置(实际上这些步骤是错误的): -------- ...

  6. Oracle中创建MD5方法

    create or replace function MD5(passwd in varchar2) return varchar2 is retval ); begin retval := utl_ ...

  7. docker进入容器的方式

    通过docker创建守护运行(在使用-d参数时)的容器时,容器启动后会进入后台.用户无法看到容器中的信息.某些时候如果需要进入容器进行操作,有多种方法,包括使用docker attach命令.dock ...

  8. Unity3d《Shader篇》绘制圆角图片

    Pass { CGPROGRAM // Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain a s ...

  9. Solr集群常用的操作总结

    之前搭建过SolrCloud和Solr单机版本,另外还有很多对Solr配置文件以及核心的操作,以下主要总结Solr集群中的常用操作,即在配置文件中正确设置ZK_HOST参数并且Zookeeper正确启 ...

  10. Python 开发轻量级爬虫04

    Python 开发轻量级爬虫 (imooc总结04--url管理器) 介绍抓取URL管理器 url管理器用来管理待抓取url集合和已抓取url集合. 这里有一个问题,遇到一个url,我们就抓取它的内容 ...