时间戳

首页 > 解决方案 > 将 Html.DropDownList 与视图组件一起使用

c# - 将 Html.DropDownList 与视图组件一起使用

问题描述

我想在我的 ASP.NET Core 2.2 MVC 应用程序的视图组件中创建一个下拉列表。

我需要在同一个视图中显示多个模型，所以我正在使用视图组件。我尝试了部分视图，但遇到了一些麻烦。我一直在参考这个文档。

public class Tag
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

public class TagListViewComponent : ViewComponent
{
    private readonly Website.Data.ApplicationDbContext db;
    public TagListViewComponent(Website.Data.ApplicationDbContext context)
    {
        db = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var tag = await db.Tag.ToListAsync();
        return View(tag);
    }
}

意见：

编辑.cshtml

// (using a different model and removing irrelevant HTML)
<div>
    @await  Component.InvokeAsync("TagList")
</div>

默认.cshtml

@model IEnumerable<Website.Models.Tag>
@foreach (var item in Model)
{
    @Html.ActionLink(item.Title, "Details", "Tags", new { item.Id }, new { @class = "btn btn-outline-primary btn-sm" })
    <br />
}

当我使用 导航到页面时，上面的代码呈现了数据库中列出的六个标签edit.cshtml，例如https://localhost:xxxxx/Posts/Edit/2。

我遇到的问题是我一生都无法弄清楚如何在下拉列表中显示标签。我可以在Default.cshtml视图中添加以下内容：

@Html.DropDownList("Title", new SelectList(Model))

这确实会创建一个下拉列表，其中包含六个选项（这是正确的数字），但所有选项都说Website.Models.Tag. 我无法访问该Tag.Title物业或任何其他物业。

我也试过@Html.DropDownListFor()了，但它也不允许我访问任何属性。

在 中TagListViewComponent.cs，我尝试包含更多信息（PostTags是 的导航属性Tag，它包含一个tag链接回标签的属性...）。InvokeAsync但是下面的代码只提供与原始方法相同的访问级别：

public async Task<IViewComponentResult> InvokeAsync()
{
   var tag = await db.Tag
            .Include(t => t.PostTags)
            .ThenInclude(pt => pt.tag)
            .ToListAsync();
   return View(tag);
}

我无法找到任何有关将下拉列表与视图组件一起使用的信息。任何方向将不胜感激。

标签： c#asp.netasp.net-mvcasp.net-corerazor

解决方案

从您的模型创建一个IEnumerable<SelectListItem>并将其传递给@Html.DropDownList("Title", selectListItems)

var selectListItems = Model
    .Select(tag => new SelectListItem{ Text = tag.Title, Value = tag.Id });

推荐阅读