简短问题

Question

我在ASP.NET中有一个表。我已经实现了通过在行尾使用选择链接来选择任何单行的功能。

按视图和控制器选择行：

查看/车/ Index.cshtml

我在视图的顶部设置了一个值：

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

控制器/ VehicleController.cs

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

上面所做的是获取车辆的所有属性，并在表格下方名为PartialVehicleDetails.cshtml的PartialView中选择行时显示它们。

现在我想知道是否可以使用jQuery来选择类似于我已经做过的行，但不使用上面显示的链接。我已经能够创建一个jQuery函数来响应我点击一行，但我不知道是否可以将两者连接在一起。

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

简短问题

当选择/点击一行时，是否可以使用jQuery在上面的视图和控制器中完成这些操作？

谢谢！

Answer 1

您需要处理链接的.click()事件并使用ajax调用服务器方法，该方法返回所选车辆详细信息的部分视图，并在成功回调中更新DOM。

在控制器中创建一个方法，该方法根据车辆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);
}

在视图中，添加一个元素作为占位符，其中将呈现部分

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

并修改“选择”链接

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

然后添加以下脚本以在单击链接时加载部分

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

您还应该考虑如果控制器查询返回null会发生什么（例如，另一个用户在此期间删除了它）。例如，您可以返回new HttpNotFoundResult();并在回调中处理它，例如

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

ASP.NET使用jquery选择表行

按视图和控制器选择行：

简短问题

1 个答案: