捆绑包的使用

最新推荐文章于 2022-11-06 17:42:14 发布

极客研究者

最新推荐文章于 2022-11-06 17:42:14 发布

阅读量1.7k

点赞数

分类专栏： ASP.NET MVC 文章标签： asp.net mvc c# .net

本文链接：https://blog.csdn.net/qq_34550459/article/details/106327047

版权

ASP.NET MVC 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在一般的Web项目开发中,如果需要引入外部的JS或者CSS文件,都是通过script、link标签的形式引入,这些的话在页面加载时浏览器需要发送一些资源的请求,并且在其他页面中,需要使用的话,则是通过这种方式使用。

1.新建MVC项目,在Home控制器中添加Edit动作方法:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC_Project08.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Edit()
        {
            return View();
        }

        public ActionResult Success()
        {
            return View();
        }
    }
}

添加Edit动作方法对应的视图:


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户编辑页</title>
    <script type="text/javascript" src="~/Content/js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#username").val("jack bryant");
            $("#age").val(29);


        });

    </script>
</head>
<body>
    <div> 
        <form id="editForm" action="/Home/Success">
            用户名:<input type="text" name="username" id="username" /><br />
            密码:<input type="password" name="password" id="password"/><br/>
            年龄:<input  type="text" name="age" id="age"/><br />
            家庭住址:<input type="text" name="address" id="adderess" /><br />
            <input type="submit" value="提交"/>
        </form>
    </div>
</body>
</html>

试想一下,如果一个web页面需要引用大量外部的js文件或者css文件,这样的引入势必需要一个不小的带宽,需要请求大量的外部资源,那又该如何解决这类问题?
答:在MVC框架中,提供以捆绑包的形式将JavaScript和CSS文件作为一个单一的单元进行处理

定义捆绑包:
通常约定在名为BundleConfig.cs的配置文件中定义捆绑包,该文件位于App_Start文件夹中。

在Global.asax全局文件Application_Start()方法:

BundleConfig.RegisterBundles(BundleTable.Bundles);

注册文件捆绑包

using System.Web;
using System.Web.Optimization;

namespace MVC_Project08
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            /*
              ScriptBundle(virtualPath)对象可以指向多个捆绑包
              virtualPath:虚拟路径名称
            如:
            new ScriptBundle(virtualPath).Include().Include()
            --> 一个捆绑包可以捆绑多个文件
             */

            bundles.Add(new ScriptBundle("~/js/jquery").Include(
                        "~/Content/js/jquery.min.js"));
                        
			 bundles.Add(new StyleBundle("~/css/style").Include(
                       "~/Content/css/style.css"));
        }
    }
}

我们可以分别创建脚本文件和样式表的捆绑包,重要的是将这些文件类型分开来,因为MVC框架对这些文件的优化是不同的。

ScriptBundle类 ------------>JS脚本
StyleBundle类 -------------> CSS脚本

以上两个类都有一个构造器参数:
ScriptBundle(String virtualPath)
StyleBundle(String virtualPath)

virtualPath:引用捆绑包包的路径
该路径作用:
作为浏览器请求捆绑包内容的一个URL.

其Include()方法用来绑定指定的文件:
Include(String[] paths):可以指定一组需要绑定的文件的物理路径

比如说想捆绑某一路径下的所有js文件或者css,可以使用星号通配符(*)即可：

bundles.Add(new ScriptBundle("~/js/jquery").Include( "~/Content/*.js"));

一个捆绑包绑定多个文件的方式:
方式一:

bundles.Add(new ScriptBundle("~/bundles/js").Include(
new string[] { "~/Content/js/jquery.js","~/Content/js/topNav.js","~/Content/js/focus.js", "~/Content/js/shop_home_tab.js" }));

bundles.Add(new StyleBundle("~/bundles/css").Include(
new string[] {"~/Content/css/base.css","~/Content/css/shop_common.css","~/Content/css/shop_header.css", "~/Content/css/shop_home.css"}));

方式二:

bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/css/base.css").Include("~/Content/css/shop_common.css"));

注意:如果涉及到文件的加载优先级,那就需要单独引入

在View页面中运用捆绑包:
捆绑包是使用 @Scripts.Render和@Styles.Render辅助器方法来添加。


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户编辑页</title>
    @*<script type="text/javascript" src="~/Content/js/jquery.min.js"></script>*@
    @*引入捆绑包*@
    @Scripts.Render("~/js/jquery")
    @Styles.Render("~/css/style")
    <script>
        $(function () {
            $("#username").val("jack bryant");
            $("#age").val(29);
        });
    </script>
</head>
<body>
    <p id="message">Believe Yourself!</p>
    <div> 
        <form id="editForm" action="/Home/Success">
            用户名:<input type="text" name="username" id="username" /><br />
            密码:<input type="password" name="password" id="password"/><br/>
            年龄:<input  type="text" name="age" id="age"/><br />
            家庭住址:<input type="text" name="address" id="adderess" /><br />
            <input type="submit" value="提交"/>
        </form>
    </div>
</body>
</html>

Result:
在这里插入图片描述

总结:
捆绑包的优点:
浏览器的请求数少了许多(这减少了发送给客户端的数据量),并且返回时发送的数据也比较少。—所有这些都有助于保持Web应用程序运行成本的降低
有助于管理js和css文件

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
捆绑包的使用

在一般的Web项目开发中,如果需要引入外部的JS或者CSS文件,都是通过script、link标签的形式引入,这些的话在页面加载时浏览器需要发送一些资源的请求,并且在其他页面中,需要使用的话,则是通过这种方式使用。1.新建MVC项目,在Home控制器中添加Edit动作方法:using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace
复制链接

扫一扫