Hyperlink or button does not fire inside repeater item template

Question

I have a repeater and inside item template I have a button and an anchor.

<asp:Repeater runat="server" ID="rptCategoryList" OnItemDataBound="rptCategoryList_ItemDataBound">
    <ItemTemplate>
        ....
        <div style="margin-left: 81.6%;">
            <span runat="server" id="spnRegister" clientidmode="static" class="register pull-right">
                <button class="btn btn-info btn-lg" style="float: ; margin-right: 40px; margin-top: -150px; background-color: #3697EA">
                    <a href="register.aspx" style="color: white;" target="_self">Register</a>
                </button>
            </span>
        </div>
        ....
    </ItemTemplate>

when this button is clicked it reloads the same page rather going to register.aspx. I used "view page source" and href is set correctly.

I removed the anchore and added a class to button and used jQuery:

        <button class="btn btn-info btn-lg registerSilver" style="float: ; margin-right: 40px; margin-top: -150px; background-color: #3697EA">
            Register
        </button>

$(function () {
    $('.registerSilver').click(function () {debugger
        window.location = 'register.aspx';
    });
});

still not working, keeps reloading the same page.

I even tried to add runat="server" to the hyperlink and set its href in repeater's itemdatabound, no luck.

What am I missing here?

Sounds like your button is set to submit which causing postback instead of redirection. Try adding type="button" attribute e.g. <button type="button" ...><a href="register.aspx" ...>Link Text</a></button>. — Tetsuya Yamamoto

Tetsuya Yamamoto Tetsuya Yamamoto · Accepted Answer · 2018-10-04T01:04:33

The default behavior of <button> tag triggers form submit (i.e. <form runat="server"> in ASPX page), which probably causing postback to same page instead of redirecting to page URL specified in anchor link. Try setting type="button" attribute explicitly like example below:

<button type="button" class="btn btn-info btn-lg" style="float: ; margin-right: 40px; margin-top: -150px; background-color: #3697EA">
    <a href="register.aspx" style="color: white;" target="_self">Register</a>
</button>

Or use preventDefault() function for click event handler in jQuery to prevent default submit action of that button:

$('.registerSilver').click(function (e) {
    e.preventDefault();
    debugger;
    window.location = 'register.aspx';
});

Hyperlink or button does not fire inside repeater item template

3 Answers