ASP.NET MVC学习之Ajax(完结)
来源:互联网 发布:淘宝上买刀犯法吗 编辑:程序博客网 时间:2024/04/29 12:20
一.前言
通过上面的一番学习,大家一定收获不少。但是总归会有一个结束的时候,但是这个结束也意味着新的开始。
如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发ajax十分的简单,而ASP.NET MVC学习到现在页面都是刷新的,所以这节就是ASP.NET MVC的最后一节,通过这节的学习我们将能够实现通过ajax提交表单,下面我们开始继续学习。
二.准备工作
1、首先确保引用了以下js库在_Layout中:
2、新建一个HomeController,然后在其中写入如下代码:
1 namespace MvcStudy.Controllers 2 { 3 public class HomeController : Controller 4 { 5 public ActionResult Index() 6 { 7 return View(); 8 } 9 10 [HttpPost]11 public ActionResult Index([Bind(Prefix="name")]String reg)12 {13 return PartialView("Result", reg);14 }15 }16 }
3、在Views下新建一个Home文件夹,并在其中新建一个Index视图,同时在Views/Shared中新建一个Result视图,到此为止准备工作完成了。
三.利用Ajax提交表单
首先我们打开刚才新建的Index视图,然后在其中写入如下代码:
1 @{ 2 ViewBag.Title = "Index"; 3 AjaxOptions option = new AjaxOptions 4 { 5 UpdateTargetId = "targetdiv" 6 }; 7 } 8 9 @using (Ajax.BeginForm(option))10 {11 <div id="targetdiv">12 </div>13 @Html.TextBox("name")14 <div>15 <input type="submit" value="注册" />16 </div>17 }
其中AjaxOptions同来设置ajax相关的参数,而Ajax.BeginForm则表示该表单采用ajax方式提交,其中AjaxOptions中的UpdateTargetId表示完成ajax请求之后内容的输出的容器。
打开Views/Shared下的Result视图,写入:
1 @{2 String text = (string)Model;3 }4 5 @text
作为简单的示例,笔者直接输出了Model。
然后我们就可以F5运行,在文本框中输入值,最后可以发现页面并没有刷新。但是内容却从指定的div中呈现了,这里的原理很简单,ASP.NET MVC就是利用jquery中的ajax来将表单中的参数提交给指定的动作,然后由这个动作直接返回一段html代码,最后在从指定的id的容器中输出。
四.实现加载中效果
如今很多网站都会在进行ajax请求过程中呈现一段表示加载中的标记,而ASP.NET MVC中的ajax也提供给我们这个功能,下面我们就修改Index视图:
1 @{ 2 ViewBag.Title = "Index"; 3 AjaxOptions option = new AjaxOptions 4 { 5 UpdateTargetId = "targetdiv", 6 LoadingElementId = "wait", 7 LoadingElementDuration = 1000 8 }; 9 }10 11 <div id="wait" style="display:none" >12 耐心等待会...13 </div>14 @using (Ajax.BeginForm(option))15 {16 <div id="targetdiv">17 </div>18 @Html.TextBox("name")19 <div>20 <input type="submit" value="注册" />21 </div>22 }
我们通过LoadingElementId来设置加载的标签而LoadingElementDuration则表示动画持续的时间,这里我们写了一个div用来呈现,并且该div的display要设置为none,这样我们重新打开页面再提交一次,就可以看到加载中的效果了。
五.Ajax链接
很多时候并不总是需要提交表单来实现ajax,也有很多仅仅只是通过点击按钮的方式来进行ajax请求,下面我们就利用Ajax.ActionLink来实现,我们只要在Index视图中的下面填上如下代码:
1 @Ajax.ActionLink("点我","Index",new {name= "oh no"},new AjaxOptions{2 UpdateTargetId = "targetdiv",3 Confirm = "确定吗?",4 HttpMethod = "Post"5 });
这里就不介绍了,因为和Html.ActionLink的用法十分类似,唯一的区别就是多了一个AjaxOptions参数,我们刷新页面。点击这个链接就可以看到效果了,如果你想问按钮在哪呢,这个问题似乎没有可问性,不是有万能的CSS吗?
六.Ajax回调
对于部分喜爱写javascript的读者来说,上面这些无疑是灾难。这样你的javascript水平如何体现呢,其实ASP.NET MVC自带的依然有很多问题,所以这个时候我们可以监听它的过程,从而可以更好的完成功能,下面我们监听它的所有事件,我们仍然是修改Index视图的代码:
1 @Ajax.ActionLink("点我","Index",new {name= "oh no"},new AjaxOptions{ 2 UpdateTargetId = "targetdiv", 3 Confirm = "确定吗?", 4 HttpMethod = "Post", 5 OnBegin = "onbegin", 6 OnComplete = "oncomplete", 7 OnFailure = "onfailure", 8 OnSuccess = "onsuccess" 9 });10 11 <script type="text/javascript">12 function onbegin() {13 console.log("开始啦");14 }15 16 function oncomplete(request, status) {17 console.log("完成了,好下班了");18 }19 20 function onfailure(request, error) {21 console.log("报错了,要加班了");22 }23 24 function onsuccess(data) {25 console.log("改好了,走人喽");26 }27 </script>
这里我们监听了所有的事件,下面我们可以看到正确调用下的输出:
当然个人认为ASP.NET MVC的ajax还是有点鸡肋,用个backbone.js框架加上ASP.NET Web API基本上直接秒杀了,当然对于简单的页面用用自带的还是蛮快捷的。
- ASP.NET MVC学习之Ajax(完结)
- 学习asp.net mvc之ajax
- ASP.NET MVC之Ajax
- ASP.NET MVC学习---(九)权限过滤机制(完结篇)
- ASP.NET 的MVC结构之AJAX
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)(1)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET MVC学习之 Html.ActionLink
- ASP.NET MVC学习之 Html.ActionLink
- ASP.NET MVC学习之 Html.ActionLink
- ASP.NET MVC Bundles 之学习笔记
- ASP.NET MVC和AJAX
- asp.net mvc ajax 例子
- asp.net mvc ajax 例子
- Asp.Net Mvc Ajax偏方
- 深入ASP.NET MVC之九:Ajax支持
- java中数据类型在方法调用后的变化
- 数据库中的行列转换(横竖转换)
- AndroidManifest.xml乱码工具
- 工作中常遇到的小白问题
- Android AutoLayout全新的适配方式 堪称适配终结者
- ASP.NET MVC学习之Ajax(完结)
- 一段文字效果
- linux之cp/scp命令+scp命令详解
- Mina源码分析——IoService
- 一个FMDB数据库简单应用
- Ado.Net小练习02(小项目CUID
- jfinal导出excel表格插件jfinal-ext使用
- 旋转屏幕导致Activity重建问题的解决办法
- OSI七层模型详解