Put focus back on a gridview's selected row after postback

问题

Is it possible to put focus back on a gridview row after that a selection of the row generates a postback?

I'm trying to add an onkeydown handler on the gridview rows in order to use the keyboard for navigation. My problem, I believe, is that after the first postback, the selected cell loses focus, and so the next key stroke is not caught by the cell.

I have the following code

The grid view

    <asp:GridView runat="server" ID="gdvPersons" AutoGenerateColumns="false" 
        onrowcreated="gdvPersons_RowCreated" onselectedindexchanged="gdvPersons_SelectedIndexChanged">
        <Columns>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <%# ((GridviewFocus.Person) Container.DataItem).Name %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Age">
                <ItemTemplate>
                    <%# ((GridviewFocus.Person) Container.DataItem).Age %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

The Code behind

    protected void Page_Load(object sender, EventArgs e)
    {
        var persons = new List<Person> {new Person() {Name = "Fikre", Age = 24}, 
                                        new Person() {Name = "Mike", Age = 29},
                                        new Person() {Name = "Mark", Age = 35}};
        gdvPersons.DataSource = persons;
        gdvPersons.DataBind();
    }

    protected void gdvPersons_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
            e.Row.Attributes.Add("onkeydown", ClientScript.GetPostBackEventReference((Control)sender, "Select$" + e.Row.DataItemIndex));
    }

    protected void gdvPersons_SelectedIndexChanged(object sender, EventArgs e)
    {
        gdvPersons.SelectedRow.Focus();
    }

回答1:

On your onkeydown script code copy the id of the cell to a hidden input field.

<input type="text" id="gridviewcell_id" onkeydown="lastcell.value = this.id" />
<input type="hidden" id="lastcell" runat="server" />

the example above is plain html, and you would have to add the proper onkeydown code to your gridview.

In your postback (for example onclick) event handler code you can retrieve the id from the hidden fields value property and register javascript to execute once the page is refreshed. If you have a button which is clicked which performs the postback you could do something like this:

protected void MyButton_Click(object sender, EventArgs e)
{
   string id = lastcell.Value;
   string script = "var ctrl = document.getElementById('" + lastcell.Value + "');";
   script += "ctrl.focus();";
   ClientScript.RegisterClientScriptBlock(this.GetType(), 
       "focusScript", script, true);

}

This should make your page execute the following script once it's loaded, and the control should retrive focus:

var ctrl = document.getElementById("yourid"); 
ctrl.focus();

回答2:

Add MaintainScrollPositionOnPostBack="true" in the @Page directive in your .aspx file or add it to system.web/pages section in web.config

<system.web>
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" maintainScrollPositionOnPostBack="true"/>
</system.web>

This works also when navigating to previous page with large table e.g.

When Web pages are posted back to the server, the user is returned to the top of the page. On long Web pages, this means that the user has to scroll the page back to the last position on the page.

Documentation

来源：https://stackoverflow.com/questions/3181540/put-focus-back-on-a-gridviews-selected-row-after-postback

标签

ASP.NET

gridview