时间戳

首页 > 解决方案 > 带有单选的 ASP.NET Core MVC 下拉框

c# - 带有单选的 ASP.NET Core MVC 下拉框

问题描述

我正在尝试学习 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>

我按照本教程到达了我现在所处的位置，但我不确定我可以做些什么不同的事情，这使得它不起作用。

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

解决方案

对于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;

推荐阅读