在ASP.NET MVC中,有一个官方提供的AJAXHelper帮助我们做AJAX相关的东西。我用传统的jQuery AJAX技术和AJAXHelper分别实现同一个demo,特此记录一下。

由于是在MVC中,所以创建了一个Home控制器,里面有两个Action,Login()用于一个普通页面,GetInfo()用于返回一个json字符串,定义如下

public class HomeController : Controller
{
public ActionResult Login()
{
return View();
}
public JsonResult GetInfo()
{
return Json(new
{
time = DateTime.Now.ToString(),
flag=new Info[] { new Info { Name="小明",Age= },new Info { Name="小秋",Age= } }
},JsonRequestBehavior.AllowGet);
}
}
public class Info
{
public string Name { get; set; }
public int Age { get; set; }
}

Info类是一个实体模型,主要是让返回的json字符串复杂一点,嘿嘿。

好了,后台完了,下面就分别给出两种不同的处理方法

一:jQuery AJAX:

  

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<script src="~/scripts/jquery-2.1.4.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#get").click(function () {
$.ajax({
cache:false,
type: "get",
dataType:"json",
url: "getinfo",
success: function (data, textStatus) {
$("#main").html(data.time);
var bodyTag=$("body");
bodyTag.append("<table>");
$.each(data.flag, function () {
$("body").append("<tr><td>"+this.Name+"</td><td>"+this.Age+"</td></tr>");
})
bodyTag.append("</table>");
}
});
})
})
</script>
</head>
<body><input type="button" id="get" value="获取信息" /><div id="main"></div>
</body>
</html>

在上面的jQuery代码中,我在dom完成加载后,给id为“get”的按钮注册了一个点击事件,点击该按钮后会发起ajax请求,请求的方式为get,返回数据类型为json格式,然后再请求成功success的回调函数中我用了一些jquery的方法操作dom,把返回的数据显示出来。

以上就是用直接调用jQuery AJAX的方法,至于ajax的请求参数我们可以任意修改,留个参考网址:http://www.jquery123.com/jQuery.ajax/

二:利用AJAXHelper

@model WebApplication1.Models.UserViewModel
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<script src="~/scripts/jquery-2.1.4.min.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function OnSuccess(data) {
var main = document.getElementById("main");
var table = document.createElement("table");
for (var i = 0; i < data.flag.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + data.flag[i].Name + "</td>" + "<td>" + data.flag[i].Age + "</td>";
table.appendChild(tr);
}
main.appendChild(table);
}
</script>
</head>
<body>
@using (Ajax.BeginForm("getinfo",new AjaxOptions {OnSuccess= "OnSuccess", HttpMethod="Get", AllowCache=false}))
{
<input type="submit" id="get" value="获取信息" />
}
<div id="main">
</div>
</body>
</html>

using的目的在于让表单标签闭合,可以看到AJAXHelper发起ajax请求也是比较简单。和jQuery AJAX直接操作没有区别,不过vs的智能提示还是不错的。这个只有在AJAXHelper中可以体验到。

总结:两种都能完成AJAX请求,但是AJAXHelper和jQuery AJAX是有区别的。具体区别等我研究通了再来记录。嘿嘿

做demo过程中遇到的几个问题:

1.当一个Action返回JsonResult类型时候,Json()方法如果不加JsonRequestBehavior.AllowGet参数,当用get方法请求时会发生500错误。

2.在dom中操作json字符串时候,注意大小写。

【Asp.net MVC】AJAXHelper 和jQueryAjax的更多相关文章

  1. asp.net mvc AjaxHelper 获取 JSON 的方法

    默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...

  2. 仅此一文让你明白ASP.NET MVC 之View的显示(仅此一文系列二)

    题外话 一周之前写的<仅此一文让你明白ASP.NET MVC原理>受到了广大学习ASP.NET MVC同学的欢迎,于是下定决心准备把它写成一个系列,以满足更多求知若渴的同学们.蒋金楠老师已 ...

  3. 应用程序框架实战三十三:表现层及ASP.NET MVC介绍(二)

    最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...

  4. 14、ASP.NET MVC入门到精通——Ajax

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...

  5. Asp.Net MVC<八>:View的呈现

    ActionResult 原则上任何类型的响应都可以利用当前的HttpResponse来完成.但是MVC中我们一般将针对请求的响应实现在一个ActionResult对象中. public abstra ...

  6. ASP.NET MVC分页组件MvcPager 2.0版发布暨网站全新改版

    MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法,该分页控件的最初的实现方法借鉴了网上流行的部分源代码, 尤其是ScottGu的PagedList< ...

  7. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  8. ASP.NET MVC运行机制源码剖析

    我们都知道ASP.NET首先是从Global.aspx中开始运行的, 在Application_Start()中添加路由映射后, 就由URLRouting组件创建IRouteHandler并执行, 在 ...

  9. ASP.NET MVC视图中的@Html.xxx(...)

    问题 在视图页中@Html.xxx(...)是什么?如何被执行? 如下图所示: 解疑 视图页中@Html.xxx(...)涉及的内容有: 视图页被编译后的类继承自 WebViewPage<T&g ...

随机推荐

  1. ES6系列_5之数字操作

    下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字, ...

  2. 学习记录:CONCAT()

    连接多个字符串 SELECT * from t_info where phone = CONCAT('12345','678900')

  3. 个人tools封装

    /** * jQuery 扩展 */(function ($) { $.fn.extend({ /** * 目标为任意对象元素 * 同时绑定单击和双击事件 */ bindClick: function ...

  4. oracle 截取字符(substr),检索字符位置(instr)

    常用函数:substr和instr 1.SUBSTR(string,start_position,[length])    求子字符串,返回字符串 解释:string 元字符串 start_posit ...

  5. ADO Connection failure

    使用ado连接,频繁报错.为何?是网络的问题吗?太灵敏了.Connection failure. 跟大文本又关系??

  6. yii mailer 扩展发送邮件

    // 将mailer扩张放到 yii 的extension目录下 $message = 'Hello World!'; $mailer = Yii::createComponent('applicat ...

  7. Symfony 建立一个Bundle

    如果说,这个时候你萌生了一个去看一看Symfony源码的想法,个人建议还是算了,看了之后,你就会感到非常迷茫.因为他实在是大于绝大部分你使用过的框架,并且有多达近二十个的插件,使用了一些非常精巧的设计 ...

  8. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  9. Create a Basic Shader in Shader Forge

    [Create a Basic Shader in Shader Forge] 1.打开ShaderForge.Window-> Shader Forge.(打开速度较慢) 2.通过NewSha ...

  10. c++中冒号(:)和双冒号(::)的用法

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; X ...