javascript - ASPX 页面中的样式问题

Question

我有一个 ASPX 页面，假设输出一个自定义控件的 5 个实例(基本上是一个包含从数据库中获取的数据的表)。我对 ASP.NET 和 JavaScript 都比较陌生，所以我在解决这个样式问题时遇到了一些困难。

我的问题是，自定义控件(表格)的样式仅应用于控件的第一个实例。我不确定为什么会这样。我已经把我的代码放上去了(我重命名了很多东西以保持这种通用性)。我将如何使样式应用于所有 5 个实例？

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=XXXXXXXXXXXXXX" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="company" TagName="Control3" Src="~/Common/Controls/Control3.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link type="text/css" rel="stylesheet" href="<%=ResolveUrl("~/Project/Css/Dashboard.css") %>" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div id="dashboardContent">

        <div id="id1">

            <%-- ID1 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID1" runat="server" CssClass="InputHeader" meta:resourcekey="lblID1" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3First" runat="server" meta:resourcekey="control3First"
                    Filter="" />
            </div>
        </div>

        <div id="id2">

            <%-- ID2 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID2" runat="server" CssClass="InputHeader" meta:resourcekey="lblID2" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Second" runat="server" meta:resourcekey="control3Second"
                    Filter="" />
            </div>
        </div>

        <div id="id3">

            <%-- ID3 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID3" runat="server" CssClass="InputHeader" meta:resourcekey="lblID3" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Third" runat="server" meta:resourcekey="control3Third"
                    Filter="" />
            </div>
        </div>

        <div id="id4">

            <%-- ID4 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID4" runat="server" CssClass="InputHeader" meta:resourcekey="lblID4" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Forth" runat="server" meta:resourcekey="control3Forth"
                    Filter="" />
            </div>
        </div>

        <div id="id5">

            <%-- ID5 --%>
            <div class="roundedTop">
                <asp:Label ID="lblID5" runat="server" CssClass="InputHeader" meta:resourcekey="lblID5" />
            </div>

            <div class="roundedMain"><!--<![endif]-->

                <company:Control3 ID="control3Fifth" runat="server" meta:resourcekey="control3Fifth"
                    Filter="" />
            </div>
        </div>

    </div>

    <asp:Timer ID="tUpdateTimer" runat="server" ontick="tUpdateTimer_Tick"></asp:Timer>

    <asp:UpdatePanel ID="upTimer" runat="server" UpdateMode="Conditional">
        <ContentTemplate />
        <Triggers><asp:AsyncPostBackTrigger ControlID="tUpdateTimer" EventName="Tick" /></Triggers>
    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="JavascriptContent" runat="server">

    <script type="text/javascript">

        var tblSomething = null;
        var tblHostConnection = null;

        function pageLoad(sender, args) {
            attachDataTablesToSomethingTable();
            attachDataTablesToHostConnectionTable();
        }

        function attachDataTablesToSomethingTable() {
            tblSomething = $('#tblSomething').dataTable({
                "bRetrieve": true,
                "bServerSide": false,
                "bPaginate": false,
                "bFilter": false,
                "bSort": false,
                "bJQueryUI": true,
                "sScrollY": "230px",
                "sScrollX": "100%",
                "oLanguage": {
                    "sEmptyTable": '<%= GetLocalResourceObject("tblSomething.Empty").ToString() %>',
                    "sProcessing": '<img id="imgAnim" src="<%= ResolveUrl(Resources.SiteIcons.Loader) %>" />',
                    "sInfo":
                                '<%= GetLocalResourceObject("sInfo.Showing").ToString() %>' + ' _START_ ' +
                                '<%= GetLocalResourceObject("sInfo.to").ToString() %>' + ' _END_ ' +
                                '<%= GetLocalResourceObject("sInfo.of").ToString() %>' + ' _TOTAL_ ' +
                                '<%= GetLocalResourceObject("sInfo.entries").ToString() %>'
                }
            });
        }

        function attachDataTablesToHostConnectionTable() {
            tblHostConnection = $('#tblHostConnection').dataTable({
                "bRetrieve": true,
                "bServerSide": false,
                "bPaginate": false,
                "bFilter": false,
                "bSort": false,
                "bJQueryUI": true,
                "sScrollY": "100%",
                "sScrollX": "100%",
                "oLanguage": {
                    "sEmptyTable": '<%= GetLocalResourceObject("tblHostConnection.Empty").ToString() %>',
                    "sProcessing": '<img id="imgAnim" src="<%= ResolveUrl(Resources.SiteIcons.Loader) %>" />',
                    "sInfo": ''
                }
            });
        }

    </script>

</asp:Content>

经过一番尝试，如果我在底部的 JavaScript 调用中注释掉了 attachDataTablesToSomethingTable()，那么任何表格都不会应用任何样式，所以我假设这是适用的函数/调用样式。同样，我对 ASP.NET 和 JavaScript 没有经验，所以如果有人能阐明任何一点，那就太棒了。

Answer 1

我同意@lucuma 对你的问题的评论。因此，我可能建议您为每个自定义控件实例的表实现唯一标识。这可以通过在您的自定义控件中实现公共(public)属性(例如“TableID”)来实现，可以为每个自定义控件实例配置该属性。

以下部分进入用户自定义控件实现:

代码隐藏:

public string TableID
{
   get;
   set;
}

标记:

<table id='<%=TableID %>'>

在aspx页面中为每个自定义控件实例配置TableID属性:

<company:Control3 ID="control3First" runat="server" meta:resourcekey="control3First" Filter=""
TableID='mytable1' />

<company:Control3 ID="control3Second" runat="server" meta:resourcekey="control3Second" Filter=""
TableID='mytable2' />

最后，为每个表连接 jquery 插件...

mytable1 = $('#mytable1').dataTable(...);
mytable2 = $('#mytable2').dataTable(...);

希望这有助于...