Question

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

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

我有一个点击式C＃方法，可以很好地读取Repeater中的Items（方法btnSave_Changes）。然后我添加了一些操作和移动HTML的JavaScript。 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);
        }

    }

Answer 1

问题不在于对转发器的客户端表示进行排序，而是在数据源中对项目进行了无意义的排序;

这是一个简单转发器的视图状态：

/wEPDwULLTEwNjkxNzU2MzgPZBYCAgEPZBYCAgEPFgIeC18hSXRlbUNvdW50AgUWCgIBD2QWAmYPFQQQRW1waXJlIEJ1cmxlc3F1ZQlCb2IgRHlsYW4IQ29sdW1iaWEFMTAuOTBkAgIPZBYCZg8VBA9IaWRlIHlvdXIgaGVhcnQMQm9ubmllIFR5bGVyC0NCUyBSZWNvcmRzBDkuOTBkAgMPZBYCZg8VBA1HcmVhdGVzdCBIaXRzDERvbGx5IFBhcnRvbgNSQ0EEOS45MGQCBA9kFgJmDxUEE1N0aWxsIGdvdCB0aGUgYmx1ZXMKR2FyeSBNb29yZQ5WaXJnaW4gcmVjb3JkcwUxMC4yMGQCBQ9kFgJmDxUEBEVyb3MPRXJvcyBSYW1henpvdHRpA0JNRwQ5LjkwZGSThjyUMF+lfuzF5an9+yGiqSdlTXMozV4JAAW5zYmwsg==

尝试在this

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

输入：

enter image description here

输出将是：

enter image description here

因此，在客户端操作之后，数据源的状态将是未经过修改的，最简单的解决方案可以是为您的数据项添加一个order属性并更改客户端的值。

Repeater没有获得客户端更新的项目

1 个答案: