现在做web开发肯定都听说过jQuery,jQuery在ASP.NET MVC被支持的很好,而且据说vs2010中也会集成进去,所以使用ASP.NET MVC了解jQuery肯定有莫大的好处,所以这里利用几个简单的例子来讲解一下jQuery在ASP.NET MVC的中应用。

一、jQuery的引用

对于一个新的ASP.NET MVC项目来说在它的scripts文件夹下已经包含了jQuery的js文件,所以我们在项目中直接引用就可以了,我们可以在View中输入如下代码:

head>

这里的min版本去除了空格,注释,改写了长文件名,下载的时候所用过的时间更少。

在Vs中使用jQuery有一个比较大的好处是可以利用智能感知,jQuery的团队和微软的团队共同开发了一个js文件用于在vs中的jQuery可以智能感知,但需要在View中输入

%>

不过我测试这个的时候发现如果在具体的View中使用了这个引用会影响在View中代码的智能感知,但如果放在mastpage中就没什么问题了。

二、jQuery中使用Ajax方式:

1、jQuery.get(url, [data], [callback], [type])

urlString:待载入页面的URL地址

data (可选)Map:待发送 Key/value 参数,在服务器端可以用Request获得。

callback (可选)Function:载入成功时回调函数。

type (可选)String:返回内容格式,xml, html, script, json, text, _default。

我们现在要做一个对列表进行查询的ajax请求,前端视图为:

>

NewsListPartial.ascx中的内容为:

>

Controller为:

 View(news);
        }

我们重点来解释一下这句:

$.get($(this).attr("href"), { title: $("#search").attr("value") }, function(response) {
                $("#results").html(response);
            })

$(this).attr("href"):获得当前链接

{ title: $("#search").attr("value") }:调用url时传递的参数,这个参数就是TextBox的值。

function(response) {
                $("#results").html(response);
            }:当ajax请求完之后会调用这个函数,这个函数会将id=results的div替换成返回的文本内容。

2、jQuery.post(url, [data], [callback], [type]) 的用法和get的用法很相似

略(见源码)

3、jQuery.getJSON(url, [data], [callback]) :通过 HTTP GET 请求载入 JSON 数据。
View:


Controller:

 View();
        }

 

4、load(url, [data], [callback]) :载入远程 HTML 文件代码并插入至 DOM 中。

下例中当DropDownList改变时,根据DropDownList中的内容改变列表

View:

>

 

Controller:

 View(news);
            }
        }

 

三、参考:

《pro_asp_dot_net_mvc_framework》

《Professional ASP.NET MVC 1.0》

四、源码下载

相关文章: