Row Won't Select - MVC 3

I am developing an MVC 3 application in C# and I am trying to make a row in a table turn gray when "Select" next to the row is clicked. However, this is not happening.

Here is my code in the view:

@using (Html.BeginForm("Confirm", "Invoice"))
{

foreach (var item in Model)
{
    string selectedRow = "";
    if (item.InvoiceNumberID == ViewBag.InvoiceNumberID)
    {
        selectedRow = "selectedRow";
    } 

<tr class="@selectedRow" valign="top">
            <td> 
           <a href='javascript:void(0)' class='select' data-id=@item.InvoiceNumberID >Select</a>


        </td> 
     <td>
        @Html.DisplayFor(modelItem => item.InvoiceNumberID)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.InvoiceAmount)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.InvoiceMonth)
    </td>

And here is my CSS:

.selectedRow 
{ 
background-color: #EEEEEE; 
}

The code from the example I tried to use for my project is below:

@foreach (var item in Model.In开发者_运维百科structors) 
{ 
    string selectedRow = ""; 
    if (item.PersonID == ViewBag.PersonID) 
    { 
        selectedRow = "selectedrow"; 
    } 
    <tr class="@selectedRow" valign="top"> 
        <td> 
            @Html.ActionLink("Select", "Index", new { id = item.PersonID }) | 
            @Html.ActionLink("Edit", "Edit", new { id = item.PersonID }) | 
            @Html.ActionLink("Details", "Details", new { id = item.PersonID }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.PersonID }) 
        </td> 
        <td> 
            @item.LastName 
        </td> 
        <td> 
            @item.FirstMidName 
        </td> 
        <td> 
            @String.Format("{0:d}", item.HireDate) 
        </td> 
        <td> 
            @if (item.OfficeAssignment != null) 
            { 
                @item.OfficeAssignment.Location  
            } 
        </td> 
        <td>
            @{
                foreach (var course in item.Courses)
                {
                    @course.CourseID @:&nbsp; @course.Title <br />
                }
            }
        </td>
    </tr> 
} 

And from their controller:

public ActionResult Index(Int32? id, Int32? courseID)
    {
        var viewModel = new InstructorIndexData();
        viewModel.Instructors = db.Instructors
            .Include(i => i.Courses.Select(c => c.Department))
            .OrderBy(i => i.LastName);

        if (id != null)
        {
            ViewBag.PersonID = id.Value;
            viewModel.Courses = viewModel.Instructors.Where(i => i.PersonID == id.Value).Single().Courses;
        }


        if (courseID != null)
        {
            ViewBag.CourseID = courseID.Value;

            var selectedCourse = viewModel.Courses.Where(x => x.CourseID == courseID).Single();
            db.Entry(selectedCourse).Collection(x => x.Enrollments).Load();
            foreach (Enrollment enrollment in selectedCourse.Enrollments)
            {
                db.Entry(enrollment).Reference(x => x.Student).Load();
            }

            viewModel.Enrollments = viewModel.Courses.Where(x => x.CourseID == courseID).Single().Enrollments;
        }

        return View(viewModel);
    }

The intention is different though - all I want to see is make the row change colour - with the example I used, they wanted related data to display, which I don't need.

Thanks, Amy

Think about it. How would your server code get executed when you click the checkbox. Without some javascript to cause a postback, your server side code know what checkbox is selected. However, that's probably not the best way to handle it. Your client-side javascript should do the adding of the class.

You seem to not understand the difference between server side and client side functionality, perhaps learning a bit about what happens when you click the checkbox might be in order.