mvc中如何引入js和css

最新推荐文章于 2022-06-14 14:28:29 发布

qq_34787830

最新推荐文章于 2022-06-14 14:28:29 发布

阅读量7.9k

点赞数 2

App_Start文件夹中的BundleConfig.cs文件

[csharp]view plaincopy 
   
 using System.Web;  
 using System.Web.Optimization;  
   
 namespace WebApp  
 {  
     public class BundleConfig  
     {  
         // 有关绑定的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301862  
         public static void RegisterBundles(BundleCollection bundles)  
         {  
             //创建一个虚拟目录“~/bundles/jquery” 这个虚拟目录的名字可以随便你取（用一个虚拟路径来初始化Bundle的实例，这个路径并不真实存在）  
             bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                         //在虚拟目录中添加了2个绝对路径的js文件  
                         "~/Scripts/jquery-{version}.js",  
                         "~/Scripts/jquery.validate.min.js"));  
   
             //创建一个虚拟目录“~/Content/css” 这个虚拟目录的名字是可以随便你取（用一个虚拟路径来初始化Bundle的实例，这个路径并不真实存在）  
             bundles.Add(new StyleBundle("~/Content/css").Include(  
   
                       //在虚拟目录中添加了2个css文件  
                       "~/Content/bootstrap.css",  
                       "~/Content/site.css"));  
   
   
   
         }  
   
   
     }  
 }  

Test控制器

[csharp]view plaincopy 
   
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.Mvc;  
   
 namespace WebApp.Controllers  
 {  
     public class TestController : Controller  
     {  
         //  
         // GET: /Test/  
         public ActionResult Index()  
         {  
             return View();  
         }  
     }  
 }  

视图

[html]view plaincopy 
   
 @{  
     Layout = null;  
 }  
   
 <!DOCTYPE html>  
 <!--这样就相当于把BundleConfig.cs文件中bundles.Add(new ScriptBundle("~/bundles/jquery")中添加的js文件全部都引入进来了-->  
 @Scripts.Render("~/bundles/jquery")   
 <!--这样就相当于把BundleConfig.cs文件中 bundles.Add(new StyleBundle("~/Content/css")中添加的css文件全部都引入进来了-->  
 @Styles.Render("~/Content/css")   
 <html>  
 <head>  
     <meta name="viewport" content="width=device-width" />  
     <title>Index</title>  
 </head>  
 <body>  
     <div id="abc">   
         123  
     </div>  
 </body>  
 </html>  
 <script type="text/javascript">  
     $(function () {  
         alert($("#abc").text());  
     })  
      
 </script>  