c# - 在 Asp.net Core 中提交 ajax 表单后的 RedirectToAction

Question

我有一个名为 Index 的 View 和一个名为“_Addbook”的 PartialView，它们显示为引导模式。在 partialView 中使用 ajax 形式将数据插入数据库。

索引 View :

<div class="panel panel-primary">
<div class="panel-body">
    <div class="btn-group">
        <a class="btn btn-primary marginbutoon" id="showBookgroup" data-toggle="modal" asp-action="AddBook"
           data-target="#modal-book">
            <i class="glyphicon glyphicon-plus"></i>
            Add Book
        </a>
    </div>
</div>

局部 View :

 @model WebApplication1.Models.Book
<form asp-controller="Home" asp-action="AddBook" id="myform"
  data-ajax="true" data-ajax-method="POST"
  data-ajax-mode="replace" data-ajax-update="#myform">



        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Add Book</h4>
        </div>


        <div class="modal-body form-horizontal">
            <div class="row">
                <div class="form-group">
                    <label asp-for="BookName" class="col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="BookName" class="form-control" />
                        <span asp-validation-for="BookName" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="Submit" />
        </div>

Controller :

 [HttpGet]
    public IActionResult AddBook()
    {
        var book = new Book();
        return PartialView("_AddBooks", book);
    }



    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult AddBook(Book model)
    {
        if (ModelState.IsValid)
        {
            using (var db = _Context.GetRequiredService<ApplicationDbContext>())
            {
                db.bookgroups.Add(model);
                db.SaveChanges();
            }
            return RedirectToAction("Index");
        }
        else
        {
            return PartialView("_Addbooks", model);
        }
    }

数据正确存储在数据库中，提交后模式隐藏，但索引 View 显示混合。ajax 提交后如何重定向？

Answer 1

您当前的表单设置为执行 ajax 表单发布。所以当从服务器收到响应时，它会替换表单标签的内部html。因此，对于您当前的代码，它基本上会对 Index 操作进行 GET 调用，并将其响应加载到表单标记中。

如果您想进行重定向，但仍希望模型验证有效，您可以返回一个 View 结果，其中包含一些执行重定向的 javascript 代码。

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AddBook(Book model)
{
    if (ModelState.IsValid)
    {
        //Your code to store data     
        return PartialView("_AddedSuccessfully");
    }
    return PartialView("_AddBooks", model);
}

并且在 _AddedSuccessfully.cshtml 部分 View 中将只有以下内容，这是重定向到 /Home/Index

的 javascript

<script>
    window.location.href = '@Url.Action("Index","Home")';
</script>

编辑:根据评论

how can i make it dynamically. because i have several partial view in my project and i want pass ControllerName and ActionName as a parameters to _AddedSuccessfully.cshtml?

您可以将它从您的 View 传递到操作方法，然后从那里传递到局部 View

只需在添加表单中添加一个隐藏的输入元素，就在您的提交按钮上方，并在成功保存后使用 Url.Action 辅助方法生成您要重定向到的 url。

<input type="hidden" name="redirectUrl" value="@Url.Action("Index","Home")" />
<input type="submit" class="btn btn-primary" value="Submit"/>

现在，向您的操作方法添加一个与隐藏输入同名的新参数。当您为 _AddedSuccessfully View 调用 PartialView 方法时，将该字符串值作为 View 模型传递。

[HttpPost]
public IActionResult AddBook(Book model,string redirectUrl)
{
    if (ModelState.IsValid)
    {
        // to do : Save   
        return PartialView("_AddedSuccessfully", redirectUrl);
    }
    return PartialView("_AddBook", model);
}

现在您需要将分部 View 更新为 string 并使用 View 模型进行重定向。

@model string
<script>
    window.location.href = '@Model';
</script>