ASP.NET selecting table row on click using jquery
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:
@{
bool itemSelected = false;
}
and then the following comes inside the creation of rows:
@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 at the very buttom this snippet:
@if (itemSelected)
{
int elementID = (int)ViewData["VehicleID"];
var item = Model.FirstOrDefault(v => v.VehicleID == elementID);
if (item != null)
{
@Html.Partial("PartialVehicleDetails", item)
}
}
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.cshtmlNow 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!
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 (e.g. 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');
});