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对你问题的评论。因此，我建议您为每个自定义控件实例的表实现唯一ID。这可以通过在自定义控件中实现一个名为“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(...);

希望这会有所帮助......

ASPX页面中的样式问题

1 个答案: