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:

@{
    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.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!

yes, you can. if you have a field like ID to specify each row in table why not. i did something like this last month. — Badiparmagi
– Badiparmagi, Commented Nov 3, 2016 at 11:21
Are you wanting to display additional details of a vehicle when you click on 'Select' link without redirecting? — user3559349
– user3559349, Commented Nov 3, 2016 at 11:23
@StephenMuecke. Yes I want. I would very much like it to slide down, but right now the PartialView just shows if an item is "selected" using the select link. The reason is my vehicle model has too much info for it to be shown in a table, without messing up the table view. — Zeliax
– Zeliax, Commented Nov 3, 2016 at 11:48
You need to use ajax to call a server method (passing the ID of the vehicle) which returns a partial view, and then update the DOM with that html in the success callback. — user3559349
– user3559349, Commented Nov 3, 2016 at 11:50
@StephenMuecke Do you have any tutorials or alike that you could point me towards. I will do a google search, but if you have something good at your fingertips that would be appreciated :P — Zeliax
– Zeliax, Commented Nov 3, 2016 at 11:51

user3559349 · Accepted Answer · 2016-11-03 22:24:46Z

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');
});

Collectives™ on Stack Overflow

ASP.NET selecting table row on click using jquery

Selecting a row by View and Controller:

Question in short

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Selecting a row by View and Controller:

Question in short

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related