使用jQuery向控制器发送POST请求并重定向到ASP.NET MVC视图

Question

我有一些复选框和一个按钮（不在表单中）。

当按钮被点击时，我使用jQuery创建了一个包含选中复选框的值的post模型，并将其提交给控制器。

然后，控制器创建视图模型，并希望将用户重定向到正确的视图，并将视图模型传递给视图。

jQuery：

 $.ajax({
      url: AppSettings.baseUrl + "BOM/getMultiBOM",
      type: 'POST',
       data: JSON.stringify(data)
 });

控制器：

[HttpPost]
public ActionResult getMultiBOM(multiBOMPostModel multiBomsPostModel)
{
       BOM bom = null;

       foreach (int value in multiBomsPostModel.bomsArray)
       {
           bom = db.BOMs.Find(value);
       }

       BOMViewModel viewModel = getViewModel(bom, null);
            
       return RedirectToAction("OpenMultiBOM", new { viewModel = viewModel, bom = bom });
}

public ActionResult OpenMultiBOM(BOMViewModel viewModel, BOM bom)
{
    viewModel.projectModel = new ProjectViewModel
        {
            project = bom.Project

        };
    return View(viewModel);
}

这可能有点混乱。

我认为使用jQuery将复选框的值传递给控制器是必要的。

当我使用RedirectToAction方法跳转到方法并返回视图时，模型没有被传递，可能是因为它将模型作为查询字符串发送。

视图模型不简单，包含列表、IEnumerables和嵌套模型。

有人能帮忙找到最有效的重定向/返回视图同时传递视图模型的方法吗？

答案：我保留了ajax，将我的复选框值提交到控制器。

 $.ajax({
     url: AppSettings.baseUrl + "BOM/getMultiBOM",
     type: 'POST',
     data: JSON.stringify(dataArr),
 }).done(function (result) {
       location.href = "/BOM/OpenMultiBOM";
 });

在我的控制器中，我将提交的值分配给了一个postModel，然后将其存储在TempData中。关键在于返回一个Json值，这将允许客户端重定向。

 public ActionResult getMultiBOM(multiBOMPostModel multiBOMPostModel)
 {  
        TempData["BOMs"] =  multiBOMPostModel;
        return Json("success");
 }

然后我有另一个HttpGet方法，该方法会在页面由Ajax结果重定向后加载，并将TempData转换为对象。

[HttpGet]
public ActionResult OpenMultiBOM(int? BomMarkupMessage = null)
{
    var bomIds = TempData["BOMs"] as multiBOMPostModel;
}

- Dion

---

请展示BOM和BOMViewModel类的结构。请注意，您无法从AJAX执行RedirectToAction，请改用普通表单提交。 - Tetsuya Yamamoto

我在我的问题中使用了这个！ - Ivan Apungan

Answer 1

我会将viewmodel持久化到服务器端，可能是在一个会话变量中，或者作为TempData（TempData通常只存在于下一个请求之前）。对于会话变量，将会传递一个会话变量的键给第二个控制器；对于TempData，在视图中直接使用它即可。这样可以避免多次来回传递整个对象。

- Jonathan

---

我使用了TempData，但是我在重定向浏览器时遇到了问题。因为最初的请求是使用jquery发出的，结果是视图被返回，但浏览器没有被重定向到正确的页面。有什么建议吗？ - Dion

是的 - 我认为你需要从控制器传回一个重定向URL或类似参数，使用jQuery ajax捕获成功响应，并在JavaScript中手动重定向。请参见：https://dev59.com/OHjZa4cB1Zd3GeqPhbls - Jonathan

Answer 2

所以我之前做过的方法是在DOM中有一个空的div。

<div id="partialViewContent">
<!-- Content will be loaded later. -->
</div>

如果您有一个默认视图，则需要使用以下代码片段将其设置为从 URI 加载。

$("#partialViewContent").load("Controller/Action",
        function (response, status) {
            if (status !== "success") {
                console.log("An error has occured when attempting to load partial view.");
            }
        });

当您通过JQUERY发布到控制器操作时，请让该操作返回一个带有模型的部分视图。（假设模型与每个部分视图相关）。

然后，当您的AJAX完成时，用POST响应替换partialViewContent中的内容。

- David Morrison