c# - 在剃须刀页面中使用 c# 从另一个列表框中填充选择选项

Question

Hy，我试图在单击按钮后用另一个列表框A 中的选定项目填充列表框B。我的 HTML 代码

<div class="row" runat="server">
    <div class="m-auto">
        <form method="post">
            <label>Coalition</label>
            <select id="CoalitionList" class="form-control" name="CoalitionList" asp-for="CoalitionList">
                <option value="0" selected disabled>-- Select Coalition --</option>
                <option value="1">Coalition A</option>
                <option value="2">Coalition B</option>
            </select>
            <label>Alliances</label>
            <select id="AllianceList" class="form-control" name="AllianceList" asp-for="AllianceList" asp-items="@Model.AllianceItems" multiple="multiple" size="10">
                <option value="0" selected disabled>-- Select Alliance --</option>
            </select>
            <button name="AddButton" id="AddButton" class="btn btn-primary" type="submit" onclick="AddButton_Click">Add</button>
        </form>
    </div>
    <br />
    <div class="form-group">
        <form method="post">
            <label>Coalition A</label>
             //The selected items should display here
            <select id="CoalitionAList" name="CoalitionAList" class="form-control" size="10" asp-items="@Model.SelectedAllianceItems">
            </select>
        </form>
    </div>
</div>

我的代码在后面。如何访问值字段的 SelectedValue 和文本字段的 Displaymemberpath？

 public class GenerateChartsModel : PageModel
    {
        private readonly DContext _db;
        public GenerateChartsModel(DContext db)
        {
            _db = db;
        }
        [BindProperty]
        public int CoalitionList { get; set; }
        //To Display selected value in CoalitionAList
        public IEnumerable<SelectListItem> SelectedAllianceItems { get; set; }
        //Storing and passing selected values
        public int AllianceList { get; set; }
        //Displaying items
        public IEnumerable<SelectListItem> AllianceItems { get; set; } 
        public void OnGet()
        {
            AllianceItems = _db.Alliances.Select(a => new SelectListItem {Value = a.Alliance_Id.ToString(), Text = a.Alliance}).ToList();
        }
        protected void AddButton_Click(object sender, EventArgs e)
        {
            var SelectedCoalitionList = this.CoalitionList;
            var SelectedAllianceList = this.AllianceList;
            if(SelectedAllianceList != 0 || SelectedCoalitionList != 0)
            {
                SelectedAllianceItems = new List<SelectListItem>()
                {
                    //This doesn't work.
                    new SelectListItem{Value = SelectedAllianceList.ToString(), Text = SelectedAllianceList.ToString()}
                };
            }
        }
    }

关于一个完全不同但相似的话题。如果我尝试使用 asp:listbox 或我尝试过的任何东西，我的页面不会呈现。即使我从 docs.microsoft 复制了整个代码。有什么理由吗？

标签： c#htmlasp.net-core

Answer 1

尝试在 AddButton_Click 事件中设置调试器，可以看到该方法没有执行。通常，在 Asp.net core 中，handler 方法以“On”为前缀，例如：OnGet()、OnPost()、OnPut() 等。当你点击按钮时，它会将表单提交给这个handler 方法，而不是使用按钮单击事件（像这样的 asp.net 服务器端单击事件）。有关 asp.net core 中处理程序方法的更多详细信息，您可以查看此链接：Razor Pages 中的处理程序方法。

因此，您可以修改代码如下：

Index.cshtml 中的代码

<div class="row" runat="server">
    <div class="m-auto">
        <form method="post">
            <label>Coalition</label>
            <select id="CoalitionList" class="form-control" asp-for="CoalitionList" asp-items="@Model.CoalitionItems">
                <option value="0" selected disabled>-- Select Coalition --</option> 
            </select>
            <label>Alliances</label>
            <select id="AllianceList" class="form-control" asp-for="AllianceList" asp-items="@Model.AllianceItems" multiple="multiple" size="10">
                <option value="0" selected disabled>-- Select Alliance --</option>
            </select>
            <button name="AddButton" id="AddButton" class="btn btn-primary" type="submit" onclick="AddButton_Click">Add</button>
        </form>
    </div>
    <br />
    <div class="form-group">
        <form method="post">
            <label>Coalition A</label>
            //The selected items should display here
            <select id="CoalitionAList" name="CoalitionAList" class="form-control" size="10" asp-items="@Model.SelectedAllianceItems">
            </select>
        </form>
    </div>
</div>

Index.cshtml.cs 中的代码
注意：由于您使用的是列表框，我想您可能想要选择多个项目，因此，我将 AllianceList 数据类型从 更改int为List<int>。如果您不喜欢这样，请将其更改回int.

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }
    [BindProperty]
    public int CoalitionList { get; set; }
    //To Display selected value in CoalitionAList
    public IEnumerable<SelectListItem> SelectedAllianceItems { get; set; }

    //Storing and passing selected values 
    [BindProperty]
    public List<int> AllianceList { get; set; }
    //Displaying items
    public IEnumerable<SelectListItem> AllianceItems { get; set; } 
    public IEnumerable<SelectListItem> CoalitionItems { get; set; }

    public IActionResult OnGet()
    {
        AllianceItems = GetAllianceItems();
        CoalitionItems = GetCoalitionItems();

        return Page();
    } 

    public List<SelectListItem> GetAllianceItems()
    {
        //test data
        return new List<SelectListItem>()
        {
            new SelectListItem(){ Value = "1001", Text ="AAA"},
             new SelectListItem(){ Value = "1002", Text ="BBB"},
              new SelectListItem(){ Value = "1003", Text ="CCC"},
               new SelectListItem(){ Value = "1004", Text ="DDD"},
                new SelectListItem(){ Value = "1005", Text ="EEE"},
        };
    }
    public List<SelectListItem> GetCoalitionItems()
    {
        return new List<SelectListItem>()
        {
            new SelectListItem(){ Value = "1", Text ="Coalition A"},
             new SelectListItem(){ Value = "2", Text ="Coalition B"}, 
        };
    }
    public IActionResult OnPost()
    {
        var SelectedCoalitionList = this.CoalitionList;
        var SelectedAllianceList = this.AllianceList;
        if (SelectedAllianceList.Count> 0 || SelectedCoalitionList != 0)
        {
            SelectedAllianceItems = new List<SelectListItem>()
            { 
                new SelectListItem{Value = String.Join(",", SelectedAllianceList), Text = String.Join(",", SelectedAllianceList)}
            };
        }

        //re-populate the ListBox A and the DropDownlist
        AllianceItems = GetAllianceItems();
        CoalitionItems = GetCoalitionItems();

        return Page();
    }
}

输出：