使用 Ajax 和 ASP.NET Core 6.0 MVC 以及存储库模式从表中删除行

Question

我正在使用 Ajax 从表中删除数据。单击删除按钮后，我希望将该行的状态设置为 False。代码在服务器端完美运行。我检查了 Swagger 上的删除 API，它工作正常。它不能仅在前端工作。

这是代码：

PublicationRepository.cs

public void DeletePublication(int id)
{
    var publication = _context.publications.Find(id);

    if (publication != null)
    {
        publication.Status = false;
        _context.publications.Update(publication);
        _context.SaveChanges();
    }
}

发布控制器：

[HttpDelete]
[Route("DeletePublication")]
public void DeletePublication(int id)
{
    iPublications.DeletePublication(id);
}

index.cshtml

<button  class='btn  btn-info btnDelete' id='btnDelete"+ obj.id + "'>Delete</button>

$(document).on('click', '.btnDelete', function() {
    var publicationId = $(this).attr('id');
    publicationId = publicationId.replace("btnDelete", "");
    alert(publicationId);
       if (confirm("It will be deleted permanently. Are you sure?")) {
           var obj = { "id": publicationId };
          
           $.ajax({
               url: '/api/Publication/DeletePublication?id' +publicationId,
               type: "DELETE",
               contentType: 'application/json',
               dataType: "json",
               data: JSON.stringify(obj),
               success: function(data) {

                $('#btnDelete' + obj.id).closest('tr').remove();
                        $('.tdSrNo').each(function (index,obj) {
                            $(this).html(index+1);
                        });
                        alert("Deleted successfully");
               }
           });
       }
});

Answer 1

在你的后端的action中，

DeletePublication

的返回类型是void，所以它不会返回任何东西，你不应该在ajax中指定

dataType

，否则它会在错误函数中报告

Unexpected end of JSON input

。从你的代码中，你想在 URL 中发送数据，所以不需要添加：

contentType: 'application/json',
dataType: "json",
data: JSON.stringify(obj),

这是一个基于您的代码的简单工作演示，希望它可以帮助您解决这个问题：

@model List<TestModel>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
        @for(int i=0; i < Model.Count(); i++)
        {
            <tr>
                <td>@Model[i].Name</td>
                <td>@Model[i].Age</td>
                <td><button class='btn  btn-info btnDelete' id="btnDelte_@i">Delete</button></td>
            </tr>
        }
        </tbody>
    </table>

    @section Scripts{
        <script>
        $(document).on('click', '.btnDelete', function () {
            var publicationId = $(this).attr('id');
            newpublicationId = publicationId.substring(9);
            //alert(newpublicationId);
            if (confirm("It will be deleted permanently. Are you sure?")) {
                var obj = { "id": newpublicationId };

                $.ajax({
                    url: 'https://localhost:7273/api/Test?id=' + newpublicationId,
                    type: "DELETE",
                    success: function (data) {
                        
                        document.getElementById(publicationId).closest('tr').remove();
                        //$('.tdSrNo').each(function (index, obj) {
                        //    $(this).html(index + 1);
                        //});
                        alert("Deleted Successfully");
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                        alert("Error occurred: " + error);
                    }
                });
            }

        });
        </script>
    }

Gif 演示