在.NET 8中显示多选下拉列表

问题描述 投票:0回答:1

我是 .NET 8 的新手,我使用 MVC、EF 和 X.PagedList 构建了一个表单。我的表单有一个多选下拉列表。我能够将表单保存到数据库。多选下拉列表会像这样保存到数据库中

["abc", "xyz"]

这是我的模型:

public partial class Bat
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public Guid Id { get; set; }
    
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public IEnumerable<string>? MyMultiSelectList { get; set; } = null!; 
}

但是当我查看

Index
页面时,我在下面的
IQueryable
行收到错误:

ArgumentException:方法“System.Collections.Generic.IList

1[System.String]' cannot be used for parameter of type 'System.Collections.Generic.IList
1[System.String]”的类型“System.Collections.Generic.IEnumerable
1[System.String] PopulateList[String](System.Collections.Generic.IList
1[System.String]”的表达式,System.Collections.Generic。 IList`1[System.String])'(参数'arg0')。

这是我的

Index
方法代码:

public IActionResult Index(int? page)
{
    IQueryable<Bat> Bats = _context.Bats.AsQueryable();

    int pageSize = 10;
    int pageNumber = (page ?? 1);

    return View(Bats.ToPagedList(pageNumber, pageSize));
}

这是我的

Index
页面的代码:

@using X.PagedList
@using X.PagedList.Mvc.Core
@model X.PagedList.IPagedList<QII.Models.Initiative>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MyMultiSelectList)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MyMultiSelectList)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
    </tbody>
</table>

有人可以告诉我如何在我的索引页面上将这个多选下拉列表显示为像 abc,xyz 这样的字符串并消除这个错误吗?

c# asp.net-core asp.net-core-mvc .net-8.0 pagedlist
1个回答
0
投票

您可以尝试将 IEnumerable 转换为视图中以逗号分隔的字符串:

public partial class Bat
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public Guid Id { get; set; }
    
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public IEnumerable<string>? MyMultiSelectList { get; set; } = null!; 

    // New property to get comma-separated string
    public string MyMultiSelectListAsString 
    {
        get
        {
            return MyMultiSelectList != null ? string.Join(", ", MyMultiSelectList) : string.Empty;
        }
    }
}

更新索引页面的视图:

@using X.PagedList
@using X.PagedList.Mvc.Core
@model X.PagedList.IPagedList<QII.Models.Initiative>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MyMultiSelectListAsString)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MyMultiSelectListAsString)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
    </tbody>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.