ASP.Net MVC Multiple forms on the same page with the same model

Question

Very new to ASP.Net, moving from PHP. So I'm pretty sure I've broken every rule in the book here but anyway here is what I am trying to accomplish.

I have a page that allows our parkade (car park) operators to update the counts of cars in a parkade at any given time.

What I want to achieve is to have a page that lists the parkades and their respective available parking spots and used parking spots. I am using jQuery to make it so that when say for example the free spaces text box is updated the used spaces adjusts itself accordingly. So for example in a parkade with 100 total parking spots, when someone types 10 into the free spaces box the used spaces box will automatically update itself to 90.

Form example:

form format

So I had to do some wizardry (which I suspect was wrong) to make this work (i.e. add a dynamic ID to each text field so that I knew which text boxes to update during the onblur event.

Anyway this all works great but alas my validation does not work. I suspect this is due to my dynamic generation of forms.

Here is my view code:

  model IEnumerable<WebApplication1.Models.ParkingCount>

@{
    ViewBag.Title = "Parking Lot Administration";
}

<h2>Parking Lots</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.parkingLotName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.parkingSpaces)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.freeSpaces)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.usedSpaces)
        </th>
        <th></th>
    </tr>
@{int i = 0;}
@foreach (var item in Model)
{
    using (Html.BeginForm("UpdateParkingLot", "ParkingCount", FormMethod.Post, new { @Id = "Form" + i}))

    {
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <tr>
        <td>
            @Html.HiddenFor(modelItem => item.ID)
            @Html.DisplayFor(modelItem => item.parkingLotName)

        </td>
        <td>          
            @Html.TextBoxFor(modelItem => item.parkingSpaces, new { id = "parkingSpaces" + i })
            @Html.ValidationMessageFor(modelItem => item.parkingSpaces, "", new { @class = "text-danger" })
        </td>
        <td>
            @Html.TextBoxFor(modelItem => item.freeSpaces, new { id = "freeSpaces" + i })
            @Html.ValidationMessageFor(modelItem => item.freeSpaces, "", new { @class = "text-danger" })
        </td>
        <td>
            @Html.TextBoxFor(modelItem => item.usedSpaces, new { id = "usedSpaces" + i })
            @Html.ValidationMessageFor(modelItem => item.usedSpaces, "", new { @class = "text-danger" })
        </td>
        <td>
            <button type="submit">Update</button>
        </td>
    </tr>

    }
    i++;


}

</table>

@for (int j = 0; j <= i; j++)
{


<script>

    $("#parkingSpaces0").blur(function () {


        var i = @i;

        var totalSpacesValue = $(this).val();
        var usedSpacesValue = $("#usedSpaces0").val();


        $("#freeSpaces0").val(totalSpacesValue - usedSpacesValue);

    }
    )

    $("#freeSpaces0").blur(function () {

    var totalSpacesValue = $("#parkingSpaces0").val();
    var freeSpacesValue = $("#freeSpaces0").val();

        $("#usedSpaces0").val(totalSpacesValue - freeSpacesValue);


})

    $("#usedSpaces0").blur(function () {

    var totalSpacesValue = $("#parkingSpaces0").val();
    var usedSpacesValue = $("#usedSpaces0").val();

        $("#freeSpaces0").val(totalSpacesValue - usedSpacesValue);


    })

</script>
}

Here is my model code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace WebApplication1.Models
{
    public class ParkingCount { 

        public int ID { get; set; }

        [Display(Name="Parking Lot Name")]
        public string parkingLotName { get; set; }

        [Required]
        [Display(Name ="Total Parking Spaces")]
        public int parkingSpaces { get; set; }

        [Required]
        [Display(Name ="Free Parking Spaces")]
        public int freeSpaces { get; set; }

        [Required]
        [Display(Name = "Used Parking Spaces")]
        public int usedSpaces { get; set; }

    }
}

And finally my (incomplete) controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CsvHelper;
using System.IO;


namespace WebApplication1.Controllers
{

    public class ParkingCountController : Controller
    {
        // GET: ParkingCount
        public ActionResult Index()
        {

            //create an instance of our service class
            WebApplication1.ServiceClasses.GetParkadeDetails myCounts = new WebApplication1.ServiceClasses.GetParkadeDetails();

            //create list objec to store parkade objects
            List<WebApplication1.Models.ParkingCount> myList = new List<WebApplication1.Models.ParkingCount>();

            //read in the CSV files of parking lots (c:\parkingLots.csv)
            StreamReader sr = new StreamReader("c:\\parkingLots.csv");
            CsvReader csvRead = new CsvReader(sr);
            IEnumerable<WebApplication1.ServiceClasses.ParkingLotRecord> lines = csvRead.GetRecords<WebApplication1.ServiceClasses.ParkingLotRecord>();

            //add the parking lots to our list
            foreach (var line in lines)

                myList.Add(new Models.ParkingCount
                {
                    ID = line.parkingLotID,
                    parkingLotName = line.parkingLotName,
                    freeSpaces = myCounts.getFreeStalls(line.parkingLotID),
                    parkingSpaces = myCounts.getStallCount(line.parkingLotID),
                    usedSpaces = myCounts.getUsedStalls(line.parkingLotID)

                });

            return View(myList);
        }

        public ActionResult UpdateParkingLot(Models.ParkingCount item)
        {

            try
            {
                //Update the parking counters here
                int parkingLotID = item.ID;
                int freeSpaces = item.freeSpaces;

                System.Diagnostics.Debug.WriteLine(freeSpaces + " free spaces at Parking Lot " + parkingLotID);

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }


        }


    }
}

Any idea how I could get my validation working?

Thanks for any help in advance.

John.