在Visual Studio 2013项目中实现jQuery插件

Question

I created a new ASP.NET Web Forms project in Visual Studio 2013. This installed jquery-1.10.2.js by default. 我在Visual Studio 2013中创建了一个新的ASP.NET Web窗体项目。默认情况下会安装jquery-1.10.2.js。

I used the Package Manager Console to Install-Package jQuery -Version 1.11.2 because the Manage Nuget Packages only offered Nuget 2.1.3 by default. 我使用软件包管理器控制台安装jQuery版本1.11.2，因为默认情况下“管理Nuget软件包”仅提供Nuget 2.1.3。 I needed the earlier jQuery. 我需要早期的jQuery。

I have been using VS 2010, and I'm completely not familiar with the new ASP.NET 4.5 ScriptManager. 我一直在使用VS 2010，但对新的ASP.NET 4.5 ScriptManager完全不熟悉。 With VS 2010 for jQuery Plugins, you simply reference the .js and .css in the head section of the Master Page. 使用VS 2010 for jQuery插件，您只需在母版页头部分引用.js和.css。

<head id="Head1" runat="server">
   <link href="css/colorpicker.css" rel="Stylesheet" type="text/css" />
   <script type="text/javascript" src="js/colorpicker.js"></script>
</head>

With ASP.NET 4.5 I'm a little unclear about how to add a 3rd party jQuery Plugin, because it appears that all of the .js files are implemented via the ScriptManager, not simply referenced within script tags in the head section. 使用ASP.NET 4.5时，我不清楚如何添加第三方jQuery插件，因为似乎所有的.js文件都是通过ScriptManager实现的，而不是在开头的script标签中简单引用的。

My Google research: "install jquery plugin in visual studio 2013 web form" has found issues dealing with: the Nuget Package Manager, Installing jQuery, or Visual Studio Extensions. 我的Google研究发现：“在Visual Studio 2013 Web表单中安装jquery插件”发现了以下问题：Nuget软件包管理器，安装jQuery或Visual Studio扩展。

I haven't found anything that clearly explains how to add 3rd party jQuery Plugins to the ASP.NET Web Forms application with Visual Studio 2013. 我还没有发现任何能清楚说明如何使用Visual Studio 2013将第三方jQuery插件添加到ASP.NET Web窗体应用程序的内容。

Here are the js references in my newly created Master Page in VS 2013: 这是我在VS 2013中新创建的母版页中的js参考：

     <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

This new VS 2013 Web Form Project also has: packages.config, references.js, BundleConfig.cs 这个新的VS 2013 Web表单项目还具有：packages.config，references.js，BundleConfig.cs

I would really appreciate your guidance. 非常感谢您的指导。

Answer 1

I usually add custom scripts in their own bundle under BundleConfig.cs in the /App_Start folder as follows: 我通常将自定义脚本添加到/ App_Start文件夹中BundleConfig.cs下自己的捆绑中，如下所示：

ScriptManager.ScriptResourceMapping.AddDefinition(
    "my-plugin", new ScriptResourceDefinition {
        Path = "~/Scripts/my-plugin.min.js",
        DebugPath = "~/Scripts/my-plugin.js",
    }
);

Then you can reference the bundle in the ScriptManager in your Master Page (after the jQuery ScriptReference) like this: 然后，您可以在母版页（在jQuery ScriptReference之后）的ScriptManager中引用捆绑软件，如下所示：

<asp:ScriptReference Name="my-plugin" />

This allows you to use different .js files for debugging vs production. 这使您可以使用不同的.js文件进行调试和生产。 If you only have one script version, then I believe you can simply omit the DebugPath line. 如果您只有一个脚本版本，那么我相信您可以省略DebugPath行。

If the plugin requires the addition of any CSS files, they can be added to Bundle.config as follows: 如果插件需要添加任何CSS文件，则可以将它们添加到Bundle.config中，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <!-- ...other files likely included here -->
    <include path="~/Content/my-plugin.css" />
  </styleBundle>
</bundles>

在Visual Studio 2013项目中实现jQuery插件

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-16 19:59:14

在Visual Studio 2013项目中实现jQuery插件

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-16 19:59:14

解决方案1
0 已采纳 2015-03-16 19:59:14