Repeater控件AutoPostBack后TextBox焦点定位问题求助

我明白你想要打造类似Excel的连续编辑体验——修改完当前行的TextBox并按Tab离开后，自动聚焦到下一行的输入框。结合你现有的代码，咱们可以通过后端注册客户端脚本的方式实现这个需求，毕竟UpdatePanel是局部回发，得确保脚本能在回发完成后正确执行。

步骤1：修改后端Grade_TextChanged方法 #

在原有数据库更新逻辑的基础上，我们需要添加“定位下一行并聚焦”的逻辑：找到当前编辑项的索引，获取下一项TextBox的客户端ID，最后通过ScriptManager注册聚焦脚本。

修改后的后台代码：

Protected Sub Grade_TextChanged(sender As Object, e As EventArgs)
    ' 获取当前编辑的TextBox和所在Repeater项
    Dim ScoreText As TextBox = CType(sender, TextBox)
    Dim item As RepeaterItem = CType(ScoreText.NamingContainer, RepeaterItem)
    Dim currentItemIndex As Integer = item.ItemIndex
    
    ' 原有的数据库更新逻辑保持不变
    Dim ScoreID As Integer = Integer.Parse(TryCast(item.FindControl("HiddenField1"), HiddenField).Value)
    Dim ClassID As Integer = Integer.Parse(TryCast(item.FindControl("HiddenField2"), HiddenField).Value.Trim())
    Dim AssignmentID As String = TryCast(item.FindControl("HiddenField3"), HiddenField).Value.Trim()
    Dim StudentID As String = TryCast(item.FindControl("HiddenField4"), HiddenField).Value.Trim()
    Dim Grade As String = TryCast(item.FindControl("TextBox1"), TextBox).Text
    
    Dim constr As String = ConfigurationManager.ConnectionStrings("AthenaConnectionString").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("Scores_CRUD")
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@Action", "UPDATE")
            cmd.Parameters.AddWithValue("@Score", Grade)
            cmd.Parameters.AddWithValue("@ScoreID", ScoreID)
            cmd.Connection = con
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
    
    Me.BindRepeater()
    
    ' 核心逻辑：聚焦到下一行的TextBox
    If currentItemIndex < GradeEditor.Items.Count - 1 Then
        ' 获取下一行的TextBox控件
        Dim nextItem As RepeaterItem = GradeEditor.Items(currentItemIndex + 1)
        Dim nextTextBox As TextBox = CType(nextItem.FindControl("TextBox1"), TextBox)
        
        ' 注册客户端脚本，确保局部回发后执行聚焦
        If nextTextBox IsNot Nothing Then
            Dim script As String = $"document.getElementById('{nextTextBox.ClientID}').focus();"
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "FocusNextTextBox", script, True)
        End If
    End If
End Sub

步骤2：优化前端TextBox的Tab键逻辑 #

为了让Tab键的行为更符合用户预期，我们可以给Repeater里的TextBox添加动态的TabIndex属性，让Tab键的切换顺序和行顺序一致：

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
             BackColor="Transparent" BorderColor="Transparent" 
             OnTextChanged="Grade_TextChanged" style="text-align: center" 
             Text='<%# Bind("Grade_Code") %>' Width="100%"
             TabIndex='<%# Container.ItemIndex + 1 %>'></asp:TextBox>

实现原理说明 #

• ScriptManager.RegisterStartupScript会在UpdatePanel局部回发完成后，在客户端执行指定的JS代码，确保Repeater重新绑定后DOM已经更新。
• 通过currentItemIndex获取当前编辑行的索引，判断是否还有下一行，避免索引越界。
• 使用nextTextBox.ClientID获取ASP.NET生成的客户端唯一ID，确保JS能准确找到目标控件并调用focus()方法。

注意事项 #

1. 确保BindRepeater()方法能正确重新绑定Repeater数据，否则下一行的控件可能无法被正确定位。
2. 如果当前是最后一行，代码会自动跳过聚焦逻辑，避免出现错误。
3. 局部回发后ViewState会保持，所以Repeater的Items集合是有效的，可以安全访问。

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