在 PartialView ASP.NET Core 中显示 <select> 值

Question

我将项目从 ASP.NET MVC 迁移到 ASP.NET Core

我有两个 daropdowns 的部分视图

所以Controller方法是这样的

 public ActionResult AddPeopleToProposal()
    {
        ViewBag.Worker = new SelectList(db.People, "Id", "FIO").ToList();
        ViewBag.Proposal = new SelectList(db.Proposals, "Id", "Id").ToList();
        return PartialView("AddPeopleToProposal");
    }

在 View 中我是这样渲染的

<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            @Html.Action("AddPeopleToProposal", "Manage")
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
            <button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
        </div>
    </div>
</div>

和局部视图

<form>
<div class="form-group">
    <label for="recipient-name" class="col-form-label">Працівник</label>
    @Html.DropDownList("Worker", null, "XXXX", htmlAttributes: new { @class = "form-control", @id = "peopleIdAdd" })
</div>
<div class="form-group">
    <label for="recipient-name" class="col-form-label">Оберіть заявку</label>
    @Html.DropDownList("Proposal", null, "XXXX", htmlAttributes: new { @class = "form-control", @id = "proposalIdAdd" })
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Коментар</label>
    <input type="text" class="form-control" id="commentVchasno" >
</div>

但据我所知，@Html.Action 被贬低了

我在 Core 中是这样实现的

控制器

public ActionResult AddPeopleToProposal()
    {
        ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
        ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");
        return PartialView("Partials/AddPeopleToProposal");
    }

和局部视图

<form>
    <div class="form-group">
        <label  class="col-form-label">Працівник</label>
        <select class="form-control" asp-items="ViewBag.Worker"></select>
    </div>
    <div class="form-group">
        <label  class="col-form-label">Оберіть заявку</label>
        <select  class="form-control" asp-items="ViewBag.Proposal"></select>
    </div>
    <div class="form-group">
        <label  class="col-form-label">Коментар</label>
        <input type="text" class="form-control" id="commentVchasno" >
    </div>

</form>

并从我调用部分的位置查看

<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            @Html.Partial("Partials/AddPeopleToProposal")
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
            <button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
        </div>
    </div>
</div>

但在核心，我没有选择值。我的问题在哪里？

Answer 1

如果想在获取Partial View的时候直接初始化页面，尝试将以下两行代码放到Partial View的主View的get请求中。 More关于部分观点

ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");

或者您可以使用ViewComponent 代替部分视图从视图组件类中的Invoke 方法中获取下拉列表的填充数据。试试下面的代码

ViewComponent.cs

 public class AddPeopleToCountryViewComponent:ViewComponent
{
    private readonly MVCDbContext _context;

    public AddPeopleToCountryViewComponent(MVCDbContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync(
    int maxPriority, bool isDone)
    {
        ViewData["Customer"] = new SelectList(_context.Customer, "Id", "Name");
        ViewData["Country"] = new SelectList(_context.Country, "Id", "Id");
        return View();
    }
}

ViewComponent的Default.cshtml

<form>
<div class="form-group">
    <label class="col-form-label">People</label>
    <select class="form-control" asp-items="@ViewBag.Customer"></select>
</div>
<div class="form-group">
    <label class="col-form-label">Country</label>
    <select class="form-control" asp-items="@ViewBag.Country"></select>
</div>
<div class="form-group">
    <label class="col-form-label">Comment</label>
    <input type="text" class="form-control" id="commentVchasno">
</div>

代替主视图modal中的PartialView

<div class="modal-body">
     @await Component.InvokeAsync("AddPeopleToCountry", new {  })
 </div>