如何使.cshtml中两个HtmlHelper控件及关联文本在同一行显示？

首先直接给结论：要实现这两个需求（同一行显示 + 单选按钮控制下拉框启用/禁用），仅靠Razor、原生HTML/视图是不够的，需要结合CSS调整布局，再用JavaScript（比如jQuery）实现交互逻辑。下面分两部分详细拆解：

1. 让元素同一行显示（CSS调整） #

默认情况下，RadioButtonFor生成的<input>、DropDownListFor生成的<select>，加上文本标签，会因为默认的块级属性、边距规则导致换行。你可以通过微调HTML结构+CSS来让它们横向排列：

优化后的Razor代码（调整结构） #

<div class="row form-group col-lg-12 d-flex align-items-center">
    @Html.RadioButtonFor(m => m.ScheduleType, "Monthly", new { id = "monthlyRadio" })
    <label for="monthlyRadio" class="mb-0 me-2">On the</label>
    @Html.DropDownListFor(model => model.DayOfMonth, Model.DayOfMonthList, new { @class = "form-control select2 w-auto", id = "dayOfMonthDropdown" })
    <label class="mb-0 ms-2">of the month</label>
</div>

无Bootstrap时的自定义CSS #

如果你的项目没用到Bootstrap框架，需要自己写几行CSS来控制布局：

/* 让容器变成弹性布局，元素横向排列并垂直居中 */
.form-group.col-lg-12 {
    display: flex;
    align-items: center;
    gap: 8px; /* 给元素之间添加合适间距 */
}
/* 让下拉框宽度自适应内容，避免过度拉伸 */
#dayOfMonthDropdown {
    width: auto;
}
/* 去掉标签默认的上下边距，避免排版错乱 */
.form-group.col-lg-12 label {
    margin: 0;
}

如果用了Bootstrap，上面代码里的d-flex align-items-center mb-0 me-2 ms-2这些内置类已经能搞定布局，不用额外写CSS。

2. 单选按钮控制下拉框启用/禁用（JavaScript/jQuery） #

这部分属于客户端交互逻辑，服务器端的Razor只能生成初始HTML，没法处理用户操作后的动态状态变化，必须用JavaScript实现。这里用jQuery给出示例：

$(document).ready(function() {
    // 页面加载完成后，先根据单选按钮初始状态设置下拉框
    toggleDropdownState();

    // 监听所有ScheduleType单选按钮的切换事件
    $('input[name="ScheduleType"]').on('change', function() {
        toggleDropdownState();
    });

    // 封装状态切换的复用函数
    function toggleDropdownState() {
        const isMonthlySelected = $('#monthlyRadio').is(':checked');
        // 切换下拉框的禁用状态
        $('#dayOfMonthDropdown').prop('disabled', !isMonthlySelected);
        // 如果用了select2插件，同步更新select2的禁用状态
        if ($.fn.select2) {
            $('#dayOfMonthDropdown').select2({ disabled: !isMonthlySelected });
        }
    }
});

补充说明 #

• 如果只是单纯想让元素同一行显示，仅靠CSS配合调整HTML结构就能实现，不需要JavaScript；但要实现单选按钮控制下拉框的启用/禁用，必须用JavaScript，因为这是用户操作后的动态交互，Razor无法处理客户端的实时状态变化。
• 给单选按钮和标签加上对应id和for属性，能让用户点击标签也选中单选按钮，提升交互体验。

内容的提问来源于stack exchange，提问作者Ragmar