jquery usage in asp.net mvc 4 _Layout.cshtml

Question

I used jquery in my asp.net mvc 4 project. The jquery code is in _Layout,cshtml. In IE 9, an exception was thrown.

Unhandled exception at line 14, column 9 in http://localhost:59899/
0x800a1391 - Microsoft JScript runtime error: 'jQuery' is undefined

In firefox, no error was thrown but jquery didn't work at all.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>@ViewBag.Title</title>
   <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
   <meta name="viewport" content="width=device-width" />
   @Styles.Render("~/Content/css")
   @Scripts.Render("~/bundles/modernizr")

<script type="text/javascript">
    jQuery(document).ready(function () {
        var divone = jQuery(".main-content").height();
        var divtwo = jQuery(".sidebar").height();
        var maxdiv = Math.max(divone, divtwo);
        jQuery(".main-content").height(maxdiv);
        jQuery(".sidebar").height(maxdiv);
    });
</script>

UPDATE:

In App_Start there is a BundleConfig.cs.

   public class BundleConfig
   {
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/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 StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

You're not loading the jquery library before attempting to use it in your script block. — Jasen
– Jasen, Commented Jun 12, 2013 at 20:15

Stephen King · Accepted Answer · 2013-06-12 20:34:50Z

8

Make sure you are including the bundle in the _Layout.cshtml

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")

And make sure the bundles are defined in your BundleConfig.cs:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-1.9.0.js",
           "~/Scripts/jquery.unobtrusive-ajax.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-1.10.0.js",
            "~/Scripts/jquery.ui.timepicker.js",
            "~/Scripts/Ascende.Common.js",
            "~/Scripts/jquery.contextMenu.js",
            "~/Scripts/jquery.blockUI.js"));

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

Make sure you are using the correct version and file name in your bundle. [1] http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

in your case:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title>
 <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <meta name="viewport" content="width=device-width" />
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
 @Scripts.Render("~/bundles/jquery") <!-- add this --> 

<script type="text/javascript">
    jQuery(document).ready(function () {
        var divone = jQuery(".main-content").height();
        var divtwo = jQuery(".sidebar").height();
        var maxdiv = Math.max(divone, divtwo);
        jQuery(".main-content").height(maxdiv);
        jQuery(".sidebar").height(maxdiv);
    });
</script>

edited Jun 12, 2013 at 20:34

answered Jun 12, 2013 at 20:10

Stephen King

8364 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1108948 Over a year ago

I have a class BundleConfig which include these. What I missed?

Stephen King Over a year ago

I noticed at least on your code above there is no: @Scripts.Render("~/bundles/jquery") unless you have included it in the @Scripts.Render("~/bundles/modernizr")

user1108948 Over a year ago

I am not sure but can you please look at my update? I think I missed something in somewhere. Just not sure.

Jasen Over a year ago

@Love you're still not doing @Scripts.Render("~/bundles/jquery") somewhere on a view or layout page.

Jonathan Lonowski Over a year ago

@Love Having the bundle defined (in BundleConfig.cs) is only half of the process. You still need to reference the bundle within your views just as you would a static .js or .css file.

|

Collectives™ on Stack Overflow

jquery usage in asp.net mvc 4 _Layout.cshtml

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related