c .net ajax,Asp.net mvc 2中使用Ajax的三种方式

在Asp.net MVC中,我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。

首先看一下原始的Ajax的调用的:

定义CommentController,代码如下:

publicclassCommentController : Controller

{privateIList_comments=newList();publicActionResult Index()

{returnView();

}publicvoidAddCommentServer()

{stringcomment=Request["comment"].ToUpper();

_comments.Add("

"+comment+"");

Response.ContentType="text/html";

Response.Write(string.Join("\n", _comments.ToArray()));

}

}

在Asp.net MVC中添加一个custom_ajax.js,加入下面使用ajax的脚本代码,调用AddCommentServer方法。

function getXmlHttpRequest() {

var xhr;//check for IE implementation(s)if(typeofActiveXObject!='undefined') {try{

xhr=newActiveXObject("Msxml2.XMLHTTP");

}catch(e) {

xhr=newActiveXObject("Microsoft.XMLHTTP");

}

}elseif(XMLHttpRequest) {//this works for Firefox, Safari, Operaxhr=newXMLHttpRequest();

}else{

alert("对不起,你的浏览器不支持ajax");

}returnxhr;

}

function getMessage() {//get our xml http request objectvar xhr=getXmlHttpRequest();//prepare the requestxhr.open("GET","Comment/AddCommentServer?comment="+document.getElementById("Comment").value,true)//setup the callback functionxhr.onreadystatechange=function() {//readyState 4 means we're doneif(xhr.readyState!=4)return;//populate the page with the resultdocument.getElementById('comments').innerHTML=document.getElementById('comments').innerHTML+xhr.responseText;

};//fire our requestxhr.send(null);

}

在View中引入此脚本,创建一个简单的表单,并添加触发的代码:

Comments

Add Commentloading...

效果如下:

f0ae5b4fb9383eb47e2e763e65ea673b.png

第二种方式:利用Jquery:

在控制器中添加代码IndexJquery方法和AddComment方法的代码,CommentController代码如下所示:

publicclassCommentController : Controller

{privateIList_comments=newList();publicActionResult Index()

{returnView();

}publicActionResult IndexJquery()

{returnView();

}publicActionResult AddComment(stringcomment)

{

_comments.Add("

"+comment+"");returnContent(string.Join("\n", _comments.ToArray()));

}publicvoidAddCommentServer()

{stringcomment=Request["comment"].ToUpper();

_comments.Add("

"+comment+"");

Response.ContentType="text/html";

Response.Write(string.Join("\n", _comments.ToArray()));

}

}

根据IndexJquery,创建View表单IndexJquery.aspx:

Comments

Add Commentloading...

在View中引用Jquery:

添加下面脚本:

});

});

function hijack(form, callback, format) {

$("#indicator").show();

$.ajax({

url: form.action,

type: form.method,

dataType: format,

data: $(form).serialize(),

completed: $("#indicator").hide(),

success: callback

});

}

function update_sessions(result) {//clear the form$("form.hijax")[0].reset();

$("#comments").append(result);

}

效果:与方式一效果一样。

第三种方式:Ajax Helper

将最简单的留言板修改成Ajax Helper的方式。

1、首先了解一下Ajax Helper下面四种方法。

a、Ajax.ActionLink():它将渲染成一个超链接的标签,类似于Html.ActionLink()。当它被点击之后,将获取新的内容并将它插入到HTML页面中。

b、Ajax.BeginForm():它将渲染成一个HTML的Form表单,类似于Html.BeginForm()。当它提交之后,将获取新的内容并将它插入到HTML页面中。

c、Ajax.RouteLink():Ajax.RouteLink()类似于Ajax.ActionLink()。不过它可以根据任意的routing参数生成URL,不必包含调用的action。使用最多的场景是自定义的IController,里面没有action。

d、Ajax.BeginRouteForm():同样Ajax.BeginRouteForm()类似于Ajax.BeginForm()。这个Ajax等同于Html.RouteLink()。

这个例子中使用Ajax.BeginForm(),下面具体了解Ajax.BeginForm()的参数。看下面代码:

{

HttpMethod="POST",

UpdateTargetId="comments",

InsertionMode=InsertionMode.InsertAfter

})) {%>

actionName:AddComment(action的名字)

controllerName:CommentController(Controller的名字)

ajaxOptions:

HttpMethod:Ajax的请求方式,这里为POST

UpdateTargetId :Ajax请求的结果显示的标签的ID,这里为comments

InsertionMode:将Ajax结果插入页面的方式,这里将ajax的结果放置到comments的后面

2、实现:

在CommentController中添加IndexAjaxHelp方法。

publicActionResult IndexAjaxHelp()

{returnView();

}

根据IndexAjaxHelp生成View表单IndexAjaxHelp.aspx,定义表单:

Comments

{

HttpMethod="POST",

UpdateTargetId="comments",

InsertionMode=InsertionMode.InsertAfter

})) {%>Add Comment

要在此View中添加下面两个脚本文件:

这样就行了,我们发现比用Jquery方便很多,但是使用Jquery将灵活很多。

3、效果:和方式一样。

总结:本文非常的简单,在asp.net mvc中实现了3中ajax的调用方式,实现了一个最简单的留言板程序。推荐使用Jquery和Ajax Helper这两种。Ajax Helper使用非常简单,Jquery比较灵活。

更新:三种方式都实现了一个最简单的留言板程序

参考:

ASP.NET MVC 2 In Action

Pro ASP.NET MVC 2 Framework, Second Edition

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爆款AR游戏如何打造?网易杨鹏以《悠梦》为例详解前沿技术

本文来自网易云社区。 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行。本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术、新实践,如AR、区块链、安全、大数据等。 网易AR游戏生态合作负责人杨鹏表示,传统游戏模式…

fastadmin自定义按钮不是ajax,Fastadmin 自定义按钮实现审核功能

功能描述新增自定义审核按钮,点击审核按钮后,按钮变为取消审核按钮,同理点击取消审核按钮后,按钮变为审核按钮实现功能如下图微信图片_20200827112914.png上代码{field: operate, title: __(Operate), table: table, events: Tabl…

函数的命名空间以及作用域

转载于:https://www.cnblogs.com/mpfei/p/9451208.html

使用vs自带的性能诊断工具

visual studio是个强大的集成开发环境,内置了程序性能诊断工具。下面通过两段代码进行介绍。 static void Main( string[] args){Test1();Test2();Console.ReadKey();}protected static void Test1(){Stopwatch sp new Stopwatch();sp.Start();string str "&…

碧蓝航线8.20服务器维护,碧蓝航线半人马来袭 8.20更新公告

半人马来袭!碧蓝航线将于8月20日9:00~11:00对安卓、iOS全港区进行为期2小时的改造建设,维护后将开启限时活动「盛夏的半人马座」,一起来看看吧。一、内容新增1.开启限时活动「盛夏的半人马座」,活动时间8月20日维护后~8月30日&…

1、rbac权限组件-初识, 中间件校验1

1、权限组件rbac 1、什么是权限 1 项目与应用 2 什么是权限? 一个包含正则表达式url就是一个权限 who what how ---------->True or Flase 2、版本1:用户表与权限url表 对应关系 # 版本1UserInforname pwdpermissionmodels.manytomany(Permissi…

实现打印异常日志_老生常谈SpringAop日志收集与处理做的工具包

场景 :使用Spring Aop拦截参数日志目前大部分做法都基本上大同小异,不想日后每个项目工程都写一份这样的Aop拦截处理日志的代码,甚至代码侵入。我想知道一些相对重要的请求方法的请求参数,响应参数,请求头,以及内部耗时,方法是成功还是失败等等信息。发生错误时我也不知道执行到…

服务器128g内存显示64g,64g内存服务器

64g内存服务器 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。接口名称GetCloudPhoneServerModelsGetCloudPhoneServerModels功能描…

IOPLL动态重配

连接 Avalon -MM接口 mgmt_waitrequest:当 PLL 重配置进程开始后,此端口变高并在 PLL 重配置期间保持高电平。 PLL 重配置进程完成后,此端口变低。 I/O PLL重配写操作步骤: 1、 为mgmt_address和mgmt_writedata设置有效值,并且…

qt中如何模拟按钮点击_如何快速在 Shopify 中加入按钮

假如你会 CSS , HTML , JS 三件套,那么修改 Shopify 代码将不会太难(毕竟一个模板中的代码量还是挺多的,除非深入研究了代码,不然改起来还是会比较麻烦的)。但挺多玩家是不会这三件套的,修改代码来达到添加…

浅谈关于java中的深浅拷贝

一.浅拷贝(shallow copy) 1.如何实现浅拷贝? Object类 是所有类的直接或间接父类,Object中存在clone方法,如下 protected native Object clone() throws CloneNotSupportedException; 如果想要使一个类的对象能够调用clone方法 ,则需要实现Cloneable接口, 并重写 clone方法: p…

iOS开发-Protocol协议及委托代理(Delegate)传值

前言:因为Object-C是不支持多继承的,所以很多时候都是用Protocol(协议)来代替。Protocol(协议)只能定义公用的一套接口,但不能提供具体的实现方法。也就是说,它只告诉你要…

git 查看分支编码_12个常用的Git命令,赶紧记一波!

今天齐姐简单讲下 Git 的实现原理,知其所以然才能知其然;并且梳理了日常最常用的 12 个命令,分为三大类分享给你。本文的结构如下:作者和开发原由Git 的数据模型常用命令资源推荐作者和开发原由Talk is cheap. Show me the code.这…

会做饭的机器人曰记_颜真卿《麻姑仙坛记》:苍劲古朴,体态沉雄,气象宏大...

《麻姑仙坛记》,全称《有唐抚州南城县麻姑山仙坛记》,或称《麻姑山仙坛记》。颜真卿撰并书于大历六年(771)四月。此碑有大、中、小三种刻本,且原石均佚,原拓佳本亦难得。大字本,字径约5厘米&…

Metro UI 菜单(Winform)

我有个项目需要要到菜单导航,就自己动作做了一个,感觉还可以,分享给大家。下载地址:http://files.cnblogs.com/files/dyj057/MetroUIMenu.zip 主要代码: private void SetElements(){if (Elements null) return;int eWidth Bord…

echarts 山东地图_用Python画中国地图,实现各省份数据可视化

第一步:安装pyechartspyecharts是一款将python与echarts结合的强大的数据可视化工具,本文使用了0.1.9.4版本pip install pyecharts0.1.9.4第二步:读取数据我的数据是在Excel表格里,如下图:Execel数据使用xlrd(没有就通…

mysql 中某个字段相同的数据拼接起来

2019独角兽企业重金招聘Python工程师标准>>> mysql> select name, GROUP_CONCAT( age SEPARATOR ‘#’) from student group by name; ——————————————————— | name | GROUP_CONCAT( age SEPARATOR ‘#’) | ———————————————…

微信红包系统架构的设计和优化分享

微信红包系统架构的设计和优化分享 编者按:经过2014年一年的酝酿,2015微信红包总量创下历史新高,峰值1400万次/秒,8.1亿次每分钟,微信红包收发达10.1亿次,系统整体运行平稳, 在这里我分享下微信红包背后的技…

FastDFS单机版安装教程

安装清单如下: 一、安装FastDFS 1. 安装libfastcommon 先解压安装包到目录 # unzip libfastcommon-1.0.36.zip 安装编译工具及环境(后面Nginx也会用到这些依赖环境) # yum -y install gcc gcc gcc-c openssl openssl-devel pcre pcre-deve #…

【原创】Chrome最新版(53-55)再次爆出BUG!

2019独角兽企业重金招聘Python工程师标准>>> 前言 今年十月份,我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG!》,不过那个BUG在最新的 Chrome 54 中已经修正。 而今天即将发布的Chrome弱智BUG: 仅 Chrome 53 -…