需要将列表中的项ID与引导按钮相关联

Question

我在MVC模型中循环时有一个记录列表（参见＆＃34;下面代码中的每个＆＃34;循环）。

我希望能够将Bootstrap组件与所点击的记录的ID相关联，而不是使用ActionLink并链接到另一个页面，而是显示模式表单。

我知道如何调出并关联模式形式，除了将ID值与列表中我需要的任何组件相关联。

我正在考虑某些，如下所示，但我需要一些关于确切组件的帮助以及如何关联所点击记录的ID值。< /强>

带有路线值的ActionLink＆amp; htmlattributes只是一个有根据的猜测...

任何帮助都会很多赞赏......

@model IEnumerable<YeagerTechDB.Models.Category>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CategoryDescription)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryDescription)
        </td>
        <td>
            @*insert a specific bootstrap component instead of actionlinks???*@
            @*when component clicked, assoicate record id in list, bring up modal form and execute associated JS*@
            @*if using just a button below, how do i associate the id of the item that was clicked?*@
            <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit
            </button>
            @Html.ActionLink("<span class='glyphicon glyphicon-edit'></span>", "Edit", "Edit", routeValues: new { id = item.CategoryID }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" })
            @*@Html.ActionLink("Edit", "Edit", new { id = item.CategoryID })*@
         </td>
    </tr>
}

    @*bootstrap modal screen inserted here*@
    @*have hidden id field in modal form*@

</table>

Answer 1

简单方法是使用data-属性。由于您有多个按钮可用于每行的客户端UI，因此您可以使用<tr>存储相关数据，或将其存储在每个按钮上。

我没有在asp工作，所以语法可能不太准确，但看起来像：

<tr data-id="<% item.id %>"> 

然后在按钮单击处理程序中，您可以使用以下方式访问行数据：

$('.buttonClass').click(function(){
    var rowId = $(this).closest('tr').data('id');
    /* do stuff with modal */
});

参考：data() API docs