超链接或按钮不会在转发器项目模板内触发

Question

我有一个中继器和内部项目模板我有一个按钮和一个锚点。

<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>

单击此按钮时，它会重新加载同一页面，而不是转到 register.aspx。我使用 "view page source" 并且 href 设置正确。

我删除了锚点并添加了一个 class 到按钮并使用了 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';
    });
});

仍然无法正常工作，不断重新加载同一页面。

我什至尝试将 runat="server" 添加到超链接并在转发器的 itemdatabound 中设置它的 href，但没有成功。

我在这里错过了什么？

Answer 1

<button> 标记的默认行为触发表单提交（即 ASPX 页面中的 <form runat="server">），这可能导致回发到同一页面而不是重定向到锚点中指定的页面 URL link。尝试像下面的示例一样显式设置 type="button" 属性：

<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>

或者对 jQuery 中的 click 事件处理程序使用 preventDefault() 函数来阻止该按钮的默认提交操作：

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

Answer 2

如果你只是想重定向那么为什么你使用按钮而不是那个你可以将按钮 css class 传递给锚标记并使其看起来像按钮

<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">                
                    <a href="register.aspx" class="btn btn-info btn-lg" style="color: white; float: ; margin-right: 40px; margin-top: -150px; background-color: #3697EA" target="_self">Register</a>
            </span>
        </div>
        ....
    </ItemTemplate>

这会起作用

Answer 3

您也可以将 html 按钮替换为 asp 按钮：

<asp:Button runat="server" CssClass="btn btn-info btn-lg registerSilver" PostBackUrl="register.aspx" Text="Register"/>

这样您就可以设置 PostBackUrl 属性。

超链接或按钮不会在转发器项目模板内触发

Hyperlink or button does not fire inside repeater item template

asp.net

repeater

hyperlink

.net-4.5