Repeater Autopostback 文本框焦点位置问题
Repeater Autopostback Textbox Focus Position issue
我有一个转发器控件,它在 UpdatePanel 中包含一个文本框,以及其他控件。转发器从 SQL 数据库中获取数据,当用户对此特定文本框进行更改时,当用户 "tabs out" 文本框时会触发 OnTextChange 事件.此事件触发存储过程代码以使用文本框中的新值更新数据库。我想实现的功能是当用户跳出文本框时,中继器行中的下一个文本框应该集中在 [=18 之后的连续编辑(类似于 excel 电子表格) =]AutoPostBack 来自 OnTextChange 事件被触发。谁能举个例子说明如何使用我在下面提供的代码来做到这一点?提前致谢!
表单标记:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Repeater ID="GradeEditor" runat="server">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">
<table style="width:100%;">
<tr>
<td>
<asp:Label ID="LateLabel" runat="server" CssClass="label label-success" Visible="False"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<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%"></asp:TextBox>
</td>
</tr>
</table>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("ID") %>' Visible="False"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("ID") %>' />
<asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Bind("Class_ID") %>' />
<asp:HiddenField ID="HiddenField3" runat="server" Value='<%# Bind("Assignment_ID") %>' />
<asp:HiddenField ID="HiddenField4" runat="server" Value='<%# Bind("Student_ID") %>' />
<asp:HiddenField ID="HiddenField5" runat="server" Value='<%# Bind("Exempt") %>' />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
更新隐藏代码:
Protected Sub Grade_TextChanged(sender As Object, e As EventArgs)
'Find the reference of the Repeater Item.
Dim ScoreText As TextBox = CType(sender, TextBox)
Dim item As RepeaterItem = CType(ScoreText.NamingContainer, RepeaterItem)
Dim ScoreID As Integer = Integer.Parse(TryCast(item.FindControl("HiddenField1"), HiddenField).Value)
Dim ClassID As Integer = 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()
End Sub
您的 UpdatePanel 标记存在问题。 UpdatePanel 的 ContentTemplate 中应该有 Repeater 控件,如下面的标记所示。
将您的代码更改为如下所示。
正确标记
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Repeater ID="GradeEditor" runat="server">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">
<table style="width:100%;">
<tr>
<td>
<asp:Label ID="LateLabel" runat="server" CssClass="label label-success" Visible="False"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<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%"></asp:TextBox>
</td>
</tr>
</table>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("ID") %>' Visible="False"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("ID") %>' />
<asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Bind("Class_ID") %>' />
<asp:HiddenField ID="HiddenField3" runat="server" Value='<%# Bind("Assignment_ID") %>' />
<asp:HiddenField ID="HiddenField4" runat="server" Value='<%# Bind("Student_ID") %>' />
<asp:HiddenField ID="HiddenField5" runat="server" Value='<%# Bind("Exempt") %>' />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
然后,您需要发出 JavaScript 以从 Repeater 中文本框的文本更改事件中聚焦下一个文本框。这可以使用 C# 代码完成,如下所示。
文本更改事件用于聚焦下一个框的 C# 代码
protected void Grade_TextChanged(object sender, EventArgs e) {
//PUT your original code for calling stored procedure here
TextBox textBox = sender as TextBox;
BindRepeater();
RepeaterItem currentRepeaterItem = (RepeaterItem)(textBox.NamingContainer);
int currentRepeaterItemIndex = currentRepeaterItem.ItemIndex;
RepeaterItem nextRepeaterItem = null;
//get the next item row of Repeater
if ((rptCustomers.Items.Count - 1) >= (currentRepeaterItemIndex + 1)) {
nextRepeaterItem = GradeEditor.Items[currentRepeaterItemIndex + 1];
}
if (nextRepeaterItem != null) {
//get the textbox in next row of Repeater
TextBox nextTextBox = nextRepeaterItem.FindControl("TextBox1") as TextBox;
//emit JavasSript to focus the next textbox
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusnext", String.Format(" var nextTextBox = document.getElementById('{0}'); nextTextBox.focus(); nextTextBox.select();", nextTextBox.ClientID), true);
}
}
我有一个转发器控件,它在 UpdatePanel 中包含一个文本框,以及其他控件。转发器从 SQL 数据库中获取数据,当用户对此特定文本框进行更改时,当用户 "tabs out" 文本框时会触发 OnTextChange 事件.此事件触发存储过程代码以使用文本框中的新值更新数据库。我想实现的功能是当用户跳出文本框时,中继器行中的下一个文本框应该集中在 [=18 之后的连续编辑(类似于 excel 电子表格) =]AutoPostBack 来自 OnTextChange 事件被触发。谁能举个例子说明如何使用我在下面提供的代码来做到这一点?提前致谢!
表单标记:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Repeater ID="GradeEditor" runat="server">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">
<table style="width:100%;">
<tr>
<td>
<asp:Label ID="LateLabel" runat="server" CssClass="label label-success" Visible="False"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<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%"></asp:TextBox>
</td>
</tr>
</table>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("ID") %>' Visible="False"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("ID") %>' />
<asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Bind("Class_ID") %>' />
<asp:HiddenField ID="HiddenField3" runat="server" Value='<%# Bind("Assignment_ID") %>' />
<asp:HiddenField ID="HiddenField4" runat="server" Value='<%# Bind("Student_ID") %>' />
<asp:HiddenField ID="HiddenField5" runat="server" Value='<%# Bind("Exempt") %>' />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
更新隐藏代码:
Protected Sub Grade_TextChanged(sender As Object, e As EventArgs)
'Find the reference of the Repeater Item.
Dim ScoreText As TextBox = CType(sender, TextBox)
Dim item As RepeaterItem = CType(ScoreText.NamingContainer, RepeaterItem)
Dim ScoreID As Integer = Integer.Parse(TryCast(item.FindControl("HiddenField1"), HiddenField).Value)
Dim ClassID As Integer = 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()
End Sub
您的 UpdatePanel 标记存在问题。 UpdatePanel 的 ContentTemplate 中应该有 Repeater 控件,如下面的标记所示。
将您的代码更改为如下所示。
正确标记
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Repeater ID="GradeEditor" runat="server">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">
<table style="width:100%;">
<tr>
<td>
<asp:Label ID="LateLabel" runat="server" CssClass="label label-success" Visible="False"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<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%"></asp:TextBox>
</td>
</tr>
</table>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("ID") %>' Visible="False"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("ID") %>' />
<asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Bind("Class_ID") %>' />
<asp:HiddenField ID="HiddenField3" runat="server" Value='<%# Bind("Assignment_ID") %>' />
<asp:HiddenField ID="HiddenField4" runat="server" Value='<%# Bind("Student_ID") %>' />
<asp:HiddenField ID="HiddenField5" runat="server" Value='<%# Bind("Exempt") %>' />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
然后,您需要发出 JavaScript 以从 Repeater 中文本框的文本更改事件中聚焦下一个文本框。这可以使用 C# 代码完成,如下所示。
文本更改事件用于聚焦下一个框的 C# 代码
protected void Grade_TextChanged(object sender, EventArgs e) {
//PUT your original code for calling stored procedure here
TextBox textBox = sender as TextBox;
BindRepeater();
RepeaterItem currentRepeaterItem = (RepeaterItem)(textBox.NamingContainer);
int currentRepeaterItemIndex = currentRepeaterItem.ItemIndex;
RepeaterItem nextRepeaterItem = null;
//get the next item row of Repeater
if ((rptCustomers.Items.Count - 1) >= (currentRepeaterItemIndex + 1)) {
nextRepeaterItem = GradeEditor.Items[currentRepeaterItemIndex + 1];
}
if (nextRepeaterItem != null) {
//get the textbox in next row of Repeater
TextBox nextTextBox = nextRepeaterItem.FindControl("TextBox1") as TextBox;
//emit JavasSript to focus the next textbox
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusnext", String.Format(" var nextTextBox = document.getElementById('{0}'); nextTextBox.focus(); nextTextBox.select();", nextTextBox.ClientID), true);
}
}