ASP.Net 核心 Razor 页面，selectedList 未呈现

Question

我是 asp.net 核心的新手，刚开始用它开发一个网站。最近，我遇到了一个问题。我有一个页面，其中有一个默认下拉列表供用户 select 相应的选项（所有选项都是从我从数据库中获得的 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>';}

Answer 1

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

你可以做的是将 HTML 从你的 JavaScript 函数移动到一个部分页面，然后使用 JavaScript 调用一个命名的页面处理程序方法 returns a 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>

Razor 页面：

<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);
}

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

Select 标签助手： 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

ASP.Net 核心 Razor 页面，selectedList 未呈现

ASP.Net Core Razor Page, selectedList not rendering

c#

asp.net-core

razor-pages