ajax表單在Asp.net核心提交後的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> 

Partialview：

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

EDIT：作爲每註釋

我該如何動態製作它。因爲我有我的項目 幾個局部視圖，我想通過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); 
} 

現在，你需要是強類型的局部視圖UDPATE到string和使用重定向視圖的模型。

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