如何在成功ajax调用部分绑定一个模型到URL动作?

Question

我正在与ASP合作。净的核心。我想给URL添加一个模型。这个模型来自于ajax调用的从控制器到成功部分。视图的代码:

<form>
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>
       /// Some Input Tag
  <div class="form-group">
     <button type="button" onclick="FilterOrder()"> Filter </button>
  </div>
</form>
<script>
    function FilterOrder() {
        var _url = '@Url.Action("Filter", "Controller")';
        $.ajax({
            url: _url,
            type: "POST",
            data: {
                  // Some data to send as a model
            },
            success: function (response) {
                console.log("Success");
                 window.location.href = '@Url.Action("ShowList", "Controller")/' + response; //has error 500
            },
        });
    }
</script>

控制器代码:

[HttpPost]
public IActionResult Filter(MyViewModel viewModel)
{
   if (ModelState.IsValid)
   {
      var list= FilterLists(viewModel);
      return Ok(list);
   }
   else
   {
      return View(viewModel);
   }
}
[HttpPost]
public IActionResult ShowList(List<Model> list)
{
   return View(list);
}

如何改变我的代码正确工作?

Answer 1

window.location.href=xx不能发送HttpPost请求，所以你不能使用这个方法来加载modal。方法之一是发送另一个post ajax在success函数中，然后在页面中显示返回的html，您可以参考这个简单的演示:

<script>
    function FilterOrder() {
        var _url = '@Url.Action("Filter", "Controller")';
        $.ajax({
            url: _url,
            type: "POST",
            data: {
                  // Some data to send as a model
            },
            success: function (response) {
                //send another ajax post request.
                $.ajax({
                    url: /Controller/ShowList,
                    type: "POST",                        
                    data: xxxx,
                    success: function (res) {
                       
                        //define a div to show the return html
                        document.getElementById("xxx").innerHTML = res,
                       //close the modal
                       $('#modalId').modal('hide')
                    },   
                });
            }
        });
    }
</script>