0

0

如何在MVC应用程序中使用Jquery_jquery

php中文网

php中文网

发布时间:2016-05-16 16:31:00

|

1722人浏览过

|

来源于php中文网

原创

  前言:转眼间,已经是11月中旬了,也从今天开始我要继续在研究asp.net mvc的细节用法,所以将这些读书笔记和个人心得写成博客,让大家也能学习到东西,我阅读的书籍是:asp.net mvc高级编程,下面我就说说mvc中如何使用javascript和jquery。还有我们现在经常使用的ajax。

1.Ajax初步介绍

  (1) 现在我们创建的Web应用程序几乎都要用到Ajax技术,从技术上面讲,Ajax代表异步JavaScript和XML(Asynchronous JavaScript and XML,Ajax)。在实际应用中,他代表在构建具有良好用户体验的响应性Web应用程序时用到的所有技术。

  (2) ASP.NET MVC4是一个现代的Web框架,并且他跟其他现代Web框架一样,从一开始就支持Ajax技术,Ajax支持的核心来自于开源的JavaScript库Jquery。

  (3) 如果我们想要在MVC中使用Ajax,我们就要学习Jquery,关于Jquery不是这篇博客的主要,所以没有学习过的我建议初步的学习一样,我的Jquery学习来源于《锋利的Jquery》。

2.如何在MVC应用程序中使用Jquery

  (1) 当使用Visual Studio项目模版创建新的ASP.NET MVC项目时,它会默认生成使用Jquery需要的所有内容,每个新项目中都回包含一个Scripts文件夹,里面带有很多个.js文件,各位可以新建一个mvc项目看看,如图所示:

   

  (2) JQuery核心库是一个名为Jquery-.js的文件,因为我使用的VS是2012,所以Jquery的版本是1.7.1,这个文件中包含了JQuery源代码的可注释版本。还有一个Jquery-.min.js文件,精简的JavaScript文件在他们的名称中包含了“.min”,顾名思义,他们占用的空间要小于对应的非精简文件(通常情况下要小一半)。他们不包含不必要的空白字符,也不包含注释,并且所有局部变量名称的长度都是一个字符,如果打开一个精简文件,你会看到一堆不可读的JavaScript代码。如图所示:

      

  (2) 精简的JavaScript脚本文件在客户端的行为以及实现的功能与非精简文件一样,然而,由于精简文件叫较小,因此通常都是尽可能的向客户端发送精简文件(因为它可以减少下载的数据字节数,从而加快加载与运行的速度)。

  (3) ASP.NET MVC应用程序中默认的布局试图(_Layout.cshtml)通常情况下用下面的脚本标签引用Jquery的精简版本:

    

  注解:在MVC中如果要使用Jquery,需要将上面的脚本标签通过布局视图放在HTML标记中。

3.在节点中放置脚本

  (1) 向输出中注入脚本的另一种方式是定义用来防治脚本的Razor节,例如:在布局视图(_Layout.cshtml)中,可以渲染一个名为Scripts的节点,并且将其设置为可选。代码如下:

    

    

@ViewBag.Title

    

    

    @RenderSection("scripts", required: false);

宠物商店
宠物商店

目前,PetShop已经从最初的2.0、3.0等版本,发展到了最新的4.0版本。PetShop 4.0使用ASP.NET 2.0技术开发,其中加入了众多新增特性,因此,在性能、代码数量、可扩展性等方面有了重大改善。可以说,学习PetShop 4.0是深入掌握ASP.NET 2.0技术的捷径。本节将引领读者逐步了解PetShop 4.0的方方面面,包括应用程序安装、功能和用户界面简介、解决方案和体系

下载

    

  (2)现在我们可以在引用布局的任何视图中添加脚本姐,用来向该试图的头部注入特定的脚本:Index.cshtml

    @{

     ViewBag.Title = "主页";

    }

    @section scripts{

    

    }

  (3) 这时候我们按F5运行网站,打开网站首页:http://localhost:34147/home/index,我们可以看到我们添加的jquery.validate.js文件显示在引用JS的最下面了。如图所示:

    

  (4) 上面介绍的方法可以设置脚本标签的准确位置,以确保需要的脚本以合适的顺序出现。

4.Scripts目录下的其他文件

  (1)下来我们探讨一下当我们创建MVC应用程序的时候,系统默认的已经为我们添加了一个文件夹Scripts,里面有很多的JavaScript文件,那么这些文件是干什么的?下面我们分开说一下

  (2)除了Jquery核心库之外,Scripts目录中还包含两个Jquery插件:Jquery UI和Jquery验证,这些扩展增加了Jquery核心库的能力。

  (3)有人可能也发现了在Scripts中还存在名称中包含”vsdoc”的文件,这些文件是专门协助Visual Studio更好的提供智能感知功能服务的,在程序中没必要直接引用这些文件,也没有必要把他们发送到客户端,当使用自定义的脚本文件中的引用脚本时,Visual Studio会自动发现这些文件。

  (4)目录里名称中包含”unobtrusive”字样的文件是由Microsoft编写的,这些非侵入式脚本集成了Jquery和ASP.NET MVC框架,从而提供了前面提到的非侵入式JavaScript特性,如果要实现ASP.NET MVC框架的Ajax特性,就需要使用这些文件。

  (5)目录中还包含一些名称以单词Microsoft开头的文件(像MicrosoftAjax.js),它们要么包含Microsoft Ajax库,要么在Microsoft Ajax库的基础上进行构建,因为ASP.NET MVC3应用程序默认依赖与Jquery,所以在ASP.NET MVC3框架下创建的程序不需要这些文件,因此可以安全的将它们从应用程序中移除,这里之所以包含这些文件,主要是为了实现向后兼容。

好了,今天就先到这里吧,详细小伙伴们已经知道如何在MVC中使用jQuery了,后续我们再来深入的探讨下

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP+MySQL基础入门课程
PHP+MySQL基础入门课程

共113课时 | 6.9万人学习

PHP MySQL基础编程课
PHP MySQL基础编程课

共111课时 | 8.5万人学习

PHP编程(基础知识点汇总)
PHP编程(基础知识点汇总)

共85课时 | 5.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号