Telerik Kendo MVC TabStrip加载局部视图时如何设置元素焦点

针对你遇到的两种局部视图加载场景，分别提供可行的焦点设置方案：

1. Ajax加载方式（.LoadContentFrom("CustomerEdit")） #

由于内容是异步加载的，document.ready或静态tabindex无法生效，需借助TabStrip的激活事件，确保内容加载完成后再设置焦点：

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    // 通过标签文本或自定义属性判断目标标签页
    var isTargetTab = $(e.item).find(">.k-link").text() === "客户编辑";
    if (isTargetTab) {
      // 短延迟确保异步内容渲染完成
      setTimeout(function() {
        $("#firstTextBox").focus();
      }, 100);
    }
  }
});

也可以直接在局部视图末尾嵌入脚本，加载完成后自动触发焦点：

<!-- CustomerEdit局部视图末尾添加 -->
<script>
  $("#firstTextBox").focus();
</script>

2. 直接渲染局部视图（.Content(@<text> @Html.Partial("OrdersEdit")</text>)） #

这种场景下局部视图已随主页面渲染，但未激活的标签页内容默认隐藏，document.ready时元素不可见，焦点设置无效。同样通过TabStrip的激活事件处理：

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    // 给标签项添加自定义属性（如data-tab="orders"）来判断
    var isOrdersTab = $(e.item).data("tab") === "orders";
    if (isOrdersTab) {
      $("#firstTextBox").focus();
    }
  }
});

对应的标签项配置（Razor代码）：

.Items(items => {
  items.Add().Text("订单编辑")
    .HtmlAttributes(new { data_tab = "orders" })
    .Content(@<text>@Html.Partial("OrdersEdit")</text>);
})

关键注意事项 #

• 避免依赖tabindex：隐藏元素的tabindex不生效，且TabStrip自身标签会抢占焦点优先级
• 确保元素ID唯一：多个局部视图不要使用相同ID，否则会选择到错误元素

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