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

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

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

定义CommentController,代码如下:

public class CommentController : Controller
{
   private IList<string> _comments = new List<string>();

   public ActionResult Index()
   {
     return View();
   }

   public void AddCommentServer()
   {
      string comment = Request["comment"].ToUpper();
     _comments.Add("<li>" + comment + "</li>");
     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 (typeof ActiveXObject != 'undefined') {
      try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
    } else if (XMLHttpRequest) {
      //this works for Firefox, Safari, Opera
      xhr = new XMLHttpRequest();
    } else {
      alert("对不起,你的浏览器不支持ajax");
    }

    return xhr;
  }

  function getMessage() {
    //get our xml http request object
    var xhr = getXmlHttpRequest();

    //prepare the request
    xhr.open("GET", "Comment/AddCommentServer?comment=" + document.getElementById("Comment").value, true)

    //setup the callback function 
    xhr.onreadystatechange = function() {
      //readyState 4 means we're done 
      if(xhr.readyState != 4) return;

      //populate the page with the result
      document.getElementById('comments').innerHTML = document.getElementById('comments').innerHTML + xhr.responseText;
    };

    //fire our request
    xhr.send(null);
  }

时间: 2024-09-07 20:08:11

Asp.net mvc 2中使用Ajax的三种方式的相关文章

一起谈.NET技术,Asp.net mvc 2中使用Ajax的三种方式

     在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板.     首先看一下原始的Ajax的调用的:      定义CommentController,代码如下: public class CommentController : Controller{private IList<string> _commen

WPF中实现PropertyGrid的三种方式

由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章 介绍在WPF中实现PropertyGrid的三种方式,三种方式都是俺平时使用时总结出 来的. 第一种方式:使用WindowsForm的PropertyGrid控件. 用过WPF的童鞋都晓得,可以通过WindowsFormsHost将WindowsForm的控件宿 主到WPF中使用.很简单,分为简单的3步. 第一步:引用dll:在WPF应用程序中引入System.Windows.Forms.dll. 第二步:引用命

JS中创建函数的三种方式及区别_基础知识

1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2; }; 两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问:而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行. 自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,

详析Spring中依赖注入的三种方式_java

前言 平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程序员实例化,而是通过spring容器帮我们new指定实例并且将实例注入到需要该对象的类中.依赖注入的另一种说法是"控制反转",通俗的理解是:平常我们new一个实例,这个实例的控制权是我们程序员,而控制反转是指new实例工作不由我们程序员来做而是交给spring容器来做. 在Sprin

JavaScript中绑定事件的三种方式及去除绑定_javascript技巧

在JavaScript中,有三种常用的绑定事件的方法 第一种办法 函数写在结构层里面 非常不好,使页面很混乱,行为与结构得不到分离 <input type="button" onclick="func();"> 绑定事件的第二种办法 好处:行为与结构开始分离 缺点: 第二种绑定方式中只能给一个时间绑定一个处理函数 即.onclick = fn1;  .  onclick = fn2 最终的效果是onclick = fn2 <select name=

Asp.net Mvc2中重构View的三种方式

我们在Asp.net mvc的view开发过程中,如果不注意可能会写大量的重复的代 码.这篇文章介绍3种方式重构View的代码,来减少View中的重复代码. 1.母板页 在Asp.net mvc中保留了母板页的使用,我们可以使用母板页对我们的站点进 行布局.看下面母板页的代码: <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html PU

asp.net 实现静态页面累加访问量的三种方式_实用技巧

静态页面 staticHtml.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> &

web.config中配置数据库连接的三种方式

今天中web.cofig数据库教程连接方式 有三种,下面我们来看看web.config中配置数据库连接的方式 在ASP.NET中有两种配置数据库连接代码的方式,它们分别是 appSettings 和 connectionStrings .在使用 appSettings 和 connectionStrings 配置数据库连接代码时,可分别在 <configuration> 下添加如下代码: 1. appSettings <appSettings>    <add key=&qu

Struts2中的数据处理的三种方式对比

对数据操作的所有方法:(即把数据保存到域中) 主要使用的是方式2和方式3: 方式1:直接获取ServletApi,核心类是ServletActionContext提供的静态的方法; 方式2:通过ActionContext获取不同(代表request/session/application)的map: 方式3:实现接口的方法:(RequestAware/SessionAware/ApplicationAware); 方式1和方式2简介: 第一步: 引包,省去 第二步:配置Struts2的过滤器 1