asp.netlinkbutton

LinkButton does not fire postback


I have a linkbutton that somehow does not give a postback when clicked. Here is the code

<script type="text/javascript">
    $(function () {
        $('#divTabs').tabs({
            show: function () {
                var sel = $('#divTabs').tabs('option', 'selected');
                $('#<%= hfLastTab.ClientID %>').val(sel);
            },
            selected: '<%= hfLastTab.Value %>'
        });
    });
</script>

<div id="divTabs">
    <ul>
        <li runat="server" id="TabBar1" ><asp:LinkButton ID="TabLink1" runat="server" OnClick="TabLink1_Click" >&nbsp;Link1&nbsp;</asp:LinkButton></li>
        <li runat="server" id="TabBar2" ><asp:LinkButton ID="TabLink2" runat="server" OnClick="TabLink2_Click">&nbsp;Link2&nbsp;</asp:LinkButton></li>
        <li runat="server" id="TabBar3" ><asp:LinkButton ID="TabLink3" runat="server" OnClick="TabLink3_Click">&nbsp;Link3&nbsp;</asp:LinkButton></li>
    </ul>
    ....
</div>

And the code behind:

protected void TabLink1_Click(object sender, System.EventArgs e)
{
    SelectTopBar();
    SetSelectTab("TabBar1");
}

protected void TabLink2_Click(object sender, System.EventArgs e)
{
    SelectTopBar();
    SetSelectTab("TabBar2");
}

protected void TabLink3_Click(object sender, System.EventArgs e)
{
    SelectTopBar();
    SetSelectTab("TabBar3");
}

I tried putting the breakpoint in the codebehind and it does not hit. The page is not refreshed as well. If I use <asp:Button>, then it will do the submit and everything seems to be fine. I also tried to see whether there are more than one <form> tags, but there is not. I also make sure that in the aspx page, those click event are tied.

[EDIT]: The link button is located inside a jquery tab. So instead of using the ordinary <a href... as in the jquery example which does not do any postback, I used asp linkbutton and want the postback.

Any idea?


Solution

  • Found some workaround. I defined another linkbutton outside the <div id="divTabs">, and the linkbutton inside <div id="divTabs"> will call the outer linkbutton. So the code becomes like

    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="TabLink1_Click" ></asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="TabLink2_Click" ></asp:LinkButton>
    <asp:LinkButton ID="LinkButton3" runat="server" OnClick="TabLink3_Click" ></asp:LinkButton>
    
    <div id="divTabs">
        <ul>
            <li runat="server" id="TabBar1" ><asp:LinkButton ID="TabLink1" runat="server">&nbsp;Link1&nbsp;</asp:LinkButton></li>
            <li runat="server" id="TabBar2" ><asp:LinkButton ID="TabLink2" runat="server">&nbsp;Link2&nbsp;</asp:LinkButton></li>
            <li runat="server" id="TabBar3" ><asp:LinkButton ID="TabLink3" runat="server">&nbsp;Link3&nbsp;</asp:LinkButton></li>
        </ul>
        ....
    </div>
    

    In the code behind, inside the Page_Load function

    TabLink1.OnClientClick = "document.getElementById('" + LinkButton1.ClientID + "').click();";
    TabLink2.OnClientClick = "document.getElementById('" + LinkButton2.ClientID + "').click();";
    TabLink3.OnClientClick = "document.getElementById('" + LinkButton3.ClientID + "').click();";
    

    I'm guessing the jQuery library might have some impact such that the link does not call a postback, so I'm using the workaround above.