Setting the focus in .ascx user controls

Question

I am having some difficulty setting the focus inside an .ascx custom control. Microsoft Copilot advises me to place a txtName.Focus() or Page.SetFocus(txtName) inside the Page_Load event of the .ascx.

I find that this event occurs when the parent page is loaded, not when the .ascx is invoked. My .ascx's are popups that are invisible when the parent page first loads. When the .ascx's are invoked and they become visible, no control on them is selected.

Is there an event that occurs when the .ascx is invoked? How can I set focus on .ascx popups?

In addition to the two methods I listed above, I tried the following client-side javascript:

    // The pageLoad function is part of the ASP.NET AJAX client framework.
    // It runs once on initial page load and after every async postback.
    function pageLoad() {
        var modalPopup = $find("mpeTaskPop");
        if (modalPopup) {
            // Attach the event handler to the 'shown' event
            modalPopup.add_shown(function () {
                // Call your custom function here
                PlaceCursor();
            });
        }
    }

    function PlaceCursor() {
        //Put cursor on Task Name textbox
        var NameText = document.getElementById('<%=txtPopTaskName.ClientID%>');
        NameText.focus();
    }

This worked for one of the four .ascx files, but not for the other three.

Have you used your browser's JavaScript debugger? If not, why not? — Dai
– Dai, Commented Oct 20 at 4:56
Give txtName a unique css class. Then in PlaceCursor you can do something like this: modalPopup.find('.MyClass').first().focus(); — VDWWD
– VDWWD, Commented Oct 20 at 9:54
Popups are RARE triggered with a post-back. And, there is probably a 1000 different popups available in web land, so what popup code/library are you using ? (I use jQuery.UI dialog boxes). Some trigger MUST be occurring to display that popup, and you don't share when/how the popup is triggered. Almost for sure page load event is NOT the event you want, since those controls are hidden, and worse, in near ALL cases no post back occurs to pop the dialog (it will be client side code). So, what library code or JavaScript are you using to trigger/display the popup? That's when you need setFocus(). — Albert D. Kallal
– Albert D. Kallal, Commented Oct 20 at 15:03
In other words, when/how/where do you set the area on the page to visible=true? — Albert D. Kallal
– Albert D. Kallal, Commented Oct 20 at 15:05
See my answer below - you probably have to expose a "focus" method of the user control if you want to do a set focus from code behind on the aspx page that hosts the user control. — Albert D. Kallal
– Albert D. Kallal, Commented Oct 20 at 23:30

Albert D. Kallal · Accepted Answer · 2025-10-26 22:23:40Z

Well, first up, you not shared what library or system you are using to popup the ascx control. This information is required, since there are boatloads of dialog systems.

There are Bootstrap dialogs.
There are jQuery.UI dialogs.
There are dialogs from the Ajax toolkit.

There are ones from sweet alert, and many more choices you have.

And, since they all work somewhat differently, then we are faced with making a wild guess here as to how you creating and launching these dialogs.

I should also point out, that in the vast majority of cases, such dialogs don't require (or cause) a page post-back, so once again, using the page load event, or the load even of the user control will not be of much use. Keep in mind that a user (ascx) control markup is rendered as part of the whole page, so setting focus in a user control is the SAME as setting focus to any other control on the given page - including controls not part of the user control. In other words, you can have "two" active controls with a set focus on that given page.

So, such dialogs don't out of the blue just "pop up" on the page. Some user action must be occurring to trigger the dialog. It is at THAT point in time (when the dialog is launched), that setting focus would make the most sense.

Let's do an example with a jQuery.UI dialog, and say some user control.

And most dialog libraries tend to work with placing a div on the page, and the content is then placed inside of that div. This common approach also includes a div in which you drop/place a user control.

So, here's a jQuery.UI example:

We will popup a user (ascx) control that allows one to edit a hotel.

We have this simple GridView of hotels, and an edit button.

            <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="ID" CssClass="table table-hover" 
                >
                <Columns>
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                    <asp:BoundField DataField="LastName" HeaderText="LastName"    />
                    <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
                    <asp:BoundField DataField="Description" HeaderText="Description"  />
                    <asp:TemplateField HeaderText="Edit">
                        <ItemTemplate>
                            <asp:Button ID="cmdEdit" runat="server" 
                                Text="Edit" CssClass="myshadow" OnClick="cmdEdit_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            </div>
            <br />


            <div id="myeditarea" style="display:none">

                <uc1:MyEditHotelC runat="server" ID="MyEditHotelC" />

            </div>



        <script>
            function PopEdit(cID,cFocus) {
                // cID = id of control clicked on page
                // we use cID to position the popup dialog relative to the GV edit button clicked
                // cFocus - this is the id of the control in the popup we want to set focus to
                var btn = $('#' + cID)
                var myDialog = $("#myeditarea");

                myDialog.dialog({
                    title: "Edit Hotel Information",
                    width: 860,
                    dialogClass: "dialogWithDropShadow",
                    position: { my: "right top", at: "right-100 bottom", of: btn },
                    open: function () {
                        $('#' + cFocus).focus()
                    }
                });
            }

Note the above "div" with our user control.

When user clicks on a given row, a post-back does occur.

We get the PK id of the database row, and then call our pop edit (client-side code).

So, code behind is thus this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then
            LoadGrid
        End If

    End Sub

    Sub LoadGrid()

        Dim strSQL As String =
            "SELECT * FROM tblHotels
            WHERE Description is not null
            ORDER BY HotelName"

        GHotels.DataSource = MyRst(strSQL)
        GHotels.DataBind()

    End Sub



    Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

        Dim btn As Button = sender
        Dim gRow As GridViewRow = btn.NamingContainer
        Dim pkID = GHotels.DataKeys(gRow.RowIndex).Item("ID")


        MyEditHotelC.MyPk = pkID

        ' lets call the js routine to pop our hidden edit div
        Dim strJava As String = $"PopEdit('{btn.ClientID}','{MyEditHotelC.txtHotelBoxID}')"

        ClientScript.RegisterStartupScript(Page.GetType(), "PopEditKey", strJava, True)

    End Sub

Note very closely: we inject a script call - this code will run after the page is sent client side, renders, and then our popup (client side) routine is called.

Note how we popup the dialog, but we used the "open" event of the jQuery.UI dialog control.

While most dialog popup library controls do not require a post-back to trigger (they tend to be run + triggered client side), as above shows, even when we use a post-back, and code behind to trigger the popup, we near always require client-side code to pop the dialog, and ALSO set the focus to the control in that dialog (popup).

The end result thus looks like this:

So, at this point in time, you don't show how (or when) you are triggering the popup. However, if you are as per above triggering the popup with server-side code, then in most cases, you have to adopt client-side code to set the focus. However, it may well be possible if your server-side code does not inject script, and only is to "display" the popup dialog, then the code behind (server side) should be able to set the focus to the given control. Due to being a user control, then you may well have to expose a public method of the user control that does the set focus, and thus you can have some public function called MySetFocus in the user control, and then on the hosting page (that contains the UC), then you can do this:

' this is server side code
' server side code to show the div
MyUserControl.SetHotelTextBoxFocus()

So, in the user control, you need a public method (Sub) say like this:

    Public Sub SetHotelTextBoxFocus()

        Me.txtHotel.Focus()

    End Sub

So, keep in mind that the "load" event for each and every user control fires each and every time there is a page post-back. So, it stands to reason to have some kind of control as to "when" you want to set the focus?

You want to add a public method (sub) to the user control, and then use that "custom" setfocus method when your code behind (on the main host page) runs to display the dialog. As noted, if your using 100% client side code to pop the dialog (as often is the case), then the first example, and using jQuery to set the focus is the approach I recommend.

So, you can't really use page load event, since it fires each and every time for each user control on any main page post-back. With a public Sub of the user control exposed, then your code behind at your time of choosing can thus set focus to a given control inside of the user control.

I should also point out, that in the above example, I'm using jQuery and jQuery.UI (dialogs). Turns out, the jQuery dialog by default selects the first control in the dialog automatic for you.

So, as noted, page load (on the main page, or for the user control) is not really a good choice, since page load fires each and every time there is a post back (round trip to the server). And both the main page load event, and all of the user controls page load event ALSO fires when inside of a update panel. So, keep in mind that update panels do not prevent a post back, but simply "hides" that the browser page is in fact doing a page post back (update panels thus post back - and they are thus called "partial page post backs". Since page load fires over and over, then as noted, it becomes rather difficult to use the page load event to set the control focus, especially since most of the time, your user controls are not even visible on the page (and you can't set focus to more then one control on the page, and you can't set focus when such controls are not visible either).

As noted, you not really shared how you triggering the "visible" of those popups, but at end of day? You want to set the focus when the popup is triggered, and page load event thus not really going to work well, if at all.

Last but not least?

I don't suggest "rolling" your own popup and dialog system, since there are so many high quality choices for custom dialogs, and they all tend to work far better then cooking up your own solution. Given this is vb.net, then I suggest using jQuery.UI (dialogs) as per above example, or even consider the AjaxToolKit one if you already using the AjaxToolKit library.

So, you might want to share how/when you trigger the dialog(s) you have, but in near all cases, the set focus will have to occur at trigger/popup time, and not using page load event.

And note how little effort and code was required for the above working example (this again suggests using a pre-built dialog library, since they not only save you development time, but the results tend to also look better). In fact, I added the popup scripts to the user control, and thus even less code and clutter exists on the page that hosts the user control.

Collectives™ on Stack Overflow

Setting the focus in .ascx user controls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related