如何正确命名和访问使用中继器加载的元素 ID？

Posted 2023-04-12

【中文标题】如何正确命名和访问使用中继器加载的元素 ID？

【英文标题】：How to correctly name and access element IDs loaded with Repeaters?

【发布时间】：2021-01-27 23:02:19

【问题描述】：

我正在创建一个拖放计划界面。用户可以从右侧的选项卡列表中将项目拖到他们的日程表中。我使用中继器从 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>
                <div id="BoardList<%# string.Format("0", Eval("CrewID"))%>" class="board-lists">

                    <div id="Sun<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Mon<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Tue<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Wed<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Thu<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Fri<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                    <div id="Sat<%# string.Format("0", Eval("CrewID"))%>" class="board-list" ondrop="dropIt(event)" ondragover="allowDrop(event)">
                        <%-- load schedule items here --%>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

我的工作列表中继器：

<asp:Repeater ID="JobRepeater" runat="server">
    <ItemTemplate>
        <div id='cardJob<%# string.Format("0", Eval("Job"))%>' class="card" draggable="true" ondragstart="dragStart(event)">
            <%--<asp:Label ID='lblJob' runat="server" Text='<%# string.Format("0", Eval("Job")) + " - " + string.Format("0", Eval("Description"))%>' />--%>
            <p><%# string.Format("0", Eval("Job")) + " - " + string.Format("0", Eval("Description"))%></p>
        </div>
    </ItemTemplate>
</asp:Repeater>

我的拖放 javascript：

function allowDrop(ev) 
    ev.preventDefault();

function dragStart(ev) 
    ev.dataTransfer.setData("text", ev.target.id);

function dropIt(ev) 
    ev.preventDefault();
    let sourceId = ev.dataTransfer.getData("text");
    let sourceIdEl = document.getElementById(sourceId);
    let sourceIdParentEl = sourceIdEl.parentElement;
    let targetEl = document.getElementById(ev.target.id)
    let targetParentEl = targetEl.parentElement;

    if (targetParentEl.id !== sourceIdParentEl.id) 
        if (targetEl.className === sourceIdEl.className) 
            targetParentEl.appendChild(sourceIdEl);
         else 
            targetEl.appendChild(sourceIdEl);
        
     else 
        let holder = targetEl;
        let holderText = holder.textContent;
        targetEl.textContent = sourceIdEl.textContent;
        sourceIdEl.textContent = holderText;
        holderText = '';
    

我的界面供参考：

【问题讨论】：

您究竟想了解关于 ID 的哪些内容？您想了解如何使所有 id 都独一无二吗？

@JamshaidKamran 是的，但是像这样的设置 ID 通常也是好的做法吗？在尝试加载/保存计划项目时，我是否会因为我的 ID 而遇到问题？

【参考方案1】：

嗯，从技术上讲，Repeater Control 将自行管理 ID，如果您尝试连接更多唯一 ID 以使其更加独特，这将是已经解决的问题的开销。

看看你有没有像这样一个简单的Repeater控件，里面有5个项目，我用一个简化的Repeater来解释：

<asp:Repeater runat="server" ID="MyRepeater">
    <ItemTemplate>
        <div runat="server" draggable="true" id="mySampleDiv"></div>
    </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>

在每个runat="server" div 的id 属性中，它具有三个部分的id 以使其唯一，

父母的身份证 控件的 ID 还有物品索引

这意味着，您正在处理的连接 id 的问题将是一个开销，因为它始终是唯一的。现在，如果我们使用 data- 属性，从 jquery/javascript 中的元素获取工作人员 ID 的问题非常简单，因为我认为这些信息不是那么敏感。

做这样的事情：

<asp:Repeater runat="server" ID="MyRepeater">
    <ItemTemplate>
        <div runat="server" draggable="true" id="mySampleDiv" class="mydiv" data-crewid='<%# Eval("CrewId") %>'></div>
    </ItemTemplate>
</asp:Repeater>

而使用data-crewid 属性生成的html 会是这样的：

<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>
    $(document).ready(function()
        $('.mydiv').on('dragstart', function()
            var crewId = $(this).attr('data-crewid');
            // do something with the crewId
        );
    );
</script>

请注意，我已将事件与类而不是与 id 绑定，然后从 data- 属性中获取船员 ID。

到目前为止，很明显，在我的情况下，div 的 id 并不重要，因为我只需要crewid （您的场景可能不同） 或正在设置的任何 id，因此，我将 id 存储在 data- 属性中，而不是连接然后拆分 id 以获取船员 ID。这可以很好地存储您拥有的 ID。

阅读本文以了解有关data- 属性的详细信息：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

---

更新

如果你想从 jquery 中的中继器中获取项目索引，你也可以将它保存在另一个 data- 属性中，如下所示：

data-itemindex='<%# Container.ItemIndex %>'

【讨论】：

谢谢！我不知道 data- 属性，它们似乎是存储/访问 CrewID 的更好方法。这会让事情变得更容易，干杯！