locked
issue with bundleconfig file RRS feed

  • Question

  • User-1865711833 posted

    I add a jquery path in bundle config.cs but give an below error

    Create:52 Uncaught ReferenceError: $ is not define

    at Create:52

    BundleConfig.cs

    public class BundleConfig  
    { public static void RegisterBundles(BundleCollection bundles) { //here i add a jquery path bundles.Add(new ScriptBundle("~/Scripts").Include( "~/Scripts/jquery-3.4.1.min.js", "~/Scripts/jquery.validate.min" ));

    when I create a new project in mvc then Bydefault jquery add in project see below

    1.png (377×294)

    Create.cshtmL

    <h2>Create</h2>    
    <div>    
        <div>    
              Name : @Html.EditorFor(x => x.name)    
        </div>    
    </div>    
    @*<script src="~/Scripts/jquery-3.4.1.min.js"></script>*@     
    <script type="text/javascript">    
        $(document).ready(function () {    
            //debugger  

    I uncomment this below code

    Create.cshtml

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>   

    and comment the below BundleConfig code

    BundleConfig.cs

    ////here i add a jquery path    
    //bundles.Add(new ScriptBundle("~/Scripts").Include(    
    //          "~/Scripts/jquery-3.4.1.min.js",    
    //          "~/Scripts/jquery.validate.min"    
    //    )); 

    then working fine

    but I am trying to add jquery in bundle file then give an error

    why I am using bundle.config file because when project run then load the jquery library only at once

    that is the reason I am adding bundle.config inside jquery path

    If I use script add individually in view page then request load time increase

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>   

    that is reason I am using bundle.config file

    Friday, May 7, 2021 6:20 AM

Answers

  • User-1545767719 posted

    I understand that you use a template of Visual Studio to generate MVC5 project. If so consider using its default settings.

    Default BundleConfig.cs is as follows:

    using System.Web;
    using System.Web.Optimization;
    
    namespace Mvc5App3
    {
        public class BundleConfig
        {
            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*"));
    
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
            }
        }
    }

    _Layout.cshtml includes the following codes by default:

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

    Resultant html by the above _Layout.schtml will become as follows:

        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    </body>
    </html>

    In your view which uses the _Layout.cshtml, add the following codes:

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function () {    
                //debugger  
            }
            //]]>
        </script>
    }

    Resultant html by the above _Layout.schtml and your codes in your view will become as follows:

        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function () {    
                //debugger  
            }
            //]]>
        </script>
    </body>
    </html>

    Your problem will be solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 8, 2021 1:00 AM

All replies

  • User-474980206 posted

    The JavaScript link must come before the code that uses it. The typical bundle configuration renders the bundle in the layout file after the  render body. As your script is in the body, jquery as not been defined. The typical solution is to add a scripts section to layout and use this section for page level scripts.

    Friday, May 7, 2021 2:33 PM
  • User-1545767719 posted

    I understand that you use a template of Visual Studio to generate MVC5 project. If so consider using its default settings.

    Default BundleConfig.cs is as follows:

    using System.Web;
    using System.Web.Optimization;
    
    namespace Mvc5App3
    {
        public class BundleConfig
        {
            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*"));
    
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
            }
        }
    }

    _Layout.cshtml includes the following codes by default:

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

    Resultant html by the above _Layout.schtml will become as follows:

        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    </body>
    </html>

    In your view which uses the _Layout.cshtml, add the following codes:

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function () {    
                //debugger  
            }
            //]]>
        </script>
    }

    Resultant html by the above _Layout.schtml and your codes in your view will become as follows:

        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function () {    
                //debugger  
            }
            //]]>
        </script>
    </body>
    </html>

    Your problem will be solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 8, 2021 1:00 AM
  • User-1865711833 posted

    hellp SurferOnWww

    if I did not write below line in _layout.cshtml then not give any error can you explain please

    see below image

    https://imgur.com/8F4vLAA

     @Scripts.Render("~/bundles/jquery") //if i comment this line then not give any error
    Saturday, May 8, 2021 7:33 AM
  • User-1545767719 posted

    if I did not write below line in _layout.cshtml then not give any error can you explain please

    I don’t know as I cannot see your entire html (I'm not saying I want to see it). I guess you do not use jQuery in that page or <script src="~/Scripts/jquery-3.4.1.min.js"></script> you show in your question above exists somewhere.

    Saturday, May 8, 2021 9:30 AM