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


Posted in Javascript onNovember 17, 2014

前言:转眼间,已经是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项目看看,如图所示:

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

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

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

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

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

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

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

3.在节点中放置脚本

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

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

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

</head>

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

@{

 ViewBag.Title = "主页";

}

@section scripts{

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>

}

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

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

(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了,后续我们再来深入的探讨下

Javascript 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 #Javascript
JavaScript数组常用操作技巧汇总
Nov 17 #Javascript
jquery 实现返回顶部功能
Nov 17 #Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 #Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 #Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
扩展String功能方法
2006/09/22 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
勤俭节约倡议书
2014/04/14 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫