CODEWITHSUNDEEP
jqueryasp.net-mvc-3razor
TerryB
TerryB

Reputation: 1

Set up to use jQuery in 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("jquery-1.7.2.min.js")
     @Script("jquery-ui.1.8.11.min.js")
     @Script("jquery.ui.core.js")
     @Script("GHRIInventory.js")

@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:

<

head>
    <meta charset="utf-8" />
    <title>Create</title>



    <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>

</head>


<body>

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


</body>

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

Upvotes: 0

Views: 3344

Answers (2)

Tanveer
Tanveer

Reputation: 2097

   you are selecting by class name i.e. $(".button") and no class is assigned. either you should select by control type i.e. $("button") or by id i.e. $("#button_click").

As well as confirm that your script files are placed on same path or not as written in output source

Upvotes: 1

Dave
Dave

Reputation: 3621

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

Upvotes: 1

Related Questions