14、ASP.NET MVC入门到精通——Ajax
本系列目录:ASP.NET MVC4入门到精通系列目录汇总
Unobtrusive Ajax使用方式(非入侵式)
非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 js 文件中,html标签中不要出现任何onclick、onload 等
Unobtrusive Ajax :方便程序员编写简单易于维护的ajax代码(Code is cleaner and easier to maintain)。
基本特点
1.网页内容和表单使用纯 HTML;
2.不借助 JavaScript,表单和超级连接也能正常使用;
3.页面外观完全由 CSS 控制,而不是 HTML(不要用 table 来布局) 或 JavaScript;
4.任何人都能通过任何设备(考虑不支持JavaScript的设备)访问;
ASP.Net MVC 全局开启非入侵ajax
ASP.NET MVC4中,已经默认开启客户端验证和非侵入式js。Web.config中
<add key="ClientValidationEnabled" value="true" /><add key="UnobtrusiveJavaScriptEnabled" value="true" />
页面添加非入侵js文件
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
可在单个视图页面(View)上关闭
@{Html.EnableUnobtrusiveJavaScript(false);} @{Html.EnableClientValidation(false);}
注意下js引用顺序
<script src="@Url.Content("~/Scripts/jquery.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> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
AjaxHelper
异步链接按钮
注意:必须开启 非入侵式 Ajax:导入Jquery和unobtrusiveAjax文件
View中:@Ajax.ActionLink 创建 ajax 超链接按钮,一般用来请求动态生成的部分html代码(分部视图)
@Ajax.ActionLink("链接文本", "PartialViewTest", new AjaxOptions() {UpdateTargetId="divMsg",//数据显示的html容器idInsertionMode= InsertionMode.Replace, //替换容器内容HttpMethod="Post" })
Controller中
public PartialViewResult PartialViewTest() { ViewData["Msg"] = "Hello world!"; return PartialView(); }
异步表单
View中:@Ajax.BeginForm 创建 异步表单
@using(Ajax.BeginForm("PartialViewTest","Home",new AjaxOptions{UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, HttpMethod="post" , OnFailure= "fail",LoadingElementId="lodeingmsg"})) {<input type="text" name="txtName" /><input type="submit" /> }
Controller:
public PartialViewResult PartialViewTest() { ViewData["Msg"] = "Hello world!"; return PartialView(); }
示例
View中:@Ajax.BeginForm 创建 异步表单
@using(Ajax.BeginForm("PartialView","Home",new AjaxOptions{UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, HttpMethod="post" , OnFailure= "fail", OnSuccess="success" , OnComplete="comlete", LoadingElementId="lodeingmsg"})) {<input type="text" name="txtName" /><input type="submit" /> } <div id="lodeingmsg" style="display:none;">加载中...</div><script type="text/javascript">function fail(xhr) { alert("方法参数是异步对象" + xhr.responseText); } function complete(xhr) { alert("方法参数是异步对象" + xhr.responseText); } function success(text) { alert("方法参数是响应报文体" + text); }</script>
UpdateTargetId:目标元素id,获取服务器响应后,将获取的响应报文体显示到目标元素的innerHTML中。
InsertionMode: InsertAfter 插入目标元素原有内容之后;InsertBefore 插入目标元素原有内容之前,Replace,替换目标元素原有内容
LoadingElementId:异步对象readyState==4之前显示"正在加载"状态的元素id
AjaxOptions对象生成【对应】触发ajax请求的标签的 属性
<a data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#divMsg" href="/Home/PartialViewTest">链接文本</a>
请求Json数据
View中:
@Ajax.ActionLink("click here", "DogList", new AjaxOptions() {UpdateTargetId="divMsg",InsertionMode= InsertionMode.Replace, HttpMethod="Get" })
Controller中:使用 Json方法 返回一个 JsonResult
public ActionResult PartialView() //返回类型也可写 JsonResult {var dogList = db.Dogs.ToList();return Json(dogList, JsonRequestBehavior.AllowGet); }
MVC框架默认不允许使用Json响应Get请求,需要开启。
Jquery请求控制器Action
除了url指向 控制器的 Action方法外,其它和以前一样
具体参见 Jquery帮助文档 ajax 方法:
$.ajax
$.post
$.load
$.get
Jquery 模板插件
导入脚本:
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")"></script>
添加模板-占位符格式:$(json对象属性名):
<script id="temp" type="text/x-jquery-tmpl"><tr><td>${CID}</td><td>${CName}</td><td>${CCount}</td></tr> </script>
为模板装载数据并最终生成html,添加到表格中:
function ajaxFinish(jsonObjArray) { //[{CID:"1",CName:"aa",CCount:"1"},....{}]$("#temp").tmpl(jsonObjArray).appendTo("#tbList"); }
14、ASP.NET MVC入门到精通——Ajax相关推荐
- ASP.NET MVC入门到精通——Spring.net-业务层仓储
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一节,我们已经把项目框架的雏形搭建好了,那么现在我来开始业务实现,在业务实现的过程当中,不断的来完善我们现有的框架. 1.假设我们来做一个 ...
- 16、ASP.NET MVC入门到精通——MVC过滤器
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在ASP.NET MVC中有四种过滤器类型 Action 1.在ASP.NET MVC项目中,新建文件夹Filter,然后新建类MyCust ...
- 1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
- ASP.NET MVC 入门系列教程
一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...
- ASP.NET MVC 入门8、ModelState与数据验证
ViewData有一个ModelState的属性,这是一个类型为ModelStateDictionary的ModelState类型的字典集合.在进行数据验证的时候这个属性是比较有用的.在使用Html. ...
- ASP.NET MVC 入门
入门基础 ASP.NET MVC 是微软系列基于 C# 语言的 Web 开发框架,并不适合 0 基础入门,在学习之前你必须要了解 4 个知识点: 1.HTML 基础.网页的基本标签,结合 ASP.NE ...
- ASP.NET MVC 入门11、使用AJAX
本系列文章基于ASP.NET MVC beta.本示例Blog系统同步更新的演示站点:http://4mvcblog.qsh.in/ 在ASP.NET MVC beta发布之前,M$就宣布支持开源的J ...
- ASP.NET MVC 入门3、Routing
本系列文章基于Microsoft ASP.NET MVC Beta. 在一个route中,通过在大括号中放一个占位符来定义( { and } ).当解析URL的时候,符号"/"和& ...
- c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...
最新文章
- 6426C Lab6 部署和配置RMS
- LoadRunner学习笔记一
- 前端学习(510):多列布局
- 怎样设计访谈提纲_论访谈提纲的设计
- axure 内部框架内容下滑_Axure教程:转盘抽奖交互原型
- 同一个页面提交多个form表单方法(详细)
- 《Programming WPF》翻译 第7章 4.转换
- [独孤九剑]持续集成实践(三)- Jenkins安装与配置(Jenkins+MSBuild+GitHub)
- “拒绝访问”协助方案
- 怎样输出矩阵乘积C语言,c语言矩阵相乘
- Twitter 用户推文时间线爬虫
- c语言倒序输出英文字母表音标,28个英文字母表
- 目标检测经典论文——YOLOv3论文翻译:YOLOv3: An Incremental Improvement(YOLOv3:增量式的改进)
- oracle中字段类型为date存储数据精确到时分秒的问题
- 全新数据增强 | TransMix 超越Mix-up、Cut-mix方法让模型更加鲁棒、精度更高
- Xshell/Secure CRT/PuTTY使用密钥对登录阿里云Linux服务器
- 华硕品牌笔记本电脑一键u盘启动详细图文教程
- 朋友说要被他女朋友烦死了,竟然是因为“小视频”
- Tech Talk丨走进神奇的魔法世界之“魔法消除”技术
- html 小设备折叠显示器,可折叠触摸显示器迎来技术风口 贺利氏推出Clevios HY E新材料...
热门文章
- html5 定位 计算距离,HTML5 地理定位+地图 API:计算用户到商家的距离
- 求奇数和的c语言程序,C语言程序求1—100之间的奇数和和偶数和
- execve系统调用_Linux操作系统中的namespace是个什么鬼
- java 自定义形状按钮_制作自定义背景Button按钮、自定义形状Button的全攻略
- Java对象序列化乱码6_对象序列化成字符串乱码解决
- 1345.跳跃游戏IV-LeetCode
- 解决纵向滚屏导致的轮播图异常
- Vscode多个窗口显示多个选项卡/Tabs
- wpf window 不执行show 就不能load执行_关于机器学习中的Scikit-Learn,你不知道的10个实用功能...
- flink的operator state简单理解