ASP.Net Core Razor 页面，selectedList 不呈现答案

【问题标题】：ASP.Net Core Razor Page, selectedList not renderingASP.Net Core Razor 页面，selectedList 不呈现
【发布时间】：2022-01-20 02:09:04
【问题描述】：

我对 asp.net core 很陌生，刚开始用它开发一个网站。最近，我遇到了一个问题。我有一个页面，其中有一个默认下拉列表供用户选择相应的选项（所有选项都是从我从数据库中获得的 selectedItem 呈现的）

但是，当用户决定添加一个额外的下拉列表（我使用 javascript 来做）时，选项是空白的。有什么建议吗？

谢谢。

function GetNewDropdown() {
            return '<hr /><div class="card-body"><h4 class="card-title text-primary">Please select your options</h4 > <div class="row">' +
                ' <select class="form-control" asp-items="@Model.Options"></div></div>';}

【问题讨论】：

假设第一个下拉列表是由 crud 模板生成的（模板根据 db 选择自动生成）。在这种情况下，您返回了第二个下拉代码？使用您尝试过的所有相关信息和方法更新您的问题。截至目前，您的问题尚不清楚，例如您在哪里添加了“GetNewDropdown”等。

标签： c# asp.net-core razor-pages

【解决方案1】：

您的动态下拉菜单是一个标签助手。标签助手是服务器端组件。它们仅在页面最初由 Web 服务器呈现时才起作用。它们在浏览器中不起作用。

您可以做的是将 HTML 从您的 JavaScript 函数移动到部分页面，然后使用 JavaScript 调用一个命名的页面处理程序方法，该方法返回一个 PartialResult 并将其加载到您的页面中。

部分：

@model List<SelectListItem>
<hr />
<div class="card-body">
    <h4 class="card-title text-primary">Please select your options</h4>
    <div class="row">
        <select class="form-control" asp-items="@Model"></select>
    </div>
</div>

剃刀页面：

<button id="add-dropdown">Add</button>
<div id="zone"></div>

@section scripts{
<script>
    $(function(){
        $('#add-dropdown').on('click', function(){
            $.get('?handler=options', function(response){
                $(response).appendTo('#zone');
            });
        });
    });
</script>
}

PageModel 中的命名处理程序：

public List<SelectListItem> Options { get; set; }
public PartialViewResult OnGetOptions()
{
    Options = new List<SelectListItem> { 
        new SelectListItem { Text = "a", Value = "1" }, 
        new SelectListItem { Text = "b", Value = "2" },
        new SelectListItem { Text = "c", Value = "3" },
    };
    return Partial("_DropdownPartial", Options);
}

您可以在我的网站上阅读有关这些内容的更多信息：

选择标签助手： https://www.learnrazorpages.com/razor-pages/tag-helpers/select-tag-helper
部分页面： https://www.learnrazorpages.com/razor-pages/partial-pages
已命名处理方法： https://www.learnrazorpages.com/razor-pages/handler-methods#named-handler-methods

【讨论】：