如何在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实现兼容IE6与IE7的DIV高度
May 13 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JavaScript类的写法
2016/09/17 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
js实现验证码功能
2020/07/24 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python获取某一天是星期几的方法示例
2017/01/17 Python
python交互式图形编程实例(二)
2017/11/17 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
美国性感女装网站:bebe
2017/03/04 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
银行贷款承诺书
2014/03/29 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
广告业务员岗位职责
2015/02/13 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript