中继器没有获取客户端更新的项目

Question

这是用户控件的代码 我有一个中继器，它具有数据值属性（data-camera-mac 和 data-checked）。这些值将在 C# 端填充：

repeaterCameras.DataSource = variableName;
repeaterCameras.DataBind();

我有一个单击 C# 方法，可以很好地读取中继器中的项目（方法 btnSave_Changes）。然后我添加了一些 JavaScript 来操作和转换 HTML。 JavaScript 工作正常并按预期操作前端。 JavaScript 还会更改数据值属性。但是，当点击事件发生时 (btnSave_Changes)，它会在中继器中打印原始项目集，就好像 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);
        }

    }

Answer 1

问题不在于repeater的客户端表示排序，而是数据源中item的排序不正确；

这是一个简单中继器的视图状态：

/wEPDwULLTEwNjkxNzU2MzgPZBYCAgEPZBYCAgEPFgIeC18hSXRlbUNvdW50AgUWCgIBD2QWAmYPFQQQRW1waXJlIEJ1cmxlc3F1ZQlCb2IgRHlsYW4IQ29sdW1iaWEFMTAuOTBkAgIPZBYCZg8VBA9IaWRlIHlvdXIgaGVhcnQMQm9ubmllIFR5bGVyC0NCUyBSZWNvcmRzBDkuOTBkAgMPZBYCZg8VBA1HcmVhdGVzdCBIaXRzDERvbGx5IFBhcnRvbgNSQ0EEOS45MGQCBA9kFgJmDxUEE1N0aWxsIGdvdCB0aGUgYmx1ZXMKR2FyeSBNb29yZQ5WaXJnaW4gcmVjb3JkcwUxMC4yMGQCBQ9kFgJmDxUEBEVyb3MPRXJvcyBSYW1henpvdHRpA0JNRwQ5LjkwZGSThjyUMF+lfuzF5an9+yGiqSdlTXMozV4JAAW5zYmwsg==

尝试在this等在线视图状态查看器中解析它

对于这个输入：

输出将是这样的：

因此，在您的客户端操作之后，数据源的状态将保持不变，最简单的解决方案是向您的数据项添加一个 order 属性并更改客户端的 value。