Configure to use jQuery in the MVC3 / Razor application


Greetins all.

I"m working with a simple MVC 3 .net application and trying to figure out why I cannot get jQuery to work.

Development environment: Visual Studio 2010, MVC3 Razor

I placed the following in section of _layout.cshtml:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="Stylesheet" type="text/css" />   


@Script is a custom helper:

@helper Script(string scriptName){ }

GHRIInventory.js is an external .js file with my code and it is located in my Scripts directory:

/// <reference path="jquery-1.5.1.js" />
/// <reference path="jquery-ui-1.8.11.js" />
/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery.ui.autocomplete.js" />

$(document).ready(function () {

      $(".button").click(function () {
        $(this).attr("value", "please wait..");

In my view I placed the following:

It's not a complicated script I"m only using it to prove jQuery is properly setup. What's supposed to do is when I click on the button the button text changes from "My button" to "please wait..". When I run the app, I see the button but nothing happens when I click it.

I feel I have all the elements necessary but it's still working: 1) add jQuery to _layout.cshtml 2) add my custom .js to _layout.cshtml so that it's available to all my views. 3) create, code and place custom .js in script folder 3) add HTML elements to the view

Here's what the source looks like when I run the application:


    <meta charset="utf-8" />

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery.ui.datepicker.css" rel="Stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery.ui.theme.css" rel="Stylesheet" type="text/css" />   

          <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>   

          <script src="/Scripts/jquery-ui.1.8.11.min.js" type="text/javascript"></script>   

          <script src="/Scripts/jquery.ui.core.js" type="text/javascript"></script>   

     <script src="/Scripts/jquery.ui.core.min.js" type="text/javascript"></script>
          <script src="/Scripts/GHRIInventory.js" type="text/javascript"></script>   

     <script src="../../Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>
    <script src="../../Scripts/DatePickerReady.js" type="text/javascript"></script>



<input id="button_click" type="button" value="my button" />


Any trouble shooting suggestions would be greatly welcomed...thanks...

It looks like your selector is wrong; you're selecting all objects with a class 'button' - I think you need something like $('input[type="button"]) instead or $('#button_click') to select by id