带有单选的 ASP.NET Core MVC 下拉框答案

【问题标题】：ASP.NET Core MVC Dropdown box with single select带有单选的 ASP.NET Core MVC 下拉框
【发布时间】：2018-12-11 15:34:32
【问题描述】：

我正在尝试学习 ASP .NET Core，并且正在制作一个简单的 Web 应用程序来跟踪我玩的视频游戏中的赢/输。在一个屏幕上，我希望用户从两个下拉框中选择一个角色和一个舞台，这些下拉框中填充了来自 SQL 数据库的数据。我遇到的问题是我无法让这些框显示为单选下拉框。它们只会显示为带有滚动条的多选框。

这是我用于控制器的代码：

public class HomeController : Controller
{
    public readonly IConfiguration configuration;
    private readonly DatabaseContext _context;
    Repository _repository = new Repository();

    public HomeController(IConfiguration config, DatabaseContext context)
    {
        this.configuration = config;
        _context = context;
    }

    public IActionResult AddGame()
    {
        List<CharacterViewModel> characterList = new List<CharacterViewModel>();
        List<StageViewModel> stageList = new List<StageViewModel>();

        characterList = (from Name in _context.Characters select Name).ToList();
        characterList.Insert(0, new CharacterViewModel { CharacterID = 0, Name = "" });
        ViewData["characterList"] = characterList;
        ViewBag.characterList = characterList;


        stageList = (from Stage in _context.Stages select Stage).ToList();
        stageList.Insert(0, new StageViewModel { StageID = 0, Name = "" });
        ViewData["stageList"] = stageList;
        ViewBag.stageList = stageList;

        AddGameViewModel addGameViewModel = new AddGameViewModel();
        addGameViewModel.Characters = characterList;
        addGameViewModel.Stages = stageList;

        return View(addGameViewModel);
    }
}

对于我的角色模型（舞台模型几乎相同）：

public class CharacterViewModel
{
    [Key]
    public int CharacterID { get; set; }

    [Display(Name = "CharacterName")]
    public string Name { get; set; }
}

最后是我的观点：

<form asp-controller="HomeController" asp-action="AddGame" method="post" class="form-horizontal" role="form">
<div class="form-group">
    <div class="row">
        <div asp-validation-summary="ModelOnly"></div>
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <p>Character</p>
            <select asp-for="Characters" id="characterSelect"
                    class="dropdown"
                    asp-items="@(new SelectList(ViewBag.CharacterList, "CharacterID", "Name"))"></select>
        </div>
    </div>
    <div class="row">
        <div asp-validation-summary="ModelOnly"></div>
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <p>Stage</p>
            <select asp-for="Stages" id="stageSelect"
                    class="dropdown"
                    asp-items="@(new SelectList(ViewBag.StageList, "StageID", "Name"))"></select>
        </div>
    </div>
</div>
</form>

我跟随 This tutorial 到达了我现在的位置，但我不确定我可以采取哪些不同的做法导致这不起作用。

【问题讨论】：

看起来完全一样，除了
我只是尝试过，它并没有改变页面上的任何内容，不过感谢您的建议。
这很奇怪。我做到了here 并应用了样式。您能否检查您的 html，并验证是否有任何样式或属性覆盖了引导程序中的表单控件？
这将是因为asp-for="Stages" - 在您的情况下，看起来AddGameViewModel.Stages 的类型为List<StageViewModel>，这就是select 元素使用multiple 呈现的原因属性并如您所显示的那样显示。如果您只想选择一个Stage，请将属性更改为StageViewModel，而不是List<StageViewModel>。当然，同样的逻辑也适用于 Character。
删除asp-for 不是这里的解决方案：按照我的描述更改AddGameViewModel 是可行的方法。否则你以后会遇到更多问题。如果您在问题中包含AddGameViewModel 类，如果您愿意，我会写一个更详细的答案。

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

【解决方案1】：

对于Characters 和Stages，您使用的是asp-for：

<select asp-for="Characters" ...
<select asp-for="Stages" ...

看你怎么配置你的AddGameViewModel，好像有以下两个属性：

List<Character> Characters { get; set; }
List<Stage> Stages { get; set; }

当标签助手处理您的asp-for 表达式时，它确定您希望能够选择多个 Characters 和Stages，仅仅是因为它正在查看的模型表示每个列表（它最终将multiple 属性添加到select 元素）。

为了完成这项工作，您只需将我提到的两个属性更改为：

Character Character { get; set; }
Stage Stage { get; set; }

这还需要您删除以下（已经是多余的）行：

addGameViewModel.Characters = characterList;
addGameViewModel.Stages = stageList;

【讨论】：