javascript - 如何正确命名和访问使用中继器加载的元素 ID?
问题描述
我正在创建一个拖放计划界面。用户可以从右侧的选项卡列表中将项目拖到他们的日程表中。我使用中继器从 SQL Server 加载工作人员。我目前正在使用很多 EVAL 来设置元素 ID。我想知道这是否是一种好习惯,或者是否有更好的方法来设置 ID?
我开发的下一步是按工作人员将日程项目从表格加载到每天,但我想在继续之前设置并了解 ID。之后,我将尝试在成功的放置事件上触发 INSERT INTO 或 UPDATE(例如:UPDATE scheduleItems SET content = card text WHERE CrewID = xx AND date = xx )。这就是为什么我认为我的身份证需要有序。
我对 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 = '';
}
}
我的界面供参考:
解决方案
好吧,从技术上讲,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>
在id
每个 div 的属性中runat="server"
,它都有 id 的三个部分使其唯一,
- 父母的身份证
- 控件标识
- 和项目索引
这意味着,您正在处理的连接 id 的问题将是一个开销,因为它始终是唯一的。现在,如果我们使用该属性,从 jquery/javascript 中的元素获取工作人员 ID 的问题非常简单data-
,因为我认为这些信息不是那么敏感。
做这样的事情:
<asp:Repeater runat="server" ID="MyRepeater">
<ItemTemplate>
<div runat="server" draggable="true" id="mySampleDiv" class="mydiv" data-crewid='<%# Eval("CrewId") %>'></div>
</ItemTemplate>
</asp:Repeater>
使用属性生成的 htmldata-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>
$(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 拆分为获取船员 ID,我将 ID 存储在data-
属性中。这可以很好地存储您拥有的 ID。
阅读此内容以了解有关data-
属性的详细信息:https ://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
更新
如果您想从 jquery 中的转发器获取项目索引,您还可以将其保存在另一个data-
属性中,如下所示:
data-itemindex='<%# Container.ItemIndex %>'
推荐阅读
- html - 想通过调整窗口大小使其响应(在标签视图 2 图像中,在移动 1 图像中)
- python - 替换字符串中的单词,如果它们匹配来自单独系列的单词
- sql - 当我同时使用 2 个查询时出现 ORDER BY 问题
- python - 在看到特定元素时将列表拆分为两个列表
- rust - Rust 函数中的显式“return”关键字
- performance - 长度与折叠与显式递归的性能特征
- aframe - aframe-state 组件:在删除由 bind-for 生成的实体时未调用删除函数
- beautifulsoup - 无法使用请求和 bs4 抓取数据
- javascript - Javascript,移动时按一个箭头键
- java - 这个Java代码会发生什么?或者为什么?