现在做web开发肯定都听说过jQuery,jQuery在ASP.NET MVC被支持的很好,而且据说vs2010中也会集成进去,所以使用ASP.NET MVC了解jQuery肯定有莫大的好处,所以这里利用几个简单的例子来讲解一下jQuery在ASP.NET MVC的中应用。
一、jQuery的引用
对于一个新的ASP.NET MVC项目来说在它的scripts文件夹下已经包含了jQuery的js文件,所以我们在项目中直接引用就可以了,我们可以在View中输入如下代码:
这里的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为:
}
我们重点来解释一下这句:
$.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:
}
4、load(url, [data], [callback]) :载入远程 HTML 文件代码并插入至 DOM 中。
下例中当DropDownList改变时,根据DropDownList中的内容改变列表
View:
Controller:
}
}
三、参考:
《pro_asp_dot_net_mvc_framework》
《Professional ASP.NET MVC 1.0》
四、源码下载