CODEWITHSUNDEEP
javascriptcssasp.net-mvcbundling-and-minification
user4221591
user4221591

Reputation: 2150

Edit bundle config class for newly implemented theme

When I try to bundle my CSS and javascript, my javascript and CSS effects do not seem to work. I am using the js files and CSS files normally as in ASP.NET Web Forms.

I have kept my CSS and js files only in below code

<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">

<!-- REQUIRED SCRIPTS -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/dist/js/adminlte.js"></script>
<script src="~/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="~/dist/js/pages/dashboard3.js"></script>
@RenderSection("scripts", required: false)

Here is the bundle config class

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
  1. How can I bundle my js files and CSS files?
  2. Also, I have referenced the jquery validate js file, still validation is not working in my pages. What is the problem?

Please see the attached image for file structure.

My project file structure

Upvotes: 1

Views: 565

Answers (1)

Dave Barnett
Dave Barnett

Reputation: 2216

  1. This is is how I would do it for your setup.

Make sure you have installed the nuget package Microsoft.AspNet.Web.Optimization.

Here is the edited BundleConfig

public static class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/allcss")
            .Include("~/plugins/fontawesome-free/css/all.min.css")
            .Include("~/dist/css/adminlte.min.css"));

        bundles.Add(new ScriptBundle("~/bundles/alljs")
            .Include("~/plugins/jquery/jquery.min.js")
            .Include("~/plugins/bootstrap/js/bootstrap.bundle.min.js")
            .Include("~/dist/js/adminlte.js")
            .Include("~/plugins/jquery-validation/jquery.validate.min.js")
            .Include("~/dist/js/pages/dashboard3.js"));
    }
}

The global.asax

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {           
        BundleConfig.RegisterBundles(BundleTable.Bundles);
       //other unrelated code            
    }      
}

Relevant parts of _Layout.cshtml

Note you don't have to put the Render calls in the _layout.cshtml but this is the standard place for most apps.

@using System.Web.Optimization

<!DOCTYPE html>    
<html>
<head>
       @Styles.Render("~/bundles/allcss")
</head>
<body>

   @Scripts.Render("~/bundles/alljs")      
   @RenderSection("scripts", required: false)
</body>
  1. I believe you also need to put jquery.validate.unobtrusive.js after jquery.validate.js. Ensure you have added the correct settings in your web.config 
    <appSettings>  
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
        <!--other settings-->
    </appSettings>

See this for more explanation

Upvotes: 1

Related Questions