Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert jQuery code? Uncaught ReferenceError: $ is not defined in view razor code

I have the following Asp.Net MVC 4 razor code at the end of the file.

....
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    $('#Address_State').val('MA');
</script>
////// End of file

However, it generated the following html code. And it raises error at the line $('#Address_State').val('MA');. The error message is Uncaught ReferenceError: $ is not defined. How to insert jQuery code in the razor file?

.....
<script type="text/javascript">
    $('#Address_State').val('MA'); // Uncaught ReferenceError: $ is not defined
</script>
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2013 - Paperspeed</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.9.1.js"></script>


    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>


    </body>
</html>

Update:

The following is the last four lines of _Layout.cshtml.

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>
like image 914
ca9163d9 Avatar asked Mar 17 '13 07:03

ca9163d9


People also ask

How do I fix uncaught ReferenceError is not defined?

Answer: Execute Code after jQuery Library has Loaded The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.

What is @model in razor?

New @model directive Let's now look at a new feature we added with the ASP.NET MVC 3 Beta – the @model directive. The @model directive provides a cleaner and more concise way to reference strongly-typed models from view files.


2 Answers

You need to include JQuery before you actually use it.

A common way to achieve this is in your master layout include your require scripts in the head. Or place an optional section (head) where you can conditionally include scripts

First create a required bundle for your jquery scripts you want on every page:

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

    //other bundles
}

Then create a site template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    @Styles.Render("~/css/required")
    @RenderSection("head", false) //For css on a page by page basis
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/js/required") //Here add your jquery include
    @RenderSection("scripts", false) //Here you add scripts at the bottom of the page
</body>
</html>

Then use this razor file as the base layout for all other derived razor views like this:

@{
    ViewBag.Layout = "~/Views/Shared/_MasterLayout.cshtml";
}

@section head {
     //Any css you want to add
}

<p>Some html content</p>

@section scripts {
    //scripts you want to include at the bottom on a page by page basis
}
like image 136
gdp Avatar answered Sep 23 '22 23:09

gdp


Move the following lines of code to the top of your _Layout.cshtml view inside of the body tag. Then the jQuery scripts will load first.

<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
like image 27
James Avatar answered Sep 21 '22 23:09

James