Setup for ASP.NET MVC and Javascript / jQuery?

Saturday, July 5, 2014

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

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

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
} else {
// jQuery is not loaded
alert("Doesn't Work");

$(document).ready(function () {

Then I added in _Layout.cshtml


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

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