在 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

您可以使用FormHelper 在 ASP.NET Core 上创建 ajax 表单、ajax 重定向、显示通知和执行许多操作。此外，FormHelper 还可以帮助您将服务器端验证转换为客户端。

它非常易于使用。您只需将 asp-formhelper="true" 添加到您的表单标签。

<form asp-formhelper="true" asp-controller="Home" asp-action="Save">
   // <input...
   // ...
</form>

您可以在FormHelper GitHub Page 上查看它的文档。你可以从Nuget下载那个包。

Answer 2

您当前的表单已设置为执行 ajax 表单发布。所以当从服务器接收到响应时，它会替换form标签的内部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部分视图中将只有以下内容，即重定向到/Home/Index的javascript

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

编辑：根据评论

我怎样才能使它动态。因为我有几个部分视图 我的项目，我想通过 ControllerName 和 ActionName 作为 _AddedSuccessfully.cshtml 的参数？

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

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

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

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

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