ASP.NET MVC与jQuery的结合使用

如果有ASP.NET和JavaScript的Web开发经验,可能已经听说过或者对这两种技术的结合感兴趣。

开始使用并不复杂,所以不会让这篇文章变得过于复杂。首先澄清一些事情,然后将进入核心内容。

请确保查看博客上的完整系列。

ASP.NET MVC框架是什么?

模型-视图-控制器(Model-View-Controller,简称MVC)是一种设计模式,它帮助以一种方式组织代码,使得可以清晰地分离数据、行为和业务规则以及用户界面。这些部分分别被称为模型、控制器和视图。

ASP.NET MVC框架为提供了工具支持、约定和一组基础类,以实现这种模式,而不是ASP.NET中使用的默认页面-控制器模式。

jQuery是什么?

在HTML文档中,JavaScript可以访问每一个元素。有了JavaScript,可以操作DOM,编写脚本来动画化网页的部分,发起AJAX请求或执行验证。

一旦编写了这些代码,然后需要为它保持一个存储库(不想再次编写它)。当想要一个新功能时,可能需要进行破坏性更改。将会遇到性能问题和浏览器兼容性问题,甚至可能是平台相关问题。

jQuery是一个JavaScript代码库,想要做的事情已经完成了。它是跨浏览器兼容的,有许多预构建的组件,并且随着每个版本的发布,性能都有所提高。

将jQuery想象成一种“对一组东西做某事”的方式,即使它只是一组中的一个。几乎总是从找到“这些东西”开始,然后对它们执行操作。“这些东西”是DOM的元素,如链接、DIV标签、图像、表单元素、表单或文档根本身。

基本步骤

对于那些不耐烦的人来说(就像一样):

创建一个ASP.NET MVC 2 Web应用程序

将jQuery引用添加到Site.Master以在所有页面上启用jQuery

使用if(false)技术在部分视图上启用IntelliSense

使用script引用在独立的JavaScript文件上启用IntelliSense

详细步骤

启动Visual Studio 2010并创建一个新项目。导航到Web类别并选择ASP.NET MVC2 Web应用程序。为项目命名(使用了Spike.jQueryMvc),然后按OK。

Visual Studio会要求创建一个单元测试项目。现在先不要(将在稍后的文章中介绍测试)。完成向导,将拥有MVC项目。

打开Site.Master文件,可以在解决方案资源管理器中的Views -> Shared中找到它。展开Scripts文件夹,以便可以看到默认脚本。

在Site.Master的HEAD标签中,拖动jQuery的min文件,然后在它下面,拖动jQuery的vsdoc文件。用if(false)语句包裹vsdoc文件。vsdoc文件永远不会被写入浏览器(因为false永远不会是true),但Visual Studio会通过这个技巧拾取文件并启用IntelliSense。

现在,可以使用jQuery和Visual Studio 2010的出色IntelliSense了。

现在,导航到Views -> Home中的Index.aspx页面并打开它。在关闭的P标签后,添加以下代码:

<script language="javascript" type="text/javascript"> $(function () { $("p").click(function () { $(this).slideUp(); }); }); </script>

会注意到,当输入时,Visual Studio会弹出jQuery函数的帮助文本。

按F5运行应用程序。系统会提示修改Web.Config文件;接受这个。

浏览器将打开,将看到一个稍微修改过的默认MVC页面。点击文本“To learn more about ASP.NET MVC”,看看jQuery在行动。

FTW?那是如何工作的?

这里是基础知识:

一个SCRIPT标签被添加到文档中

使用jQuery快捷方式等待文档加载并运行一个函数

加载后,找到了DOM中的所有P元素,并创建了一个事件处理程序来响应用户点击。这是用一个匿名函数完成的

在点击事件处理程序中,使用了另一个jQuery快捷方式$(this)来选择用户点击的P元素,并告诉它使用slideUp动画

第一个快捷方式基本上是一个事件处理程序——在这种情况下,是一个匿名函数——当文档加载时执行。应该在每个页面上使用这个,因为jQuery找不到尚未添加到DOM的元素。

$(function () { // ... });

在这个函数内部——再次,这个函数在DOM加载后执行——使用jQuery选择器来找到文档中的所有P元素,并将点击处理程序附加到它们上。

$("p").click(...);

选择器可以与任何元素、ID或类一起工作。对于ID和类,使用CSS风格的语法(#和.),所以对于一个ID为“first-name”的文本输入,可以像这样用jQuery找到它:

$("#first-name");

剩下的就是用作事件处理程序的匿名函数。

function () { $(this).slideUp(); }

为点击的元素调用slideUp动画,并让jQuery处理它。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485