RedirectToAction 在由 jQuery ajax 触发时不会将我重定向到操作

Question

我有这个代码 - 它应该从数据库中删除项目。

它工作正常 - 项目被删除并弹出一条消息，但在删除方法的最后一行有这行代码

return RedirectToAction(nameof(Index))

但是删除项目后，它仍保留在

Edit

视图中（删除部分视图所在的位置）。

控制器

[Route("projects")]
[Authorize]
public class ProjectManagerController : Controller

//Fields...

    public async Task<IActionResult> Index()
    {
        var projects = await _mediator.Send(new GetProjectsQuery());
        return View(projects);
    }

//Other methods...

    [HttpDelete("delete")]
    public async Task<IActionResult> Delete([FromQuery]string encodedName)
    {
        var command = new DeleteProjectCommand() { EncodedName = encodedName};
        await _mediator.Send(command);
        this.SetNotification("success", $"Project has been deleted");

        return RedirectToAction(nameof(Index)); //hit by breakpoint but does not redirect 
    }

jQuery 编辑.js

$(document).ready(function () {
    $("#editProject form").submit(function (event) {
        return true;
    });

    $('#deleteButton').click(function (event) {
        event.preventDefault();
        const encodedName = $(this).data('encodedname'); // Get encodedName inside the click handler
        $.ajax({
            url: `/projects/delete?encodedName=${encodeURIComponent(encodedName)}`,
            type: 'DELETE',
            async: false, // Set the request to be synchronous
            success: function (data) {
                toastr["success"]("Deleted project");
            },
            error: function () {
                toastr["error"]("Something went wrong");
            }
        });
    });
});

我使用了几个断点 -

RedirectToAction

方法被命中，

encodedName

被通过，ajax工作所以我不知道它是什么

Answer 1

我使用了几个断点 - RedirectToAction 方法被命中， encodedName 已传递，ajax 起作用，所以我不知道它是什么

好吧，当您提交 ajax 请求时，它总是期望得到响应并执行成功或错误。因此，这个 return 语句

RedirectToAction(nameof(Index))

将会被执行，因为它是一个 ajax 请求，所以总是以

success

或

error

块结束，并且无法从后端重定向到 Index 操作。您必须成功或错误阻止才能做到这一点。

让我们看看如何在实践中实现这一目标。

为了重定向到索引操作，您应该在 ajax success 函数块中编写重定向机制。

<button type="button" name="submitButton" value="Edit" class="btn btn-primary form-control"
        id="deleteButton">
    Submit Request
</button>



@section scripts {
    <script>

        $(document).ready(function () {
            $('#deleteButton').click(function (event) {
                event.preventDefault();
               // const encodedName = $(this).data('encodedname'); 
                const encodedName = "TestName"; // Get encodedName inside the click handler
                $.ajax({
                    url: `https://localhost:7230/projects/delete?encodedName=${encodeURIComponent(encodedName)}`,
                    type: 'DELETE',
                    async: false, // Set the request to be synchronous
                    success: function (data) {
                        alert("Deleted project");
                        window.location.href = "@Url.Action("Index", "ProjectManager")"
                        // toastr["success"]("Deleted project");
                    },
                    error: function () {
                        // toastr["error"]("Something went wrong");
                        alert("Something went wrong");
                        console.log("Something went wrong")
                    }
                });
            });
        });
    </script>
}

注意： 正如您在删除控制器的成功响应中看到的那样，

window.location.href = "@Url.Action("Index", "ProjectManager")"

将重定向到您想要的操作。

修改控制器返回类型：

在删除控制器操作而不是

return RedirectToAction(nameof(Index))

中，您应该将返回类型重写为成功或错误响应代码，以便决定在ajax调用中需要执行哪个块。

        [HttpDelete("delete")]
        public async Task<IActionResult> Delete([FromQuery] string encodedName)
        {
            //var command = new DeleteProjectCommand() { EncodedName = encodedName };
            //await _mediator.Send(command);
            //this.SetNotification("success", $"Project has been deleted");

            //return RedirectToAction(nameof(Index)); //hit by breakpoint but does not redirect 
            if (encodedName == null)
            {
                return BadRequest();
            }
            return Ok();
        }

注意：这实际上是概念验证逻辑，您应该根据您的要求修改它。

输出：