Geek Answers Handbook

How to link and process scripts in mvc 4 - asp.net?

I found out that I can bundle my js / css scripts for better and optimized performance. I tried to implement this using my mvc project, but no scripts are displayed. I added the bundleconfig class to App_Start, as shown below.

public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/Content/bundles/js").Include( "~/Content/js/jquery.min.js", "~/Content/js/bootstrap.min.js", "~/Content/js/JobWebSite.js", "~/Content/js/bootstrap-datetimepicker.min.js", "~/Content/js/bootstrap-filestyle.min.js" )); bundles.Add(new StyleBundle("~/Content/bundles/css").Include( "~/Content/css/style.css", "~/Content/css/bootstrap.min.css", "~/Content/css/bootstrap-datetimepicker.min.css", "~/Content/css/social-buttons.css", "~/Content/css/font-awesome.min.css" )); } }

Note: new ScriptBundle("Viturtual path") . What should be the virtual path? I created new folders and assigned them to my virtual path. I expected some files to be created after the build, but the folder is still empty. In my Global.asx, I added the line below.

 JobWebSite.WebUI.App_Start.BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

I am trying to make my package from my LayoutPage

  @Scripts.Render("~/Content/bundles/cs")

As I saw some, but does nothing. Also, my life path is still empty. Please, what am I missing? Any request or explanation would be better appreciated.

+2
source share
2 answers

You make your style packages as follows:

 bundles.Add(new StyleBundle("~/styles") .Include("~/Content/Styles/bootstrap.css") .Include("~/Content/Styles/Site.css"));

The name ~/styles is your virtual path .

And your scripts are combined like this:

 bundles.Add(new ScriptBundle("~/scripts") .Include("~/Scripts/jquery-2.1.3.js") .Include("~/Scripts/jquery.validate.js") .Include("~/Scripts/jquery.validate.unobtrusive.js") .Include("~/Scripts/bootstrap.js"));

The name ~/scripts again your virtual path .

To use these packages, for example, in a Layout file. Follow these steps:

For styles:

 @Styles.Render("~/styles")

For scripts:

 @Scripts.Render("~/scripts")

In your example, the names can be changed as follows:

 bundles.Add(new ScriptBundle("~/scripts").Include( "~/Content/js/jquery.min.js", "~/Content/js/bootstrap.min.js", "~/Content/js/JobWebSite.js", "~/Content/js/bootstrap-datetimepicker.min.js", "~/Content/js/bootstrap-filestyle.min.js" )); bundles.Add(new StyleBundle("~/styles").Include( "~/Content/css/style.css", "~/Content/css/bootstrap.min.css", "~/Content/css/bootstrap-datetimepicker.min.css", "~/Content/css/social-buttons.css", "~/Content/css/font-awesome.min.css" ));

And you can call these bundles, as I showed above. Names can be just about anything if you can tell them apart.

But if you want to use the names that you have chosen, you can also call them with these names, following the example above. Just replace the virtual path names.

Note. You do not need to change the Global.asax file to call your packages. The BundleConfig class is registered in Global.asax on a line that reads: BundleConfig.RegisterBundles(BundleTable.Bundles); . If you had an empty application, then this is the line that you want to add to the Application_Start() method in Global.asax

+4
source

Shouldn't it be? You just seal the bunch.

 @Scripts.Render("~/Content/bundles/js")
+1
source

More articles:


All Articles