Ajax 更新面板和样式答案

【问题标题】：Ajax update panels and stylesAjax 更新面板和样式
【发布时间】：2010-09-14 11:26:27
【问题描述】：

我有一个带有 js 和 css 样式的按钮，并且每次单击按钮（执行回发）时它都会在更新面板中丢失样式？

很确定这是一个简单的问题，知道吗？

<html xmlns="http://www.w3.org/1999/xhtml">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" class="art-button" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
</form>

function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
    var buttons = xGetElementsByClassName(className, document, tags[j]);
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (!button.tagName || !button.parentNode) return;
        if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
            if (!artHasClass(button, 'art-button')) button.className += ' art-button';
            var wrapper = document.createElement('span');
            wrapper.className = "art-button-wrapper";
            if (artHasClass(button, 'active')) wrapper.className += ' active';
            var spanL = document.createElement('span');
            spanL.className = "l";
            spanL.innerHTML = " ";
            wrapper.appendChild(spanL);
            var spanR = document.createElement('span');
            spanR.className = "r";
            spanR.innerHTML = " ";
            wrapper.appendChild(spanR);
            button.parentNode.insertBefore(wrapper, button);
            wrapper.appendChild(button);
        }
        artEventHelper.bind(button, 'mouseover', function(e) {
            e = e || window.event;
            wrapper = (e.target || e.srcElement).parentNode;
            wrapper.className += " hover";
        });
        artEventHelper.bind(button, 'mouseout', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            wrapper.className = wrapper.className.replace(/hover/, "");
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
        artEventHelper.bind(button, 'mousedown', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className += " active";
        });
        artEventHelper.bind(button, 'mouseup', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
    }
}

}

artLoadEvent.add(function() { artButtonsSetupJsHover("art-button"); });

【问题讨论】：

标签： c# asp.net ajax panels

【解决方案1】：

您可能在 onload 事件中设置了 js 中的样式，但此事件仅触发一次，然后在每次回发中更新面板不会通过它。您必须像这样附加到 PageRequestManager pageloaded 事件：

在 ScriptManager 声明之后，您编写此代码，并且每次您在内部执行回发时，该脚本都会运行。

<script type="text/jscript">
<!--
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_pageLoaded(pageLoaded);

 function pageLoaded(sender, args) {
     document.getElementById("Button1").style.fontWeight = "bold";
 }
-->
</script>

或直接来自 Sys.Application.add_load：

<script type="text/jscript">
<!--
 Sys.Application.add_load(
     function pageLoaded(sender, args) {
         document.getElementById("Button1").style.fontWeight = "bold";
     });
-->
</script>

【讨论】：

我如何代替 Sys.Application.add_load(code) 我做 Sys.Application.add_load(jsfile) ？
你必须在脚本管理器中注册脚本并调用add_load中的方法

【解决方案2】：

有一些我能想到的案例

您更改了代码后面的样式。
您使用脚本更改了样式，因此更新后您没有再次运行该脚本。
您更改了按钮的 DOM 位置，因此该样式不再适用于该位置。

。如果你给我们代码，也许我们可以看到问题所在。

【讨论】：

@Stacker 是两个选项，我缺席的还有其他答案。

【解决方案3】：

如果您使用 js 设置样式，您可能需要在页面上的 ScriptManager 中注册该 js。这样脚本将在部分页面回发时加载。

【讨论】：