[英]ASP.NET selecting table row on click using jquery
I have a table in ASP.NET.我在 ASP.NET 中有一个表。 I have implemented the functionality to select any single row by using a select link at the end of the row.
我已经实现了通过使用行末尾的选择链接来选择任何单行的功能。
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.上面所做的是获取车辆的所有属性,并在表下方名为
PartialVehicleDetails.cshtml
中选择行时显示它们。
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.现在我想知道是否可以使用 jQuery 来选择类似于我已经在做的行,但是不使用上面显示的链接。 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.
我已经能够创建一个 jQuery 函数,该函数对我单击一行做出反应,但我不知道是否可以将两者连接在一起。
$("table tbody tr").click(function () { //$(this).addClass("success") //this should add the color to clicked row (but not remove from the other rows). });
Is it possible to do the stuff done in above view and controller using jQuery when a row is selected/clicked?如果选择/单击一行时,是否可以使用jQuery执行在上面的视图和控制器中完成的内容?
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.您需要处理链接的
.click()
事件并使用 ajax 调用返回所选车辆详细信息的部分视图的服务器方法,并在成功回调中更新 DOM。
Create a method in your controller that returns a partial view based on the ID of the vehicle在您的控制器中创建一个方法,根据车辆的 ID 返回局部视图
[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).您还应该考虑如果控制器查询返回
null
(例如另一个用户同时删除了它)会发生什么。 For example you could return a new HttpNotFoundResult();
例如,您可以返回一个
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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.