我正在嘗試通過開發一個簡單的項目來向用戶展示不同時態的動詞變形來學習 ASP Core 和 Razor。作為項目的一部分,我在開始時有一個選項頁面,其中有幾個下拉列表(使用 HTML 選擇組件)來選擇要呈現的動詞以及呈現它們的順序。其中一個下拉菜單(訂單選擇器)按我的預期工作,即它顯示一個值,其右側有一個下拉箭頭,單擊時打開列表(見下圖)。另一個(動詞選擇器)在一個框中顯示 4 個項目,列表右側有一個滾動條,并且沒有下拉選擇器。兩者都使用相同的代碼和基礎數據,我無法理解為什么它們的行為不同。我希望它們都表現得像一個下拉菜單(單行,右側有下拉選擇器)。有誰知道我怎樣才能讓他們以同樣的方式行事?下面包含屏幕截圖和代碼段。這是兩個選擇組件的屏幕截圖。動詞選擇器位于頂部,順序選擇器位于下方。動詞選擇器具有以下 HTML(它構成一組選項的一部分,因此具有單選輸入,但這些組件之間沒有交互。我已注釋掉單選輸入,它對選擇組件的顯示方式沒有影響):<td> <input type="radio" name="selverbs" value="sel" id="sel" onclick="javascript:topenable()" /> <label for="top">Selected verbs </label> <select name="verbs" asp-for="selectedverbs" asp-items="Model.verbs"></select></td>訂單選擇器具有以下 HTML:<td> <label>Verb order: </label> <select name="order" asp-for="selectedorder" asp-items="Model.order"></select></td>兩個選擇器都使用其中包含 SelectListItems 的列表。動詞選擇器的數據是這樣創建的:public List<SelectListItem> GetVerbs(){ List<SelectListItem> results = new List<SelectListItem>(); int rank = 1; foreach (string s in collection.AsQueryable().OrderBy(doc => doc.Rank).GroupBy(doc => doc.Rank).Select(g => g.First().Infinitive)) { results.Add(new SelectListItem(s, rank.ToString(CultureInfo.CurrentCulture))); rank++; } return results;}訂單選擇器的數據生成如下:[BindProperty]public List<SelectListItem> order { get; } = new List<SelectListItem>{ new SelectListItem { Value = "1", Text = "forward" }, new SelectListItem { Value = "-1", Text = "reverse" }, new SelectListItem { Value = "0", Text = "random" }};我嘗試在動詞選擇器上設置 size="1" ,但這沒有任何區別。該組件仍然顯示滾動條(請參見下面的屏幕截圖)。我認為我的 CSS 文件中沒有任何內容會導致這種差異,但我對 CSS 知之甚少,因此在下面包含了完整的文件。這主要是我在設置項目時由 Visual Studio 創建的默認文件,并添加了一些內容。
1 回答

婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
事實證明,這不是尺寸問題,而是約束問題。selectedverbs
它似乎是由頁面關聯的 c# 文件中的返回值 () 的綁定引起的,如下所示:
[BindProperty] public List<SelectListItem> selectedverbs { get; }
因為這將采用多個返回值,所以它multiple
針對select
組件進行設置。當我將其更改為時,public string selectedverbs { get; }
該select
組件將作為標準下拉列表運行,大概只允許選擇單個項目。
- 1 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消