【问题标题】:LinkButton event is not firing with bootstrap data-toggleLinkBut​​ton 事件未通过引导数据切换触发
【发布时间】:2017-04-04 08:52:53
【问题描述】:

我的 asp 页面中有一个由链接按钮组成的菜单。我正在使用一个 div 容器和一个无序列表。每个列表项都是一个链接按钮。我的问题是,当我单击链接按钮时,它没有进行回发。

我的asp代码:

    <%@ Page Language="C#" MasterPageFile="~/Companies.master" AutoEventWireup="true" CodeBehind="Shareholder.aspx.cs" Inherits="GAD.Shareholder" Title="Untitled Page" %>
<%@ Register Src="~/Controls/ShareholderListControl.ascx" TagPrefix="gad" TagName="ShareholderListControl" %>
<%@ Register Src="~/Controls/ShareholderEditControl.ascx" TagPrefix="gad" TagName="ShareholderEditControl" %>

<%@ Register Src="~/Controls/CapitalSubscriptionListControl.ascx" TagPrefix="gad" TagName="CapitalSubscriptionListControl" %>
<%@ Register Src="~/Controls/CapitalSubscriptionEditControl.ascx" TagPrefix="gad" TagName="CapitalSubscriptionEditControl" %>

<%@ Register Src="~/Controls/ShareholderCollectListControl.ascx" TagPrefix="gad" TagName="ShareholderCollectListControl" %>
<%@ Register Src="~/Controls/ShareholderCollectEditControl.ascx" TagPrefix="gad" TagName="ShareholderCollectEditControl" %>

<%@ Register Src="~/Controls/ShareholderExpenditureListControl.ascx" TagPrefix="gad" TagName="ShareholderExpenditureListControl" %>
<%@ Register Src="~/Controls/ShareholderExpenditureEditControl.ascx" TagPrefix="gad" TagName="ShareholderExpenditureEditControl" %>

<%@ Register Src="~/Controls/ShareholderPayoutListControl.ascx" TagPrefix="gad" TagName="ShareholderPayoutListControl" %>
<%@ Register Src="~/Controls/ShareholderPayoutEditControl.ascx" TagPrefix="gad" TagName="ShareholderPayoutEditControl" %>

<%@ Register Src="~/Controls/DocumentListControl.ascx" TagPrefix="gad" TagName="DocumentListControl" %>
<%@ Register Src="~/Controls/DocumentEditControl.ascx" TagPrefix="gad" TagName="DocumentEditControl" %>

<%@ Register Src="~/Controls/AlertListControl.ascx" TagPrefix="gad" TagName="AlertListControl" %>
<%@ Register Src="~/Controls/AlertEditControl.ascx" TagPrefix="gad" TagName="AlertEditControl" %>

<%@ Register Src="~/Controls/LetterListControl.ascx" TagPrefix="gad" TagName="LetterListControl" %>

<%@ Register Src="~/Controls/ShareListControl.ascx" TagPrefix="gad" TagName="ShareListControl" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderCompany" runat="server">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">



<div id="exTab" class="container" runat="server">   
    <ul id="myTab"  class="nav nav-pills" runat="server">
        <li id="Li1" class="active" runat="server">
    <asp:LinkButton ID="TabLink1" data-toggle="tab" CssClass="alink" runat="server" OnClick="ChangeView">ACTIONARI/ASOCIATI</asp:LinkButton>
        </li>
        <li id="Li2" runat="server">
    <asp:LinkButton ID="TabLink2" data-toggle="tab" CssClass="alink" runat="server" OnClick="ChangeView">DOCUMENTE</asp:LinkButton>
        </li>
        <li><a href="#3b" data-toggle="tab">Applying clearfix</a>
        </li>
    <li><a href="#4a" data-toggle="tab">Background color</a>
        </li>
    </ul>

  </div>
<asp:HiddenField ID="hdnTab" runat="server" Value="" />
<script type="text/javascript">
    $(document).ready(function () {
        if ($("#hdnTab").val() != '')
            $('#myTab li').removeClass("active");
        $('#myTab a[id="' + $("#hdnTab").val() + '"]').parent().addClass("active");
        $(".alink").click(function () {
            $("#hdnTab").val($(this).attr("id"))
            __doPostBack($(this).attr("id"), "");
        });
    });


</script>


    <div class="container" >
    <asp:Panel ID="PanelMain" runat="server">
        <asp:MultiView ID="MultiViewMain" runat="server" ActiveViewIndex="0">
            <asp:View ID="ViewList" runat="server">
                <gad:ShareholderListControl ID="List" Tag="Shareholder" runat="server"></gad:ShareholderListControl>
            </asp:View>
            <asp:View ID="ViewEdit" runat="server">
                <gad:ShareholderEditControl ID="Edit" Tag="Shareholder" runat="server"></gad:ShareholderEditControl>

           </asp:View>


             <asp:View ID="ViewList_CapitalSubscription" runat="server">
                        <gad:CapitalSubscriptionListControl ID="CapitalSubscriptionListControl" Tag="CapitalSubscription" runat="server" />
                    </asp:View>
             <asp:View ID="ViewEdit_CapitalSubscription" runat="server">
                        <gad:CapitalSubscriptionEditControl ID="CapitalSubscriptionEditControl" Tag="CapitalSubscription" runat="server" />
                   </asp:View>


               <asp:View ID="ViewList_Document" runat="server">
                        <gad:DocumentListControl ID="DocumentListControl" Tag="Document" runat="server" />
                    </asp:View>
               <asp:View ID="ViewEdit_Document" runat="server">
                        <gad:DocumentEditControl ID="DocumentEditControl" Tag="Document" runat="server" />
                   </asp:View>


        </asp:MultiView>

    </asp:Panel>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</asp:Content>

后面的代码:

public void ChangeView(object sender, EventArgs e) {
            LinkButton lnkButton = sender as LinkButton;
            switch (lnkButton.Text) {
                case "ACTIONARI/ASOCIATI": MultiViewMain.SetActiveView(ViewList);
                    break;
                case "DOCUMENTE": MultiViewMain.SetActiveView(ViewList_Document);
                    break;
                default:
                    break;
            }
        }

在调试模式下,我设置了断点,但我的应用程序没有进入我的事件函数...

【问题讨论】:

  • 在更新面板里面吗?
  • @AnoopH.N 不,它在 asp:Content 里面
  • 由于您使用 * data-toggle="tab"* 事件没有命中服务器端代码。
  • @Ratheesh,是的,你是对的,谢谢。使用数据切换选项卡的任何其他解决方法?
  • 您可以使用普通的 HTML 链接代替链接按钮,并且可以通过 Ajax jquery 调用调用服务器功能。请查看此链接以获取更多参考forums.asp.net/t/…

标签: asp.net events postback linkbutton


【解决方案1】:

如果您真的希望链接按钮回发,您将无法获得“导航”功能的实际功能。它肯定会回发。在那种情况下使用下面的代码

引入一个隐藏字段来捕获您点击了哪个链接

<asp:HiddenField ID="hdnTab" runat="server" Value="" />

然后使用此脚本回发到服务器代码

  <script>
    $(document).ready(function () {
        if ($("#hdnTab").val() != '')
            $('#myTab li').removeClass("active");
        $('#myTab a[id="' + $("#hdnTab").val() + '"]').parent().addClass("active");
        $(".alink").click(function () {
            $("#hdnTab").val($(this).attr("id"))
            __doPostBack($(this).attr("id"), "");
        });
    });
</script>

整个 HTML

<%@ Register Src="~/Control/test.ascx" TagPrefix="uc1" TagName="test" %>
<%@ Register Src="~/Control/Tab2.ascx" TagPrefix="uc1" TagName="Tab2" %>

<div id="exTab" class="container" runat="server">   
<ul id="myTab"  class="nav nav-pills" runat="server">
    <li id="Li1" class="active" runat="server">
<asp:LinkButton ID="TabLink1" data-toggle="tab" CssClass="alink" runat="server" OnClick="ChangeView">ACTIONARI/ASOCIATI</asp:LinkButton>
    </li>
    <li id="Li2" runat="server">
<asp:LinkButton ID="TabLink2" data-toggle="tab" CssClass="alink" runat="server" OnClick="ChangeView">DOCUMENTE</asp:LinkButton>
    </li>
    <li><a href="#3b" data-toggle="tab">Applying clearfix</a>
    </li>
<li><a href="#4a" data-toggle="tab">Background color</a>
    </li>
</ul> </div><asp:HiddenField ID="hdnTab" runat="server" Value="" /><div class="container" >
<asp:Panel ID="PanelMain" runat="server">
    <asp:MultiView ID="MultiViewMain" runat="server" ActiveViewIndex="0">
        <asp:View ID="ViewList" runat="server">
             <uc1:test runat="server" id="test" />
        </asp:View>
        <asp:View ID="ViewEdit" runat="server">
            View Edit
       </asp:View>


         <asp:View ID="ViewList_CapitalSubscription" runat="server">
             ViewList_CapitalSubscription
                </asp:View>
         <asp:View ID="ViewEdit_CapitalSubscription" runat="server">
             ViewEdit_CapitalSubscription
               </asp:View>


           <asp:View ID="ViewList_Document" runat="server">
               ViewList_Document
                </asp:View>
           <asp:View ID="ViewEdit_Document" runat="server">
               <uc1:Tab2 runat="server" id="Tab2" />
               </asp:View>


    </asp:MultiView>

</asp:Panel>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

【讨论】:

  • 刚刚更新了答案。我希望您必须向 UL 添加和 ID,并为链接按钮添加一个 css 类
  • 请提供您的 html。你在使用更新面板吗?
  • 将脚本放在 jquery 和引导脚本参考行之后
  • 仍然无法正常工作,当我在第二个选项卡上按下时,它正在回发,但它仍保留在第一个选项卡...
  • 我已经用两个用户控件实现了你的代码。它工作正常。编辑了我的答案
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-16
相关资源
最近更新 更多