[英]auto scroll to dynamically generated control in ASP.NET
So I have an button that generates a control when clicked. 因此,我有一个单击该按钮时会生成控件的按钮。 It's nested inside an update panel inside a div, that will create a scroll bar when it overflows in the y-direction. 它嵌套在div内的更新面板中,当它在y方向上溢出时会创建一个滚动条。 Currently, when I click the button and it's already overflowing, the control will be created, though it will not scroll to it. 当前,当我单击按钮并且它已经溢出时,将创建该控件,尽管它不会滚动到该控件。 So it seems like nothing happened at all. 因此,似乎什么都没有发生。 I want the scroll bar to roll down to where the control is created so it is more user-friendly. 我希望滚动条向下滚动到创建控件的位置,以便更加用户友好。
I've tried Page.SetFocus(control) and control.Focus(), but both don't work. 我已经尝试过Page.SetFocus(control)和control.Focus(),但是两者都不起作用。 I've look up other posts but they don't quite solve the problem as my generated control is inside an updatePanel. 我查找了其他帖子,但由于我生成的控件位于updatePanel内部,因此它们并不能完全解决问题。
<!-- add button and dynamic control area -->
<asp:Button ID="addStreamButton" runat="server" Text="+" OnClick="AddStreamButton_Click" Width="30px" Height="30px" Tooltip="add new stream"/>
<div class="col-sm-6">
<asp:UpdatePanel runat="server" ID="updatePanelPlaceholder" ChildrenAsTriggers="false" UpdateMode="Conditional"
style="width:650px; height:550px; overflow-y:auto; overflow-x:hidden">
<ContentTemplate>
<div class="row">
<asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addStreamButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<script type="text/html">
function scrollToControl(controlName) {
document.getElementById(controlName).scrollIntoView();
}
</script>
</div>
protected void AddStreamButton_Click(object sender, EventArgs e)
{
var userControl = (DataStreamSelector)Page.LoadControl("~/DataStreamSelector.ascx");
userControl.ID = "DynamicControl" + ControlCount;
ControlCount++;
ph1.Controls.Add(userControl);
//Page.Focus(userControl);
Page.SetFocus(userControl);
}
You need to call it on the client side. 您需要在客户端调用它。 Add this AddStreamButton_Click instead of the focus code: 添加此AddStreamButton_Click而不是焦点代码:
ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>scrollToControl('" + userControl.ID.ToString() + "');</script>", false);
That will call your scrollToControl method you already have defined. 这将调用您已经定义的scrollToControl方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.