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.
@{
bool itemSelected = false;
}
@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>
}
@if (itemSelected)
{
int elementID = (int)ViewData["VehicleID"];
var item = Model.FirstOrDefault(v => v.VehicleID == elementID);
if (item != null)
{
@Html.Partial("PartialVehicleDetails", item)
}
}
<a asp-action="Index" asp-route-id="@item.VehicleID" asp-route-sortOrder="@ViewData["CurrentSort"]">Select</a> |
public async Task<IActionResult> Index(int? id)
{
if(id != null)
{
ViewData["VehicleID"] = id.Value;
}
}
PartialVehicleDetails.cshtml
$("table tbody tr").click(function () {
//$(this).addClass("success") //this should add the color to clicked row (but not remove from the other rows).
});
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');
});