如何将包含两个列表的模型从视图发回我的控制器



我有一个cshtml视图,我正在为此发送一个视图模型。该视图模型由两个专辑列表(音乐专辑(组成。然后,我要求用户检查最多 3 张这些专辑(标题旁边的复选框(以投票选出他最喜欢的音乐。我使用 javascript 来确保他不再检查超过 3(安全性现在是一个细节,我更关心让它工作,但如果人们有更好的解决方案,我愿意接受建议(。

由于所有相册都显示在表格中,因此我很想通过提交按钮发送回控制器,更新后与模型相同。

基本上,其中一个列表包含用户在加载页面之前进行的当前投票(可以为空(,第二个列表应该是空的,直到发送回包含当前选择的投票列表的控制器。然后,我使用这两个列表来比较它们并更新数据库,删除他删除的投票,并添加他添加的投票。

但是我无法创建一个适当的表单来返回这些信息,因为我不习惯表单。

我试图将整个列表放在一个表格中,但它没有用。当我寻找"将模型发送回控制器"时,我的研究通常就是这样做并使其工作。

查看模型

public class CategoryVotesUserViewModels
{
public CategoryVoteViewModels categoryVoteViewModels;
public List<int> listVotesEntry = new List<int>();
public List<int> listVotesOutput = new List<int>();
}

相关的 CSHTML 和 JavaScript

@section Header{
<script>
var MAX_VOTES = 3;
function checkNumberVotes($this) {
console.log($("input[name='listVoteOutput']:checked"));
if ($("input[name='listVoteOutput']:checked").length > MAX_VOTES) {
$this.checked = false;
}
}
</script>
}
@using (Html.BeginForm("VoteInCategory", "Votes", new { SearchModel = Model }, FormMethod.Post))
{
<ul>
@foreach (var av in Model.categoryVoteViewModels.listVotes)
{
<li>
@av.album.Title | @av.votes |
<input type="checkbox"
name="listVoteOutput"
value=@av.album.ID
onclick="checkNumberVotes(this)"
@if (Model.listVotesEntry.Contains(av.album.ID))
{ <text> checked </text> } />
</li>
}
</ul>
<div class="form-group text-center">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
}

控制器

[HttpPost]
public ActionResult VoteInCategory(CategoryVotesUserViewModels categoryVotesUserViewModels)
{
if (ModelState.IsValid)
{
List<int> toAdd = categoryVotesUserViewModels.listVotesOutput.Except(categoryVotesUserViewModels.listVotesEntry).ToList();
List<int> toRemove = categoryVotesUserViewModels.listVotesEntry.Except(categoryVotesUserViewModels.listVotesOutput).ToList();
VoteService.updateVoteUserCategory(User.Identity.GetUserId(), toRemove, toAdd, categoryVotesUserViewModels.categoryVoteViewModels.categoryID);
//TODO Redirect to success
return RedirectToAction("Index", "Home");
}
return View(categoryVotesUserViewModels);
}

如果用户已经投票,则应开始检查ID在"ListVotesEntry"中的所有专辑。如果用户之前没有投票,或者没有投票,"ListVotesEntry"应该为空。

当用户按下提交按钮时,如果选中了相册,则应将相册的 ID 添加到"列表投票输出"列表中。此外,"ListVotesEntry"和"ListVotesOutput"都应发送回控制器。包含专辑名称及其标题/ID 的列表对于其余的处理

不再需要

找到了解决方案。问题是我的模型需要使用"{get;设置;}",否则绑定不起作用,这意味着它会发回一个空模型。

最新更新