如何区分MVC框架下Kendo/Telerik TabStrip选中标签页的输入值

Kendo TabStrip 仅会将非激活标签的内容设置为 display: none 隐藏，不会禁用内部的表单元素，因此表单提交时会将两个标签内的所有表单参数都发送到后端。你原有代码中下拉框的name属性为DeliveryAddress，和后端模型绑定的字段名完全匹配，而手动输入框的name被修改为了DeliveryAddressText，所以后端默认只会取到下拉框的值，和当前激活的标签无关。

提供两种实现方式，你可以根据自己的业务场景选择： #

方案1：前端提交前处理（无需修改后端代码，适配现有逻辑） #

在表单提交时动态禁用非激活标签的输入元素，同时将当前激活标签的输入字段调整为和后端匹配的字段名即可，在你的视图末尾添加如下JS代码：

<script>
$(document).ready(function(){
    // 监听表单提交事件
    $("form.form-horizontal").on("submit", function(){
        const tabStrip = $("#tabstrip").data("kendoTabStrip");
        // 获取当前激活标签的索引，0为第一个标签，1为第二个
        const activeIndex = tabStrip.select().index();
        
        // 先禁用所有地址输入项，避免同时提交
        $("select[name='DeliveryAddress']").prop("disabled", true);
        $("input[name='DeliveryAddressText']").prop("disabled", true);
        
        if(activeIndex === 0){
            // 激活的是下拉标签，启用下拉框
            $("select[name='DeliveryAddress']").prop("disabled", false);
        }else{
            // 激活的是手动输入标签，修改输入框name匹配模型字段后启用
            $("input[name='DeliveryAddressText']").attr("name", "DeliveryAddress").prop("disabled", false);
        }
        return true;
    });
});
</script>

方案2：调整模型和后端逻辑（稳定性高，适合后续扩展） #

如果后续可能新增更多地址类型标签，建议调整实现逻辑避免前端临时修改字段的兼容性问题：

1. 首先修改你的视图模型，新增对应字段：

public class YourAddressViewModel
{
    // 下拉框选中的地址
    public string SelectedDeliveryAddress { get; set; }
    // 手动输入的地址
    public string ManualDeliveryAddress { get; set; }
    // 当前激活的标签索引
    public int ActiveTabIndex { get; set; }
    // 其他原有字段保持不变
}

2. 修改视图中两个输入组件的绑定，新增隐藏字段存储激活标签索引：

@Html.HiddenFor(m => m.ActiveTabIndex)
@(Html.Kendo().TabStrip().Name("tabstrip")
    // 新增标签切换事件监听
    .Events(e => e.Select("onTabChange"))
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Tab 0").Selected(true)
        .Content(tab => Html.Kendo().DropDownListFor(m => m.SelectedDeliveryAddress)
            .DataValueField("DeliveryAddress")
            .DataTextField("Name")
            .BindTo((System.Collections.IEnumerable)ViewData["PickupPoints"])
            .AutoWidth(true));
        tabstrip.Add().Text("Tab 1")
        .Content(@<text>
        <div class="form-group">
            <div class="col-md-12">
            @Html.Kendo().TextBoxFor(m => m.ManualDeliveryAddress)
                .Placeholder("Adresse")
            </div>
        </div>
        </text>);
    })
)

3. 新增标签切换的JS逻辑：

<script>
function onTabChange(e) {
    // 更新隐藏字段为当前选中标签的索引
    $("#ActiveTabIndex").val($(e.item).index());
}
</script>

4. 后端控制器接收后判断取值即可：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CheckDistance(YourAddressViewModel model)
{
    // 根据激活标签取对应地址
    string deliveryAddress = model.ActiveTabIndex == 0 
        ? model.SelectedDeliveryAddress 
        : model.ManualDeliveryAddress;
    // 后续原有业务逻辑保持不变
}

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