ASP.NET Core MVC - 返回视图时遇到模型问题

Question

我正在尝试从视图提供用户输入，从控制器调用操作方法，使用输入过滤模型，然后返回带有已过滤模型的相同视图。

应用视图：

<div class="form-group">
    <div class="row">
        <div class="col-xs-3">
            Enter your budget, and we'll show you all the movies you can afford:
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" id="budget" />
        </div>
        <div class="col-xs-3">
            <input type="submit" class="btn" id="budgetSubmit" onclick="budgetFilter()" />
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 col-xs-offset-3">
            <label id="budgetValidation"></label>
        </div>
    </div>
    <br />
    <table class="table" id="budgetTable">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Genre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Price)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Genre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                </tr>
            }
        </tbody>
    </table>

<script>
function budgetFilter() {
    let budget = $("#budget").val();
    if (budget != "") {
        $.get("../Movies/App?budget=" + budget, function (response) {
        })
            .fail(function () {
                $("#budgetValidation").html("No films match your budget")
            });
    }
    else {
        $("#budgetValidation").html("Please enter a budget");
    }
 </script>

控制器：

        public async Task<IActionResult> App(decimal budget)
        {
            var movie = await _context.Movies.Where(m => m.Price <= 
            budget).ToListAsync();
            if (movie == null)
            {
                return NotFound();
            }
            return View(movie);
        }

我已经调试了控制器并确认它按预期工作。我的理解是，点击 "budgetSubmit" 会触发 "budgetFilter"，该函数调用控制器中的 "App" 操作方法，该方法过滤电影模型(model)，然后呈现相同的 "App" 视图，但包含我需要填充表格的模型(model)。如果我直接导航到像“localhost:xxxx/Movies/App?budget=20”这样的url，它就能正常工作。但是通过按钮单击则不行。

我知道实际上我不需要重新渲染整个页面，但我不明白我之前尝试的方式为什么不起作用，并希望在继续之前找到原因。您可以如何：1. 正确地使用我尝试的方法，2. 更好地处理这个问题。

谢谢。

- allenfromspace

---

你正在进行一个ajax调用。这个ajax调用将会把你的视图放在response变量里返回，但是你目前没有使用它，所以你可以在那里更新你的视图。_或者_你可以在视图模型中包含你的预算，并使用form标签助手调用你的操作，以使用提交按钮的默认行为。 - Jesse de Wit

Answer 1

1. 最简单的方法就是在带有预算值的url上进行重定向。对于宠物\家庭项目非常有效。

<script>
    function budgetFilter() {
        let budget = $("#budget").val();
        if (budget != "") {
            window.location.href = `/Home/App?budget=${budget}`;
        } else {
            $("#budgetValidation").html("Please enter a budget");
        }
    }
</script>

2. 正确的方式是像微软的人一样做：https://learn.microsoft.com/zh-cn/aspnet/core/data/ef-mvc/sort-filter-page。

- Levchenkov

Answer 2

你最好从控制器返回一个部分视图。

public async Task<IActionResult> App(decimal budget)
    {
        var movie = await _context.Movies.Where(m => m.Price <= 
        budget).ToListAsync();
        if (movie == null)
        {
            return NotFound();
        }
        return PartialView(movie);
    }

将视图中的动态位移出到一个部分中。

<div id="budget"> 
  <table class="table" id="budgetTable">
   ...
  </table>
</div>

在您的 AJAX 回调函数中。

    $.get("../Movies/App?budget=" + budget, function (response) {
       $("#budget").html(response);
    })

如果您希望在每次请求时获取新数据，这是明智的。如果您只想在第一次调用时返回完整有效载荷并在客户端进行过滤，则建议查看this。

- cookee89