点击添加行按钮后焦点跳至DropdownList的问题求助

核心原因分析 #

点击添加行按钮时，CausesValidation="true"会触发页面全局验证，而DropDownList绑定了RequiredFieldValidator，验证逻辑会自动将焦点定位到该DropDownList；同时ASP.NET回发后的默认焦点管理机制也会加剧这个偏移问题。

解决方案 #

方案1：关闭添加按钮的验证（优先推荐）

修改添加按钮的CausesValidation属性为false，因为添加行操作不需要验证DropDownList的选择状态，验证应该放在最终表单提交时执行：

<asp:Button ID="ButtonAdd" runat="server" OnClientClick="BtnClick();" CausesValidation="false" Text="Add another row if needed" onclick="ButtonAdd_Click" style="border: 1px solid #6E6E6E;font-family: 'Arial Unicode MS';background-color: #0093B2;color: #FFFFFF;font-size: 12pt;font-style: normal;text-align: center;padding-right: 10px;padding-left: 10px;" />

同时调整前端验证函数BtnClick()，只验证当前行的输入（而非全局验证），确保用户填写完当前行才能添加新行：

function BtnClick() {
    var isValid = true;
    // 获取表格最后一行的输入控件
    var lastRow = document.querySelector('#Gridview1 tr:last-child');
    var nameInput = lastRow.querySelector('[id*="txtname"]');
    var addressInput = lastRow.querySelector('[id*="txtaddress"]');
    
    // 验证Name输入
    if (!nameInput.value.trim()) {
        nameInput.style.borderColor = 'red';
        isValid = false;
    } else {
        nameInput.style.borderColor = '';
    }
    // 验证Address输入
    if (!addressInput.value.trim()) {
        addressInput.style.borderColor = 'red';
        isValid = false;
    } else {
        addressInput.style.borderColor = '';
    }
    
    if (!isValid) {
        alert('Please complete first row before adding a new row!');
    }
    return isValid;
}

方案2：回发后手动设置焦点到新行

如果必须保留全局验证，在后台AddNewRowToGrid方法末尾，注册脚本将焦点定位到新添加行的第一个输入框：

Private Sub AddNewRowToGrid()
    ' 原有代码逻辑...
    
    SetPreviousData()
    
    ' 注册焦点设置脚本，定位到新行的Name输入框
    If Gridview1.Rows.Count > 0 Then
        Dim newRow = Gridview1.Rows(Gridview1.Rows.Count - 1)
        Dim txtName = DirectCast(newRow.FindControl("txtname"), TextBox)
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "SetFocus", $"document.getElementById('{txtName.ClientID}').focus();", True)
    End If
End Sub

方案3：给验证规则分组（可选）

如果需要保留添加按钮的全局验证，但不想触发DropDownList的验证，可以给RequiredFieldValidator添加ValidationGroup，仅在最终提交表单时触发：

<asp:RequiredFieldValidator ID="rfvDDL" runat="server"
    ControlToValidate="ddlChoice"
    Display="Dynamic"
    ErrorMessage="Please make your selection."
    InitialValue=""
    ForeColor="Red"
    ValidationGroup="SubmitGroup">
</asp:RequiredFieldValidator>

然后给页面的最终提交按钮设置ValidationGroup="SubmitGroup"，添加按钮不设置该属性，这样添加行时不会验证DropDownList。

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