ASP.NET Core MVC - 无法返回带有视图的模型答案

【问题标题】：ASP.NET Core MVC - Trouble returning model with viewASP.NET Core MVC - 无法返回带有视图的模型
【发布时间】：2019-08-15 22:25:00
【问题描述】：

我试图从视图中提供用户输入，从控制器调用操作方法，使用输入来过滤模型，然后返回与过滤后的模型相同的视图。

应用视图：

<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 操作方法，过滤电影模型，然后渲染相同的App 视图，但是我需要使用模型填充表格。如果我直接导航到像“localhost:xxxx/Movies/App?budget=20”这样的网址，它确实有效。但不是通过按钮点击。

我知道我实际上不需要重新渲染页面，但我不明白为什么我这样做的方式不起作用，我想在继续之前弄清楚它。你会怎么做：1. 按照我尝试的方式正确地做，2. 做得更好。

谢谢。

【问题讨论】：

您正在进行 ajax 调用。 ajax 调用将在response 变量中返回您的视图，但您当前没有使用它，因此您可以在那里更新您的视图。或者您可以在视图模型中包含您的预算，并使用提交按钮的默认行为调用您的操作，方法是使用form taghelper。

标签： c# asp.net .net asp.net-mvc

【解决方案1】：

最好的办法可能是从控制器返回部分视图

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

【讨论】：

【解决方案2】：

最简单的方法就是重定向到具有预算值的 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>

正确的方法是和微软的人做同样的事情：https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/sort-filter-page

【讨论】：