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

Question

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

索引视图：

<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>

部分视图：

 @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>

控制器 ：

 [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);
        }
    }

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

Answer 1

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

如果您想进行重定向，但仍希望模型验证有效，您可能会返回一个视图结果，其中包含一些执行重定向的 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局部视图中将只有以下内容，这是重定向到的 javascript/Home/Index

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

编辑：根据评论

我怎样才能动态地做到这一点。因为我的项目中有几个局部视图，我想将 ControllerName 和 ActionName 作为参数传递给 _AddedSuccessfully.cshtml？

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

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

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

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

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

现在您需要更新要强类型化的局部视图string并使用视图模型进行重定向。

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