How to fire Onclick event from LinkButton in Gridview resides in updatePanel?

Question

I know this might be asked before. My gridview rows are changed according to search filter which fetches data from Database. But when I click on Link button to view data only Onclientclick is fired and onclick is not firing.

Here's my code :

<form id="form1" runat="server">
      <asp:HiddenField runat="server" ID="Hf" />
      <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>  
     <label>  Show  <asp:DropDownList runat="server" CssClass="custom-select custom-select-sm form-control form-control-sm"
    ID="RecordSize" AutoPostBack="true" Style="width: 51.75px; height: 30.75px;">
    <asp:ListItem Value="10" Selected="True">10</asp:ListItem>
    <asp:ListItem Value="25">25</asp:ListItem>
    <asp:ListItem Value="50">50</asp:ListItem>    
      </asp:DropDownList>  entries</label> <asp:Label Style="margin-left: 10px;" runat="server" ID="lblerror" ForeColor="Red"></asp:Label>
    <div id="m_table_1_filter" class="dataTables_filter">
     <label>Search:</label>
     <asp:TextBox runat="server" ID="txtSearch" type="search" autocomplete="off"
      AutoPostBack="true" MaxLength="20" CssClass="form-control form-control-sm" OnTextChanged="txtSearch_TextChanged" Style="margin-top: -30px; margin-left: 65px; width: 250px;"></asp:TextBox> 
    </div>

     <div class="row" style="display: block;">
      <asp:GridView OnPageIndexChanging="MandateGrid_PageIndexChanging" runat="server"
    ID="MandateGrid" AutoGenerateColumns="false" OnRowDataBound="MandateGrid_RowDataBound"
    PageSize="5" Style="text-align: center;" AllowPaging="true" AllowSorting="true"
    CssClass="table table-striped- table-bordered table-hover table-checkable dataTable no-footer">
    <PagerSettings FirstPageText="<<" LastPageText=">>" Mode="NumericFirstLast" />
    <Columns>
     <asp:TemplateField HeaderText="ID" Visible="false">
      <ItemTemplate>
    <asp:Label ID="LabelID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Mandate Status">
      <ItemTemplate>
    <asp:LinkButton CommandArgument="Select" CommandName="Select" ID="btnView" runat="server" Text="View"
    CssClass="btn m-btn--square" OnClientClick="changeAnchor();" OnClick="btnView_Click" ></asp:LinkButton>
      </ItemTemplate>
     </asp:TemplateField> 
      </asp:GridView>
     </div>

    </ContentTemplate>
      </asp:UpdatePanel>
     </form>

This is my javascript function, I'm using it just to retrive current column index which I will need in my method. :

function changeAnchor() {            
            $(function () {
                $("[id*=MandateGrid]").find("[id*=btnView]").click(function () {                    
                    var row = $(this).closest("tr");                   
                    var message = "Row Index: " + (row[0].rowIndex - 1);
                    $("#Hf").val(row[0].rowIndex - 1);                    
                    //alert(message);
                    return false;
                });
            });
}

Here's my onclick event :-

protected void btnView_Click(object sender, EventArgs e)
    {      
        lblerror.Text = "Event Fired";
    }

Please let me know if I have to add any other code to this question.

Answer 1

your setup is such that the clientClick handler registers a clickhandler, that clickhandler seems unnecessary for what you appear to be trying to do. (set a hidden field so you can figure out which row was targeted on postback).

Since events are handled after restoring the pages' state, you could just use sender in btnView_Click to determine the row on the serverside without resorting to javascript here.

try casting sender to Button and see the wealth of available information in the debugger after removing the OnClientClick handler altogether.

More directly, your changeAnchor function does not return a function, it registers a function to be ran whenever jquery is ready. that in turn registers a clickHandler on then present html elements that happen to match the button. you shouldn't be doing this, you end up probably registering the same handler for all buttons, every time a button is rendered. The eventual click handler also returns false, which cancels the postback.