ASP.NET selecting table row on click using jquery

Question

I have a table in ASP.NET. I have implemented the functionality to select any single row by using a select link at the end of the row.

Selecting a row by View and Controller:

Views/Vehicle/Index.cshtml

I am setting a value in the top of the view:

@foreach (var item in Model)
{
    string selectedRow = "";
    if (item.VehicleID == (int?)ViewData["VehicleID"])
    {
        selectedRow = "success";
        itemSelected = true;
    }
        <tr class="@selectedRow">
            <td>
                @Html.DisplayFor(modelItem => item.Alias)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Vehicle_Type)
            </td>

            ...

        </tr>
}

and then the following comes inside the creation of rows:

@if (itemSelected)
{
    int elementID = (int)ViewData["VehicleID"];
    var item = Model.FirstOrDefault(v => v.VehicleID == elementID);

    if (item != null)
    {
        @Html.Partial("PartialVehicleDetails", item)
    }
}

and at the very buttom this snippet:

<a asp-action="Index" asp-route-id="@item.VehicleID" asp-route-sortOrder="@ViewData["CurrentSort"]">Select</a> |

All of this is run when clicking the following link found in my table at the very end as seen on the screenshot.

 <a asp-action="Index" asp-route-id="@item.VehicleID" asp-route-sortOrder="@ViewData["CurrentSort"]">Select</a> |

Controllers/VehicleController.cs

 public async Task<IActionResult> Index(int? id) { if(id != null) { ViewData["VehicleID"] = id.Value; } }

What is done above is taking all the properties of a vehicle and showing them if the row is selected in a PartialView called PartialVehicleDetails.cshtml below the table.

Now I'm wondering if it is possible to use jQuery to select the row similar to what I'm already doing, however without using the above shown link. I have already been able to create a jQuery function that reacts to me clicking a row, but I don't know if it is possible to connect the two together.

 $("table tbody tr").click(function () { //$(this).addClass("success") //this should add the color to clicked row (but not remove from the other rows). });

Question in short

Is it possible to do the stuff done in above view and controller using jQuery when a row is selected/clicked?

Thanks!

Answer 1

You need to handle the .click() event of the link and use ajax to call a server method that returns a partial view of the selected vehicle details, and update the DOM in the success callback.

Create a method in your controller that returns a partial view based on the ID of the vehicle

[HttpGet]
public PartialViewResult Details(int id)
{
    // sample code to get the vehicle
    var model = db.Vehicles.FirstOrDefault(x => x.VehicleID == id);
    if (model == null)
    {
        // refer notes below
    }
    return PartialView("PartialVehicleDetails", model);
}

In the view, add an element as a placeholder where the partial will be rendered

<div id="details"></div>

and modify the 'Select' link to

<a href="#" class="details" data-url="@Url.Action("Details", new { id = item.VehicleID })">Select</a>

Then add the following script to load the partial when the link is clicked

var selectedRow = $('tr:first');
var details = $('#details');
$('.details').click(function () {
    selectedRow.removeClass('success'); // remove existing row highlighting
    selectedRow = $(this).closest('tr');
    selectedRow.addClass('success'); // highlight the selected row
    details.hide(); // hide existing details
    details.load($(this).data('url'), function () { //load the new details
        $(this).slideDown('slow');
    });
})

You should also consider what should happen if the controller query returns null (eg another user has deleted it in the meantime). For example you could return a new HttpNotFoundResult(); and handle it in the callback, for example

details.load($(this).data('url'), function (response, status, xhr) {
    if (xhr.status == 404) {
        // add an error message in the div?
        // add different style to the row?
        // remove the 'Select' link?
    }
    $(this).slideDown('slow');
});