issue with bundleconfig file

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

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.