如何正确命名和访问 Repeater 加载的元素 ID？

Question

我正在创建一个拖放计划界面。用户可以将项目从右侧的选项卡列表拖到他们的日程表中。我使用中继器从 SQL Server 加载工作人员。我目前正在使用大量 EVAL 来设置元素 ID。我想知道这是否是一种好的做法，或者是否有更好的方法来设置 ID？

我开发的下一步是由工作人员将表中的计划项目加载到每天，但我想在继续之前设置和理解 ID。之后，我将尝试在成功放置事件时触发 INSERT INTO 或 UPDATE（示例：UPDATE scheduleItems SET content = card text WHERE CrewID = xx AND date = xx）。这就是为什么我认为我的 ID 需要按顺序排列。

我是 ASP.NET Web 窗体开发的新手，所以如果我的方法有问题请告诉我！

这是我的船员中继器：

<asp:Repeater ID="CrewRepeater" runat="server">

    <ItemTemplate>

        <div id="Crew<%# string.Format("{0}", Eval("CrewID"))%>" class="row">

            <div class="board-layout">

                <div class="left">

                    <div class="board-text">

                        Crew ID: <%# string.Format("{0}", Eval("CrewID"))%>

                        <div id='CrewList<%# string.Format("{0}", Eval("CrewID"))%>' class="crew-board-list">

                            <div id='Crew<%# string.Format("{0}", Eval("CrewID"))%>Employees' class="cardEmployee" data-toggle="modal" data-target="#DetailsModal" ondrop="dropIt(event)" ondragover="allowDrop(event)">

                                <p><%# string.Format("{0}", Eval("Members"))%></p>

                            </div>

                            <div id='Crew<%# string.Format("{0}", Eval("CrewID"))%>Equipment' class="cardEquipment">

                                <p><%# string.Format("{0}", Eval("Vehicles"))%></p>

                            </div>

                        </div>

                    </div>

                </div>

Answer 1

好吧，从技术上讲，RepeaterControl 将自行管理 ID，如果您尝试连接更多唯一 ID 以使其更加独特，那将是已经解决的问题的开销。看看你有没有Repeater这样一个简单的控件，里面有5个项目，我用一个简化的Repeater来解释一下：<asp:Repeater runat="server" ID="MyRepeater">&nbsp; &nbsp; <ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <div runat="server" draggable="true" id="mySampleDiv"></div>&nbsp; &nbsp; </ItemTemplate></asp:Repeater>然后，它将以这种方式管理 div，html就像这样：<div draggable="true" id="MyRepeater_mySampleDiv_0"></div><div draggable="true" id="MyRepeater_mySampleDiv_1"></div><div draggable="true" id="MyRepeater_mySampleDiv_2"></div><div draggable="true" id="MyRepeater_mySampleDiv_3"></div><div draggable="true" id="MyRepeater_mySampleDiv_4"></div>在id每一个div的属性中runat="server"，它都有id的三部分来使它独一无二，家长身份证控件的ID和项目索引这意味着，这个问题，你正在努力连接 ids 将是一个开销，因为它总是唯一的。现在，如果我们使用该属性，从jquery/中的元素获取船员 ID 的问题就非常简单，因为我认为此信息不是那么敏感。javascriptdata-做这样的事情：<asp:Repeater runat="server" ID="MyRepeater">&nbsp; &nbsp; <ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <div runat="server" draggable="true" id="mySampleDiv" class="mydiv" data-crewid='<%# Eval("CrewId") %>'></div>&nbsp; &nbsp; </ItemTemplate></asp:Repeater>生成html的 withdata-crewid属性将是这样的：<div draggable="true" id="MyRepeater_mySampleDiv_0" data-crewid="1000"></div><div draggable="true" id="MyRepeater_mySampleDiv_1" data-crewid="1001"></div><div draggable="true" id="MyRepeater_mySampleDiv_2" data-crewid="1002"></div><div draggable="true" id="MyRepeater_mySampleDiv_3" data-crewid="1003"></div><div draggable="true" id="MyRepeater_mySampleDiv_4" data-crewid="1004"></div>这样，您就不需要管理元素的 ID，因为您主要关心的是获取crewid特定元素何时被拖放或放下的信息。而在 中jquery，你可以这样得到它：<script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('.mydiv').on('dragstart', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var crewId = $(this).attr('data-crewid');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // do something with the crewId&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>请注意，我已将事件与类绑定，而不是与 id 绑定，然后从属性中取回 crewid data-。到目前为止，很明显 div 的 id 在我的情况下并不重要，因为我只需要 crewid （您的场景可能不同）或设置的任何 id，所以，而不是连接然后将 id 拆分为获取 crewid，我将 id 存储在一个data-属性中。哪个可以很好地存储您拥有的 ID。阅读有关属性的详细信息data-：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes更新如果你想从中的转发器中获取项目索引jquery，你也可以将它保存在另一个data-属性中，如下所示：data-itemindex='<%# Container.ItemIndex %>'