ASP.Net Core 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 服務器呈現時才起作用。 它們在瀏覽器中不起作用。

What you can do is move the HTML from your JavaScript function to a partial page, and then use JavaScript to call a named page handler method that returns a PartialResult and load it into your page.

部分的：

@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