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

Stc5097 发表于 Dev

Stc5097

我有一个使用遍历我的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>
        }

安东尼·肖

我会用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
  }
}

您可以对编辑进行类似的操作，只是在单击按钮后将用户重定向到“编辑”页面

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。