How do I cancel the page refresh caused by Page.ClientScript.GetPostBackClientHyperlink?

Question

r.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink((Control)this.gridView, "Select$" + r.RowIndex);

Hi, I use the above code to catch a click event on a row in a GridView in Asp.net.. This code works and I'm able to catch the newly selected row in OnSelectdIndexChanged, but the postback also causes a full page refresh.

Is there any way to cancel the page refresh but still change the selected row without adding the 'select' button?

What do you want to do with the "newly selected row"? If you need something done in code behind you will need a postback. If so you could use an [UpdatePanel](https://msdn.microsoft.com/en-us/library/bb399001.aspx). If you need to do something in front end only you should take another approach. — VDWWD, Oct 11 '16 at 12:17
I simply need to know which index was clicked so I can go to a detail page of the selected item, if the page refreshes it does a couple api calls which slow down the speed of the site, I will have a look at the Update panel, thanks — Litrico, Oct 12 '16 at 09:04

AT-2017 · Answer 1 · 2016-10-11T12:33:01.400

You will need the RowCreated event in the GridView to do so. See the sample below:

protected void GridView1_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) {
        e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
        e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
        e.Row.ToolTip = "Click to select row";
        e.Row.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);
    }
}

You can see this link for more on selecting rows without select button - How to implement full row selecting in GridView without select button?

To prevent the PostBack, I would recommend to use UpdatePanel that I commented earlier and then deleted. Here is a sample to put the GridView inside UpdatePanel:

<asp:ScriptManager ID=" ScriptManager1" runat="server"/>
   <asp:UpdatePanel ID=" UpdatePanel1" runat="server">
      <ContentTemplate>
           <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
           </asp:GridView>
      </ContentTemplate>
   </asp:UpdatePanel>

It's a bit of code. So I am sharing a link in the comment section. Please check.

Thanks for your answer, but this is what I'm doing. The post back causes the page to refresh, but I want to cancel that refresh, or just make sure it doesn't happen somehow — Litrico, Oct 11 '16 at 09:02
Never mind for the late reply. I was thinking of UpdatePanel. Please see this link - http://csharpdotnetfreak.blogspot.com/2012/08/select-gridview-row-onclick-of-cell-javascript.html?m=1 Let me know. — AT-2017, Oct 11 '16 at 12:35
Hi, I implemented the UpdatePanel with ContentTemplate, but it still refreshes the current page, which executes my api calls again... — Litrico, Oct 17 '16 at 15:31

score 1 · Accepted Answer · answered Oct 12 '16 at 09:55

You can use the OnRowDataBound event to add attributes to the GridView.

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //add the current row number
            e.Row.Attributes.Add("rowNumber", e.Row.RowIndex.ToString());

            //add an item from the database
            e.Row.Attributes.Add("itemID", DataBinder.Eval(e.Row.DataItem, "database_id").ToString());

            //or add a click directy and redirect with javascript
            e.Row.Attributes.Add("onclick", "location.href='/newPage.aspx?id=" + DataBinder.Eval(e.Row.DataItem, "database_id").ToString() + "'");
        }
    }

If you are not using the 3rd attribute in my snippet you need to handle the row click clientside. You can do that with jQuery.

    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%= GridView1.ClientID %> tr").click(function () {
                var rowNumber = $(this).attr("rowNumber");
                var itemID = $(this).attr("itemID");
                alert("This is row number: " + rowNumber + ". It has ID: " + itemID);
            })
        });
    </script>

How do I cancel the page refresh caused by Page.ClientScript.GetPostBackClientHyperlink?

2 Answers2