我正在尝试从视图提供用户输入,从控制器调用操作方法,使用输入过滤模型,然后返回带有已过滤模型的相同视图。
应用视图:
<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. 更好地处理这个问题。
谢谢。
response
变量里返回,但是你目前没有使用它,所以你可以在那里更新你的视图。_或者_你可以在视图模型中包含你的预算,并使用form
标签助手调用你的操作,以使用提交按钮的默认行为。 - Jesse de Wit