c# - MVC 视图中的局部变量

Question

我有一个显示项目列表的 MVC 视图。使用视图自动生成的表在每一行都有这个操作链接：

@Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id }). 

这很好用，但我的要求是允许用户突出显示一行并单击列表底部的删除按钮。我需要一种方法让按钮知道当前突出显示了哪一行。所以我创建了这个局部变量：

@{int sectionDetailId = 0; }

然后我在表行上添加了一个 onclick 事件来存储被点击的行的 id：

tr id="@item.section_detail_id" onclick="addClass(this.id); sectionDetailId = @item.section_detail_id">

这是应该调出删除视图的按钮：

input type="button" value="Delete Employee" onclick="location.href='@Url.Action("Delete", "EmployeeList", new { id = sectionDetailId })'; alert(sectionDetailId)" />

无论单击哪一行，传递给视图的值始终为零。我在按钮上添加了警报功能，以显示变量具有正确的值。

有没有办法让 Action 方法使用变量或以其他方式从表中获取值？如果我对 ID 进行硬编码，则 Action 方法可以正常工作。

这是完整的视图：

@model IEnumerable<VCPDS2.Models.EmployeeListViewModel>

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

<style>
    tr.highlight {
        background-color: blue !important;
    }
</style>

@{int sectionDetailId = 0; }

<h2>Index</h2>

@*<p>
    @Html.ActionLink("Create New", "Create")
</p>*@

@if (Model != null)
{
<table id="employeeTable" class="table table-responsive table-striped">
    <tr>
        <th>
            Last Name
        </th>
        <th>
            First Name
        </th>
        <th>
        Employee ID
        </th>
        <th>
            Phone
       </th>
        <th>
           Budget Unit
        </th>
        <th>
            Division
       </th>

    </tr>
    <tbody id="employeeList">
        @foreach (var item in Model)
                {
        <tr id="@item.section_detail_id" onclick="addClass(this.id); sectionDetailId = @item.section_detail_id">

            <td>
                @Html.DisplayFor(modelItem => item.last_name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.first_name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.employee_id)
            </td>
            <td>
                @item.phone_nbr
                @* @Html.DisplayFor(modelItem => item.phone.area_code) @Html.DisplayFor(modelItem => item.phone.phone_nbr)*@
            </td>
            <td>
                @item.BU
               @*@Html.DisplayFor(modelItem => item.phone.BU)*@
            </td>
            <td>
                @item.description
               @*@Html.DisplayFor(modelItem => item.department.description)*@
            </td>
            <td>
                @*@Html.ActionLink("Edit", "Edit", new { id = item.section_detail_id }) |
                            @Html.ActionLink("Details", "Details", new { id = item.section_detail_id }) |*@

                            @Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id })
                        </td>
    </tr>
                }
    </tbody>
</table>

<p>
    @*@Html.ActionLink("Create New", "Create")*@
    <input type="button" value="Add Employee" 
 onclick="location.href='@Url.Action("Create", "EmployeeList")'" />
    <input type="button" value="Delete Employee" 
onclick="location.href='@Url.Action("Delete", "EmployeeList", new { id = 
@sectionDetailId })'; alert(sectionDetailId)" />

</p>

 }

<script src="jquery-3.4.1.min.js"></script>

<script>

    function addClass(row) {
        //alert(row);
        $('#employeeList').children().removeClass('highlight');
        var element = document.getElementById(row);
        element.classList.add("highlight");
    }

</script>

@*@Html.ActionLink("Edit", "Edit", new { id = item.section_detail_id }) |
@Html.ActionLink("Details", "Details", new { id = item.section_detail_id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id 
})*@

这是删除按钮的渲染 HTML：

<input type="button" value="Delete Employee" onclick="location.href='/EmployeeList/Delete/0'; alert(sectionDetailId)">

标签： c#asp.net-mvcrazor