MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考：链接：http://pan.baidu.com/s/1pKhHHMj 密码：mkr4
1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序。命名为：Mvc4MicrosoftAjaxDemo
2：新建控制器：在Controllers文件夹上 右键-->添加-->控制器，命名为：HomeController (HomeController .cs)
3：在控制器HomeController中新增Action： GetDate()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc; namespace Mvc4MicrosoftAjaxDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
} public ActionResult GetDate()
{
//休眠1秒钟，监控前台动作
Thread.Sleep();
return Content(DateTime.Now.ToString());
}
}
}
HomeController.cs
4:新建视图：在HomeController Action：Index上 右键-->添加视图 命名：Index(默认和Action名称一致) (Index.cshtml)
5：在视图Index中添加以下代码，使用 微软提供的Ajax请求脚本，如下所示：
5.1：添加 jquery-1.8.2.min.js 和 jquery.unobtrusive-ajax.min.js的引用
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
<div>
<h1>MVC 4 Microsoft Ajax Demo</h1>
@using (Ajax.BeginForm("GetDate", "Home", new AjaxOptions() { Confirm = "你确定要提交吗？", HttpMethod = "post", UpdateTargetId = "result", LoadingElementId = "loading", InsertionMode = InsertionMode.Replace }))
{
<input type="submit" id="btnAjax" name="btnAjax" value="MicrosoftAjaxGetDate" />
}
<div id="result"></div>
<div id="loading" style="display:none;">
<img src="~/Content/ico_loading2.gif" />
</div>
</div>
</body>
</html>
Index.cshtml
Unobtrusive Ajax
应当将 JavaScript （或其它脚本）从 Html 中分离出来，就像最初将样式从 Html 中分离出来一样道理。简单来说就是将嵌入在 Html 中的 JavaScript 全部取出来，放在单独的 js 文件中，
页面中不要出现任何 onclick、onload
使用 Unobtrusive Ajax 我们最大的收益就是简单易于维护的代码（Code is cleaner and easier to maintain）。
基本特点
1.网页内容和表单使用纯 HTML；
2.不借助 JavaScript，表单和超级连接也能正常使用；
3.页面外观完全由 CSS 控制，而不是 HTML（不要用 table 来布局） 或 JavaScript；
4.任何人都能通过任何设备（考虑不支持JavaScript的设备）访问；
Unobtrusive Ajax使用方式
1.引用相应的Javascript文件
<script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
unobtrusive js src
2.开启 Unobtrusive JavaScript
2.1 Web.Config文件中默认配置:
2.2 代码里启用：
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
6:编译，运行页面 默认是/Home/Index
6.1:点击 MicrosoftAjaxGetDate button 出现信息确认页面
6.2：点击确认按钮，显示loading按钮(此时View视图 通过Ajax异步请求控制器的Action)
6.3：loading之后，显示如下：
Ps: 微软提供的Ajax请求脚本 基于 jquery.unobtrusive-ajax.min.js 这个文件，但是在MVC 5.0(Visual Studio 2015)中默认没有Js这个文件
解决方案如下：
１：打开VS2015,新建MVC5.0，使用菜单栏：工具-->Nuget程序包管理器-->程序包管理器控制台
2：用NUGET程序包管理器控制台安装下面这两个文件
Install-Package Microsoft.jQuery.Unobtrusive.Ajax –version 3.0.0
(若需要安装JQuery的话：Install-Package jQuery –version 1.10.2)
3：查看当前项目，Scripts文件夹下已经有 jquery.unobtrusive-ajax.min.js 文件
之后操作和MVC 4.0 (VS2013/VS2012)一致
MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]的更多相关文章
- MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- ASP.NET Core中的jQuery Unobtrusive Ajax帮助器
最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...
- AjaxHelper创建的ajax无效，JQuery直接方法post有效，原来是Microsoft.jQuery.Unobtrusive.Ajax错误，NuGet解决
Get-Package -ListAvailable -Filter Microsoft.JQuery Microsoft.jQuery.Unobtrusive.Ajax –Version 3.2.0
- ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 （转载）
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- 跨域请求之jQuery的ajax jsonp的使用解惑
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- 学习AJAX必知必会（4）~JQuery发送Ajax请求
一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...
- Aspnet MVC 异步调用
一个简图来描述下Aspnet MVC下的异步调用 { request } / \/ -------ISS------- > work thread | \ | \ route - aysn co ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- IE9下JQuery发送ajax请求失效
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案: 解决方案一: 设置浏览 ...
随机推荐
- Intellij Idea 将java项目打包成jar
1.菜单:File->project stucture 2.在弹窗最左侧选中Artifacts->"+",选jar,选择from modules with depend ...
- 设置套接口的选项setsockopt的用法
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- 趣谈StateServer在Web Garden，Web Farm下的使用
上一篇翻译的博客[译文]漫谈ASP.NET中的Session已经介绍了Session的基础知识,如果看过了的话对Session应该有了一个比较清晰的认识了,现在我来谈谈我所遇到的困境以及对Sessio ...
- Java中的HashMap的工作原理是什么？
问答题23 /120 Java中的HashMap的工作原理是什么? 参考答案 Java中的HashMap是以键值对(key-value)的形式存储元素的.HashMap需要一个hash函数,它使用ha ...
- OMAP4之DSP核（Tesla）软件开发学习（四）ARM核与DSP核通讯示例
首先,安卓系统完全启动4AJ.2.1. 其次,查看OMAP4的Tesla相关信息,检查Tesla是否使能.(有如下显示,则OK) cat /d/emoteproc/omap-rproc.0/versi ...
- Hosts 文件的作用
问题来源: 我修改了hosts文件访问公司的内网 但是出现错误找不到服务器或DNS错误 一个下午了都上不了公司的系统. Hosts是什么?Hosts是Window系统目录里的一个文件,它的作用可大 ...
- 折叠纸片PFold.js
PFold.js是一款折叠纸片插件,支持定义折叠纸牌数量.折叠动画效果.折叠方向,而且还支持折叠结束后回调方法. 在线实例 效果一 效果二 效果三 使用方法 <div id="uc-c ...
- 【转】BeyondCompare软件使用
使用BeyondCompare比较文件夹下的文件时,相同的文件内容,但显示为不相同 原文网址:http://www.cnblogs.com/huangtailang/p/3925157.html 主要 ...
- springboot 有关拦截器遇到的问题
最近改造搜索服务,原来是用 ngx + lua 写的,虽然性能很高,带来的问题是可维护性不太方便,不是指lua语言方面,是因为团队就2个开发人员,另外一个开发人员的擅长语言是Java,于是准备将搜索服 ...
- Java反射机制的适用场景及其利与弊 ***
一.反射的适用场景是什么? 1).Java的反射机制在做基础框架的时候非常有用,有一句话这么说来着:反射机制是很多Java框架的基石.而一般应用层面很少用,不过这种东西,现在很多开源框架基本都已经给你 ...