Setup for ASP.NET MVC and Javascript / jQuery?

Question

My JavaScript will not run. I've been struggling with this for a while (2 days) Here's my current setup:

Created a new MVC 4 project. I intend to try out some AJAX, so named it AjaxTest. Added a model (Vehicle.cs) consisting of three classes OdometerInfo, VehicleMinInfo, and Vehicle. Here they are:

public class OdometerInfo
{
    public virtual string VIN { get; set;  }
    public virtual int Odometer { get; set; }
}

public class VehicleMinInfo : OdometerInfo
{
    public virtual Nullable<int> VehicleYear { get; set; }
    public virtual string Make { get; set; }
    public virtual string Model { get; set; }
}

public class Vehicle : VehicleMinInfo
{
    // default constructor
    public Vehicle()
    {
        VIN = "MyFakeVin";
        Odometer = 0;
        VehicleYear = 2012;
        Make = "Porsche";
        Model = "911";
    }

    public override string VIN { get; set; }
    public override int Odometer { get; set; }

    public override Nullable<int> VehicleYear { get; set; }
    public override string Make { get; set; }
    public override string Model { get; set; }

    // other fields
}

Then I replaced the contents of the template Index.cshtml with:

@model AjaxTest.Models.VehicleMinInfo

@{
    ViewBag.Title = "Index";
}

<h2>Enter your odometer reading</h2>

@using (Html.BeginForm("Odometer", "Home", FormMethod.Post))
{
    <h4>For the following vehicle.</h4>
    @Html.DisplayFor(model => model.VIN) <br />
    @Html.DisplayFor(model => model.VehicleYear) <br />
    @Html.DisplayFor(model => model.Make) <br />
    @Html.DisplayFor(model => model.Model) <br />
    <h1>Enter Odometer</h1>
    @Html.DisplayNameFor(model => model.Odometer)
    @Html.EditorFor(model => model.Odometer)
    @Html.HiddenFor(model => model.VIN);
    <input type="submit" value="Odometer reading is correct" id="OdometerForm" />
}

Then I made a strongly typed view (Odometer.cshtml):

@model AjaxTest.Models.OdometerInfo
@{
    ViewBag.Title = "Odometer";
}

<h2>Odometer</h2>
Your odometer has been entered. It is
@Html.DisplayFor(model => model.Odometer)
. (
@Html.DisplayFor(model => model.VIN)
)

And added to the controller:

    public ActionResult Index()
    {
        VehicleMinInfo OdomObj = new Vehicle();
        return View(OdomObj);
    }

    [HttpPost]
    public ActionResult Odometer(OdometerInfo oi)
    {
        return View(oi);
    }

All of that works. I can fill in an odometer reading and both the odometer and the VIN are passed back to the controller and displayed on the Odometer page. Now, it's time to start adding some JavaScript. So I created OdometerList.js with the eventual goal of passing back a list of odometer readings instead of just one, and in it I placed:

$("#OdometerForm").click(function () {
    alert("Hello world!");
});

window.onload = function () {
    if (window.jQuery) {
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}

$(document).ready(function () {
    alert("!!!");
});

Then I added in _Layout.cshtml

@Scripts.Render("~/Scripts/jquery-1.3.2.min.js")
@Scripts.Render("~/Scripts/OdometerList.js")

And I double checked Web.config to be sure compilation debug was true:

<system.web>
    <compilation debug="true" targetFramework="4.5" />
    ...

None of my alerts are triggered, not one. Is my setup wrong? I moved my JavaScript from OdometerList.js to the bottom of Odometer.cshtml and put it all between script tags, but there was no change. I am new to JavaScript, so have I made a mistake there?

This is really stumping me. Any help you can give will be much appreciated!

Answer 1

The version of jQuery had been updated. Once I put the correct version number in, I was able to use @Scripts.Render("~/Scripts/jquery-1.8.2.min.js") and everything works!