You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ASP.NET Core编辑页如何通过ViewBag为ActivityType下拉框设置SelectedValue

首先修正你的查询逻辑错误

你现有代码中的查询条件写错了:where a.ActivitySubType == id,入参id是ActivityRecord的主键,应该匹配ActivityRecordId,否则你拿不到正确的ActivityTypeId。


方案1:直接指定选中值(最快修复)

你只需要在构造SelectList时传入第四个参数selectedValue,或者直接给对应SelectListItem的Selected属性赋值即可。

控制器修改

public async Task<IActionResult> Edit(int? id)
{
    if (id == null) return NotFound();
    // 先获取当前要编辑的活动记录
    var activityRecord = await _db.ActivityRecords
        .Include(r => r.ActivitySubType)
        .FirstOrDefaultAsync(r => r.ActivityRecordId == id);
    if (activityRecord == null) return NotFound();

    // 直接通过导航属性拿对应的ActivityTypeId,不需要写复杂的联表查询
    int targetActivityTypeId = activityRecord.ActivitySubType.ActivityTypeId;

    var activityTypeList = _db.ActivityTypes
        .Select(a => new SelectListItem()
        {
            Text = a.ActivityTypeName, 
            Value = a.ActivityTypeId.ToString(),
            // 直接在这里标记对应选项为选中状态
            Selected = a.ActivityTypeId == targetActivityTypeId
        })
        .ToList();

    activityTypeList.Insert(0, new SelectListItem()
    {
        Text = "Select...",
        Value = ""
    });
    ViewBag.ActivityTypeDropList = activityTypeList;
    // 把编辑实体返回给视图,后续子下拉选中也需要用到
    return View(activityRecord);
}

前端代码不用修改

你原来的下拉框绑定代码可以直接用,渲染时会自动识别SelectListItem的Selected属性选中对应项。

如果不想在控制器端标记选中,也可以在前端构造SelectList时传入选中值:

// 控制器里加一行存选中值
ViewBag.SelectedActivityTypeId = targetActivityTypeId.ToString();
<!-- 前端构造SelectList时加第四个参数 -->
<select id="ActivityTypeId" class="form-control form-control-sm" 
        asp-items="@(new SelectList(ViewBag.ActivityTypeDropList,"Value", "Text", ViewBag.SelectedActivityTypeId))">
</select>

方案2:用强类型视图模型(更推荐的工程化实现)

避免用ViewBag传递数据的魔法字符串、类型转换问题,更易维护:

  1. 新建视图模型
public class ActivityRecordEditViewModel
{
    public int ActivityRecordId { get; set; }
    [Required]
    public string ActivityName { get; set; }
    [Required]
    public int SelectedActivityTypeId { get; set; }
    [Required]
    public int SelectedActivitySubTypeId { get; set; }
    public List<SelectListItem> ActivityTypeOptions { get; set; }
}
  1. 控制器给视图模型赋值
public async Task<IActionResult> Edit(int? id)
{
    if (id == null) return NotFound();
    var activityRecord = await _db.ActivityRecords
        .Include(r => r.ActivitySubType)
        .FirstOrDefaultAsync(r => r.ActivityRecordId == id);
    if (activityRecord == null) return NotFound();

    var vm = new ActivityRecordEditViewModel
    {
        ActivityRecordId = activityRecord.ActivityRecordId,
        ActivityName = activityRecord.ActivityName,
        SelectedActivityTypeId = activityRecord.ActivitySubType.ActivityTypeId,
        SelectedActivitySubTypeId = activityRecord.ActivitySubTypeId,
        ActivityTypeOptions = _db.ActivityTypes
            .Select(a => new SelectListItem
            {
                Text = a.ActivityTypeName,
                Value = a.ActivityTypeId.ToString()
            }).ToList()
    };
    return View(vm);
}
  1. 前端用TagHelper自动绑定选中
<select asp-for="SelectedActivityTypeId" asp-items="Model.ActivityTypeOptions" 
        class="form-control form-control-sm">
    <option value="">Select...</option>
</select>

TagHelper会自动根据asp-for绑定的属性值,匹配asp-items里的选项选中,不需要手动处理selected属性。


额外补充

Edit页记得补充页面加载完成后的级联逻辑:页面加载后先触发ActivityType下拉的change事件,加载对应ActivitySubType选项,再把当前记录的ActivitySubTypeId设为子下拉的选中值,否则子下拉会是空的。

内容的提问来源于stack exchange,提问作者Haminteu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 23:30:02