首页 web前端 js教程 如何在MVC应用程序中使用Jquery_jquery

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

May 16, 2016 pm 04:31 PM
jquery mvc

  前言:转眼间,已经是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);

    

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

jQuery引用方法详解:快速上手指南 jQuery引用方法详解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解:快速上手指南jQuery是一个流行的JavaScript库,被广泛用于网站开发中,它简化了JavaScript编程,并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法,并提供具体的代码示例,帮助读者快速上手。引入jQuery首先,我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入,也可以下载

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

PHP MVC 架构:构建面向未来的 Web 应用程序 PHP MVC 架构:构建面向未来的 Web 应用程序 Mar 03, 2024 am 09:01 AM

引言在当今快速发展的数字世界中,构建健壮、灵活且可维护的WEB应用程序至关重要。PHPmvc架构提供了实现这一目标的理想解决方案。MVC(模型-视图-控制器)是一种广泛使用的设计模式,可以将应用程序的各个方面分离为独立的组件。MVC架构的基础MVC架构的核心原理是分离关注点:模型:封装应用程序的数据和业务逻辑。视图:负责呈现数据并处理用户交互。控制器:协调模型和视图之间的交互,管理用户请求和业务逻辑。PHPMVC架构phpMVC架构遵循传统MVC模式,但也引入了语言特定的功能。以下是PHPMVC

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?在前端开发中,经常会遇到需要操作元素的高度属性的需求。有时候,我们可能需要动态改变元素的高度,而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性,并提供具体的代码示例。在使用jQuery操作高度属性之前,我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

PHP MVC 架构的进阶指南:解锁高级功能 PHP MVC 架构的进阶指南:解锁高级功能 Mar 03, 2024 am 09:23 AM

mvc架构(模型-视图-控制器)是PHP开发中最流行的模式之一,因为它为组织代码和简化WEB应用程序的开发提供了清晰的结构。虽然基本的MVC原理对于大多数Web应用程序来说已经足够,但对于需要处理复杂数据或实现高级功能的应用程序,它存在一些限制。分离模型层分离模型层是高级MVC架构中常见的一种技术。它涉及将模型类分解为更小的子类,每个子类专注于特定功能。例如,对于一个电子商务应用程序,您可以将主模型类分解为订单模型、产品模型和客户模型。这种分离有助于提高代码的可维护性和可重用性。使用依赖注入依赖

了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库,被广泛用于处理网页中的DOM操作和事件处理。在jQuery中,eq()方法是用来选择指定索引位置的元素的方法,具体使用方法和应用场景如下。在jQuery中,eq()方法选择指定索引位置的元素。索引位置从0开始计数,即第一个元素的索引是0,第二个元素的索引是1,依此类推。eq()方法的语法如下:$("s

See all articles