Question

我有一个使用遍历我的ViewModel的for循环显示的故障单列表。到目前为止，我一直在使用Ajax.BeginForm，但我想改变它，所以我可以使用JQUERY和AJAX。如何制作它以便我可以从JQUERY访问正确的值。我知道它与命名模式有关，但不记得怎么做（自从我刚刚参加我的Web开发课以来没有完成它）。下面是我的表/票证列表输出的代码。

@foreach (var ticket in Model.ticket)
        {
                <tr class="viewTickTr">
                    <td class="viewTickTd">
                        <label id="ticketId">@ticket.id</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="dateCreated">@ticket.dateCreated</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="supportStaffId">@ticket.supportStaffID</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="empId">@ticket.empId</label>
                    </td>
                    <td class="viewTickTd"></td>
                    <td class="viewTickTd">
                        <label id="categoryId">@ticket.categoryId</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="severityId">@ticket.severityId</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="statusId">@ticket.statusId</label>
                    </td>
                    <td class="viewTickTd">
                        <input type="button" value="Edit" class="ticketEditButt" />
                    </td>
                    <td class="viewTickTd">
                        <input type="button" value="Delete" class="ticketDeleteButt" id="deleteTickBtn" />
                    </td>
                </tr>
        }

Answer 1

我会用data-id属性装饰你的按钮并用票证ID填充它，当你点击按钮从属性中获取id并将其与你的ajax调用一起传递。

<input type="button" data-id="@ticket.id" value="Delete" class="ticketDeleteButt" />

通知我删除了id="deleteTickBtn"，有多个具有相同ID的项目会导致IE出现问题。您需要从所有行中删除

在jQuery中获取id

$(document).ready(function() {
  $(".ticketDeleteButt").click(function(e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    //make ajax call here
  }
}

除了将用户重定向到按钮中的编辑页面

之外，你可以为编辑做类似的事情

Answer 2

您可以将值存储在另一个属性中：

<td class="viewTickTd">
    <label id="ticketId" val="@ticket.id">@ticket.id</label>
</td>

然后用jquery获取它：

$(".viewTickTd #ticketId").attr("val");

使用此作为指导，您可以获取所有其他属性，遍历项目以获取每个ID，...

Answer 3

你可以将一个函数绑定到html元素，并将id作为参数传递。像这样

Microsoft Edge

在js文件中，定义delItem函数：

<input type="button" value="Delete" onclick="delItem(id)"/>

使用AJAX从列表中删除/编辑项目

3 个答案: