在MVC中要实现Ajax
在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Prototype等等。
以下是微软自己的实现方案。
需要预先加载的JavaScript文件:
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
在MVC中已经提供了下面几个现成的HTML Hepler:
- Ajax.ActionLink()
- Ajax.BeginForm()
- Ajax.RouteLink()
- Ajax.BeginRouteForm()
Ajax.ActionLink
使用ActionLink发送异步请求的方法:
View
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div> @Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })
Controller
public ActionResult GetTime() {return Content(DateTime.Now.ToString()); }
以上示例使用ActionLink超链接发送请求到GetTime,返回一个ContentResult,通过AjaxOptions中的UpdateTargetId属性指定了需要更新的页面元素。
AjaxOptions中还有其他可以指定的属性:
Confirm
等效于javascript中的return confirm(msg),在点击该链接时先提示需要确认的信息。
HttpMethod
指定使用Get或者是Post方式发送Http请求
InsertMode
指定使用哪一种方式在指定的UpdateTargetId元素更新数据,可以有三种方式: "InsertAfter", "InsertBefore", or "Replace" 。默认为:Replace
LoadingElementDuration
Loading元素显示的时间
LoadingElementId
可以指定在Http请求期间显示的Loading元素
OnBegin
在Http请求之前执行的javascript方法
OnComplete
在Http请求结束时执行的方法
OnFailure
在Http请求失败时执行的方法
OnSuccess
在Http请求成功时执行的方法
UpdateTargetId
Http请求更新的页面元素
Url
Http请求的Url
关于AjaxOptions中各方法的使用方法,在之前关于ActionResult的介绍的文章中有相关的列子:
JsonResult
注意点
- OnComplete和OnSuccess的区别:OnComplete是获取了Http请求时引发的,此时页面还没有进行更新,OnSuccess是在页面已经更新后引发的。
- ActionLink中的actionName和AjaxOption中的Url的关系:两者分别产生的HTML如下,但是执行的结果相同,希望有高手能解释下这两者有无区别。
<a href="/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
<a href="/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
Ajax.BeginForm
该Html Hepler可以实现使用Ajax方式提交Form,在指定的页面元素中显示提交的结果。
View
@model MvcAjax.Models.UserModel @{ViewBag.Title = "AjaxForm"; }<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div>@using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" })) {<table><tr><td>@Html.LabelFor(m => m.UserName)</td><td>@Html.TextBoxFor(m => m.UserName)</td></tr><tr><td>@Html.LabelFor(m => m.Email)</td><td>@Html.TextBoxFor(m => m.Email)</td></tr><tr><td>@Html.LabelFor(m => m.Desc)</td><td>@Html.TextBoxFor(m => m.Desc)</td></tr><tr><td colspan="2"><input type="submit" value="Submit" /></td></tr></table> }
Model
using System.ComponentModel.DataAnnotations;namespace MvcAjax.Models {public class UserModel{[Display(Name = "Username")]public string UserName { get; set; }[Display(Name = "Email")]public string Email { get; set; }[Display(Name = "Description")]public string Desc { get; set; }} }
Controller
public ActionResult AjaxForm() {return View(); }[HttpPost] public ActionResult SaveUser(UserModel userModel) {//Save User Code Here//......return Content("Save Complete!"); }
以上示例代码实现了采用Ajax提交Form数据的大概方法,在Ajax.BeginForm中同样使用AjaxOptions来设置Ajax请求的参数,和Ajax.ActionLink中的使用方法相同。
其他:
在介绍JavaScriptResult时曾经提到了该ActionResult在普通的请求中是直接当作文件Reponse出的,但是在Ajax请求中,便可以使用该Result,并且执行Result中的JavaScript。
比如将上面的Conntroller更改为以下代码:
[HttpPost] public ActionResult SaveUser(UserModel userModel) {//Save User Code Here//......//return Content("Save Complete!");return JavaScript("alert('Save Complete!');"); }
便可在执行改Ajax请求之后执行JavaScriptResult中的语句。
转载于:https://www.cnblogs.com/jqmtony/p/3683305.html
在MVC中要实现Ajax相关推荐
- springmvc4 ajax 406,Spring4 MVC 中,jQuery ajax (406 Not Acceptable)
最近使用spring4.0的Mvc,json请求时,客户端报错,406 Not Acceptable 1.导入第三方的jackson包,在pom.xml中添加: com.fasterxml.jacks ...
- ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好.#我是猪系列 背景:之前介绍过一篇如何构建ASP.NET MVC4&JQuery&AJax&JSon ...
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
- ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)
AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术. AJAX技术是纯客户端技术,任何客户端框架(如:M ...
- php的mvc中的ajax请求参数为空,AJAX_asp.net中mvc使用ajax提交参数的匹配问题解决探讨,想到在asp.net的mvc中如果使用aja - phpStudy...
asp.net中mvc使用ajax提交参数的匹配问题解决探讨 想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总 ...
- 浅析Asp.net MVC 中Ajax的使用
在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用,同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax ...
- mvc后台字符串转换html,在mvc中,使用summernote编辑器,我想发送数据的内容字符串和HTML到控制器...
我是MVC的首发,所以有一些我不能做的. Summernote编辑器用于编写博客,Ajax用于发布.在这个编辑器里面写了一些字符后,smmernote编辑器和其他字符串数据中的这个html数据必须和a ...
- 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】
索引: 目录索引 Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Ch ...
- MVC中的ActionResult
本文导读:MVC中ActionResult是Action的返回结果.ActionResult 有多个派生类,每个子类功能均不同,并不是所有的子类都需要返回视图View,有些直接返回流,有些返回字符串等 ...
- MVC中实现 加载更多...
需要实现的功能: 数据太多想初次加载部分数据,在底部加上"加载更多"按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) ...
最新文章
- 2021年大数据Hadoop(二十五):YARN通俗介绍和基本架构
- Linux文件系统简介及常用命令
- 解决Mac上adb: command not found问题
- 达摩院 AI 进入中国科技馆,首张 AI 识别新冠 CT 成科技抗疫历史见证
- 5G NR中的两套绝对频域位置:GSCN和ARFCN
- 手动加载spring, ApplicationContext怎么销毁
- 吴恩达深度学习 —— 3.11 随机初始化
- mysql触发器不能alter
- The jQuery HTML5 Audio / Video Library
- 总结01-bms-molecular-translation分子翻译大赛
- centos下mysql执行命令_CentOS下mysql数据库常用命令总结
- 动手写一个二叉平衡树
- 云计算机的价值,云计算现在的价值都有哪些?
- 企业电子招投标采购系统源码之电子招标采购是管理复杂供应链和多层供应商的高效方式
- python中对Routers的理解
- windows电脑无线投屏到小米电视
- 滚动截屏苹果_30个小技巧,带你玩转苹果三大系统
- 1-7 德州扑克(c++)
- html输入框传给服务器,如何将浏览器上的数据,提交到服务器?
- 推荐8本高质量的Python书籍,初学者必看