这是用户控件的代码,我有一个具有数据值属性的中继器(data-camera-mac
和 data-checked
)。这些值将在 C# 端填充:
repeaterCameras.DataSource = variableName;
repeaterCameras.DataBind();
我有一个点击式 C# 方法,可以很好地读取中继器中的项目(方法 btnSave_Changes
)。然后我添加了一些 JavaScript 来操纵和转换 HTML。 JavaScript 工作正常并按预期操作前端。 JavaScript 还更改数据值属性。但是,当单击事件发生 (btnSave_Changes
) 时,它会打印 Repeater 中的原始项目集,就好像 JavaScript 没有发生任何更改一样。
HTML:
<asp:Repeater ID="repeaterCameras" runat="server" >
<ItemTemplate>
<div class="<%# (bool)Eval("Checked") ? "row-fluid camera-row highlight-row highlight_selected_row" : "row-fluid camera-row highlight-row" %>"
data-camera-mac=<%# Eval("Mac") %> >
<div class="highlight-bar"></div>
<div id="divArrows" class="arrow-column camera-column-padding"
runat="server" visible="true" data-checked=<%# Eval("Checked")%>
data-camera-mac=<%# Eval("Mac") %> >
<span id="spArrows" >
<i id="upArrow" class="icon-arrow-up icon-large"
style="cursor:pointer;" onclick="upArrowClick(this)" ></i>
<i id="downArrow" class="icon-arrow-down icon-large"
style="cursor:pointer;" onclick="downArrowClick(this)" ></i>
</span>
</div>
<div class="check-box-column camera-column-padding">
<span id="spCheckBox" runat="server">
<i id="cameraSelectCheckBox"
class="<%# (bool)Eval("Checked") ? "icon-ok icon-large" : "icon-check-empty icon-large" %>"
style="cursor:pointer;" onclick="clickCheckBox(this)"
data-camera-mac=<%# Eval("Mac") %> ></i>
</span>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
JavaScript:
function clickCheckBox(element) {
var notHighlight = "row-fluid camera-row highlight-row";
var highlight = "row-fluid camera-row highlight-row highlight_selected_row";
if (element.className == "icon-check-empty icon-large"){
element.className = "icon-ok icon-large";
highlightRow(element.getAttribute("data-camera-mac"));
}else if(element.className == "icon-ok icon-large"){
element.className = "icon-check-empty icon-large";
unHighlightRow(element.getAttribute("data-camera-mac"));
} else {
alert("Problem: " + element.className);//TODO: log error
}
}
function highlightRow(mac){
var currentClass = "row-fluid camera-row highlight-row";
var newClass = "row-fluid camera-row highlight-row highlight_selected_row";
var rowsList = document.getElementsByClassName(currentClass);
for(var i = 0; i < rowsList.length; i++){
if (rowsList[i].getAttribute("data-camera-mac") == mac) {
var tempElem = rowsList[i].getElementsByClassName("arrow-column camera-column-padding")[0];
tempElem.style.visibility = 'visible';
tempElem.setAttribute("data-checked", "true");
rowsList[i].className = newClass;
break;
}
}
}
function unHighlightRow(mac){
var newClass = "row-fluid camera-row highlight-row";
var currentClass = "row-fluid camera-row highlight-row highlight_selected_row";
var rowsList = document.getElementsByClassName(currentClass);
for(var i = 0; i < rowsList.length; i++){
if (rowsList[i].getAttribute("data-camera-mac") == mac) {
var tempElem = rowsList[i].getElementsByClassName("arrow-column camera-column-padding")[0];
tempElem.style.visibility = 'hidden';
tempElem.setAttribute("data-checked", "false");
rowsList[i].className = newClass;
break;
}
}
}
function upArrowClick(element) {
var current = element.parentNode.parentNode.parentNode;
var previous = findPrevious(current);
if (previous) {
current.parentNode.insertBefore(current, previous);
}
}
function findPrevious(element) {
do {
element = element.previousSibling;
} while (element && element.nodeType != 1);
return element;
}
function downArrowClick(element) {
var current = element.parentNode.parentNode.parentNode;
var next = findNext(current);
if (next) {
current.parentNode.insertBefore(next, current);
}
}
function findNext(element) {
do {
element = element.nextSibling;
} while (element && element.nodeType != 1);
return element;
}
C#:
protected void btnSave_Changes(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("btnSave_Changes");
if (repeaterCameras == null || repeaterCameras.Items == null || repeaterCameras.Items.Count == 0)
return;
System.Diagnostics.Debug.WriteLine("repeaterCameras.Items.Count = " + repeaterCameras.Items.Count);
for (int i = 0; i < repeaterCameras.Items.Count; i++)
{
System.Diagnostics.Debug.WriteLine("i = " + i);
HtmlGenericControl div = repeaterCameras.Items[i].FindControl("divArrows") as HtmlGenericControl;
string macStr = div.Attributes["data-camera-mac"].ToString();
string checkedStr = div.Attributes["data-checked"].ToString();
System.Diagnostics.Debug.WriteLine("data-camera-mac = " + macStr + ", data-checked = " + checkedStr);
}
}
最佳答案
问题不在于中继器的客户端表示的排序,而是数据源中项目的排序不正确;
这是一个简单中继器的 View 状态:
/wEPDwULLTEwNjkxNzU2MzgPZBYCAgEPZBYCAgEPFgIeC18hSXRlbUNvdW50AgUWCgIBD2QWAmYPFQQQRW1waXJlIEJ1cmxlc3F1ZQlCb2IgRHlsYW4IQ29sdW1iaWEFMTAuOTBkAgIPZBYCZg8VBA9IaWRlIHlvdXIgaGVhcnQMQm9ubmllIFR5bGVyC0NCUyBSZWNvcmRzBDkuOTBkAgMPZBYCZg8VBA1HcmVhdGVzdCBIaXRzDERvbGx5IFBhcnRvbgNSQ0EEOS45MGQCBA9kFgJmDxUEE1N0aWxsIGdvdCB0aGUgYmx1ZXMKR2FyeSBNb29yZQ5WaXJnaW4gcmVjb3JkcwUxMC4yMGQCBQ9kFgJmDxUEBEVyb3MPRXJvcyBSYW1henpvdHRpA0JNRwQ5LjkwZGSThjyUMF+lfuzF5an9+yGiqSdlTXMozV4JAAW5zYmwsg==
尝试在在线 View 状态查看器中解析它,例如 this
对于此输入:
输出将是这样的:
因此,在客户端操作之后,数据源的状态将保持不变,最简单的解决方案可以是向数据项添加订单属性并更改客户端的值。
关于c# - 中继器未获取客户端更新的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25001680/