使用jQuery轻松实现Ajax

在asp.net的MVC架构中使用jQuery是一件很容易的事情，而使用jQuery实现Ajax更加简单。生成Asp.Net MVC框架后，已经包含了jQuery脚本，相关环境设置可参看我的另一篇文章：Asp.Net MVC实例。这里，我们仍然借助实例中的环境。在生成的框架中的Scripts文件夹中已经可以看到jQuery的脚本。

我们在Te***odel.cs中创建一个函数，以取得Json数据，仍然使用Tets表，包含两个字段：Id和Name。

 

//JsonDataArray        public static Array GetJsonArray(String name)         {            Array data = null;                try            {                data = (from c in te***b.test ;                where c.***e.Contains(name)                 select new { c.id, c.name }).ToArray();            }catch(ArgumentNullException ae)            {}            return data;        }
 

 

Json数据，简单来说，即使用Key-Value数组形式的数据。然后按默认选项创建一个控制器，生成的控制器只有一个方法：Index()。我们再创建一个方法，以供jQuery调用。完成的代码如下：JQ***yController.cs。注意：在MVC2.0中默认情况中禁止jQuery调用服务器数据，所以必须在代码中增加访问权限：Js***equestBehavior.AllowGet。

 

using System;using Sy***m.Collections.Generic;using Sy***m.Linq;using Sy***m.Web;using Sy***m.Web.Mvc;using Mv***b.Models; namespace Mv***b.Controllers{    public class JQueryController : Controller    {        //        // GET: /JQuery/         public ActionResult Index()        {            return View();        }         public JsonResult FindByName(string name)        {            return Json(Te***odel.GetJsonArray(name), Js***equestBehavior.AllowGet);        }     }}
 

 

然后在Index()上按右键，按默认选项生成一个视图，可在Views/JQuery看到生成的代码：In***.aspx，生成的代码非常简单，我们再插入Script代码，完成如下：

 

<%@ Page Title="" Language="C#" MasterPageFile="~/V***s/Shared/Site.Master" Inherits="Sy***m.Web.Mvc.ViewPage" %>      JQuery        

使用jQuery实现Ajax实例

                                      
 

 

运行项目，在文本框中输入“t”，按“搜索”，在页面没有刷新的情况下显示出查询到的数据，如下图：

 

另外，在Ajax开发中，还可以使用Ajax的基础函数$.ajax进行调试，当出现错误时，可以打印错误信息。例如，对上述的调用可以用下面代码调试：

-