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

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

　　　　　　

　　(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的最下面了。如图所示：

　　　　

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

赞 (0)

相关推荐

  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码

    这两天在使用Asp.net MVC 4开发COMET消息通知机制,在后端使用异步线程对消息进行订阅,客户端通过AJAX长连接请求MVC中的ACTION,如:http://localhost/event/imageSet,即表示获取ImageSet对象的变更消息(新增,更新和删除消息). 1.事件消息的类IEventEntity<TEntity>类的定义 复制代码 代码如下: public interface IEntityEvent<TEntity>    {        //变

  • .net mvc页面UI之Jquery博客日历控件实现代码

    .net mvc页面UI之Jquery博客日历控件实现代码

    一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get

  • jquery提交表单mvc3后台处理示例

    JQuery提交表单 复制代码 代码如下: $(document).ready(function () {           $("#btnLogin").click(function () {               $.ajax({                   url: '/Home/Login',                   data: '{ "account":"' + $("#account").val(

  • ASP.NET MVC引入JQUERY JQRTE控件

    主要步骤如下: 1,在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息 复制代码 代码如下: public class ViewDataUploadFilesResult { public string message { get; set; } //public int Length { get; set; } public string imagepath { get; set; } public string error { get; set; }

  • 基于MVC3方式实现下拉列表联动(JQuery)

    上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异. 直接上代码: 复制代码 代码如下: public class DP_Provice { public int proviceID { get; set; } public string ProviceName { get; set;

  • 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{firstName:"李",lastName:"李大嘴"}} 那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象

  • 使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

    JQuery UI Widgets是本人非常喜欢的一套前端JS组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件---jtable (http://www.jtable.org),包含了基本的列表和编辑窗口,比起jqGrid,jquery easyui grid或者extjs grid,jtable的代码非常简洁.对于grid功能要求

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

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

    前言:转眼间,已经是11月中旬了,也从今天开始我要继续在研究ASP.NET MVC的细节用法,所以将这些读书笔记和个人心得写成博客,让大家也能学习到东西,我阅读的书籍是:ASP.NET MVC高级编程,下面我就说说MVC中如何使用JavaScript和Jquery.还有我们现在经常使用的Ajax. 1.Ajax初步介绍 (1) 现在我们创建的Web应用程序几乎都要用到Ajax技术,从技术上面讲,Ajax代表异步JavaScript和XML(Asynchronous JavaScript and

  • 在Winform程序中使用Spire.Pdf实现页面添加印章功能的实现

    在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的处理,如果文档很多,且仅仅需要电子文档的就很麻烦了,需要打印再盖章再扫描,而且电子文档往往有失真的问题.本篇随笔介绍如何在在Winform程序中使用Spire.Pdf实现页面添加印章处理,解决这一痛处. 1.在PDF增加印章处理 首先我们来了解下,用Adobe Acrobat Reader 进行文档的印章处理下,看看如何实现的,后面再用软件实

  • 如何在Java程序中访问mysql数据库中的数据并进行简单的操作

    如何在Java程序中访问mysql数据库中的数据并进行简单的操作

    在上篇文章给大家介绍了Myeclipse连接mysql数据库的方法,通过本文给大家介绍如何在Java程序中访问mysql数据库中的数据并进行简单的操作,具体详情请看下文. 创建一个javaProject,并输入如下java代码: package link; import java.sql.*; /** * 使用JDBC连接数据库MySQL的过程 * DataBase:fuck, table:person: * 使用myeclipse对mysql数据库进行增删改查的基本操作. */ public

  • ASP.NET MVC中使用jQuery时的浏览器缓存问题详解

    介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

  • Asp.net MVC 中利用jquery datatables 实现数据分页显示功能

    Asp.net MVC 中利用jquery datatables 实现数据分页显示功能

    1.Controller中的方法代码如下: 由于方法中的存储过程没有带分页参数,所以还可以有继续优化的空间. /// <summary> /// 获取测点列表 /// </summary> /// <returns></returns> [HttpPost] public JsonResult GetMeasurePointList(string TreeID, string TreeType, int sEcho, int iDisplayStart, i

  • windows系统下，如何在C#程序中自动安装字体

    1.1.使用代码安装字体 注意:安装字体时,需要windows的管理员权限. [DllImport("kernel32.dll", SetLastError = true)] public static extern int WriteProfileString(string lpszSection, string lpszKeyName, string lpszString); [DllImport("gdi32")] public static extern i

  • C# 如何在WINForm程序中创建XML文件

    <?xml version="1.0" encoding="gb2312"?> <FilesInformation>   <version>1.0.1818.42821</version>   <description>说明</description>   <FileItem    FileName="name"   FileVersion="sdf"

  • 如何在Angular2中使用jQuery及其插件的方法

    如何在Angular2中使用jQuery及其插件的方法

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:http://www.jb51.net/ar

  • 教你如何在Node.js中使用jQuery

    想要在NodeJs中使用jQuery? 首先,我们得安装jquery, npm install jquery .安装后的版本是 3.1.0 接着,第一感觉我们会使用 var $ = require('jquery') . 将以下代码保存为app.js var $ = require('jquery') $("body").append("<div>TEST</div>"); console.log($("body").ht

  • asp.net 4.0+ webform程序中集成mvc4

    asp.net 4.0+ webform程序中集成mvc4

    本文为大家分享了asp.net 4.0+ webform程序中集成mvc4的方法,供大家参考,具体内容如下 1.新建packages.config文件,里面加上必要的程序集 <?xml version="1.0" encoding="utf-8"?> <packages> <package id="Microsoft.AspNet.Mvc" version="4.0.20710.0" target

随机推荐