如何将下拉菜单设置为 return 文本值而不是其 ID？

Question

我对使用 razor pages 和 .NET core 进行编码还很陌生。这可能是一个容易解决的问题，但我找不到可以帮助我的资源。我找到的最接近的是这个 link，但我要么不理解它，要么不认为它适用，因为我正在尝试尽可能避免使用控制器，因为我正在使用 Razor 页面。

How to show the text of a property instead of the ID in Razor MVC 3

我有一个页面允许您为新员工创建一个新条目。我有另一个页面，允许您创建任务并使用下拉菜单将其分配给该列表中的员工。这是我查询下拉菜单信息的代码，它按预期工作。

    public class EmployeeNamePageModel : PageModel
    {
        public List<SelectListItem> EmployeeNameSL { get; set; }

        public void PopulateEmployeesDropDownList(ServiceContext _context)
         {
            EmployeeNameSL = _context.Employees_Informations.Select(a => new SelectListItem
            {
                Value = a.ID.ToString(),
                Text = a.employeename
            }).ToList();
         }
     }

这是我的职位创建页面上的代码。当单击 "Create" 时，正如预期的那样打开一个新页面，我在其中输入我的信息并从下拉列表中选择一名员工。

    public class CreateModel : EmployeeNamePageModel
    {
        private readonly Template.Data.ServiceContext _context;

        public CreateModel(Template.Data.ServiceContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            PopulateEmployeesDropDownList(_context);
            return Page();
        }

        [BindProperty]
        public Service_Request_Information Service_Request_Information { get; set; }

        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see https://aka.ms/RazorPagesCRUD.
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Service_Request_Informations.Add(Service_Request_Information);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }

    }

但是，在我保存页面并将其编入索引后，我看到的不是员工姓名，而是主要 ID。我现在的解决方法是不在 PopulateEmployeesDropDownList 函数中查询 ID，而只查询员工姓名。但是，我最终需要知道所选员工的 ID，以便稍后可以在函数中使用它来向该人发送电子邮件。

那么，如何让索引页面上显示的人名而不是该人的 ID？上面link里面的回答是说用view model，但是我没理解错的话他用的是controller。对于 razor pages，我的理解是控制器不是必需的；因此，如果可以的话，我不想使用它们。

编辑：这是我在创建页面中查看下拉菜单的代码。下拉视图还行，就是提交后索引时那个字段被保存为id

            <div class="form-group">
                <label asp-for="Service_Request_Information.AssignedTech" class="control-label"></label>
                <select asp-for="Service_Request_Information.AssignedTech" class="form-control"
                        asp-items="Model.EmployeeNameSL">
                    <option value="">-- Select --</option>
                </select>
                <span asp-validation-for="Service_Request_Information.AssignedTech" class="text-danger"></span>
            </div>

Answer 1

how do I get the name of the person to show up on the Index page instead of the ID of that person?

您使用员工 ID a.ID.ToString() 填充下拉列表 <option> 的 Value，因此所选值 (ID) 将发布在表单数据中并绑定到指定模型的属性，你得到的是员工的 ID，而不是所选 <option> 的 Text。

为了达到您的要求，您可以尝试以下方法：

在模型 class

中添加额外的属性 SelectedEmployeeName

public class Service_Request_Information
{
    public string AssignedTech { get; set; }

    public string SelectedEmployeeName { get; set; }

    //other properties
}

使用隐藏字段保存所选员工的姓名

<div class="form-group">
    <label asp-for="Service_Request_Information.AssignedTech" class="control-label"></label>
    <select asp-for="Service_Request_Information.AssignedTech" class="form-control"
            asp-items="Model.EmployeeNameSL" onchange="ddl_change_func(this);">
        <option value="">-- Select --</option>
    </select>

    <input id="selected_val" type="hidden" name="Service_Request_Information.SelectedEmployeeName" value="" />

    <span asp-validation-for="Service_Request_Information.AssignedTech" class="text-danger"></span>
</div>

使用选定的选项文本设置隐藏字段的值

<script>
    function ddl_change_func(el) {
        //code logic here...

        //set value of hidden field with selected option text
        var ename = $(el).find("option:selected").text();
        $("#selected_val").val(ename);
    }
</script>

测试结果

如何将下拉菜单设置为 return 文本值而不是其 ID？

How can I set my drop down menu to return text value instead of its ID?

asp.net-mvc

drop-down-menu

asp.net-core

razor-pages