C# 更新面板内的DropDownList AutoPostBack丢失css设计
我有这个页面结构C# 更新面板内的DropDownList AutoPostBack丢失css设计,c#,javascript,drop-down-menu,updatepanel,autopostback,C#,Javascript,Drop Down Menu,Updatepanel,Autopostback,我有这个页面结构 <MasterPage> <script type="text/javascript" src="../js/jquery.main.js"></script> <link rel="stylesheet" type="text/css" href="../css/all2.css" media="all" /> <ContentPage> <updatePanel> <asp
<MasterPage>
<script type="text/javascript" src="../js/jquery.main.js"></script>
<link rel="stylesheet" type="text/css" href="../css/all2.css" media="all" />
<ContentPage>
<updatePanel>
<asp:DropDownList id="ddlCountry" runat="server" AutoPostBack="True" CssClass="width_412" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" ></asp:DropDownList>
</updatePanel>
</ContentPage>
</MasterPage>
我想更新面板会被加载,请帮助我
我进入jquery.main.js,发现select的设计被动态替换
恐怕UpdatePanel的工作原理是替换其中的所有内容。这就是为什么你的造型被破坏了
如果保持样式对您很重要,您有两个选择:
- 转向更原生的AJAX解决方案。Ie,捕捉JavaScript中的变化,然后对页面中的某个web服务甚至静态方法进行AJAX调用,以完成所需的操作
- 看看是否有办法让jQuery在每次来自UpdatePanel的调用完成后重新设置下拉列表的样式
老实说,UpdatePanel是微软对某种Ajax库的第一次尝试,但这并不是他们的最大努力。离开这不是最坏的主意。我知道这不是你想要的快速答案 但是应该有一些方法来保留设计元素或者重新绑定设计元素,对吗?@sajanyamaha-整个部分都重新呈现了。因此,如果您在页面首次加载时有一些jQuery样式,那么不会,jQuery将不会自动重新启动。您必须手动重新启动它,或者放弃更新面板我如何启动它,我尝试在更新面板中提供链接引用和js引用,没有用。@sajanyamaha-恐怕我不知道。我想问一个新的问题,特别是关于这一点,并确保引用您在这个下拉列表中使用的任何jQuery插件。
function replaceSelects() {
for(var q = 0; q < selects.length; q++) {
if (!selects[q].replaced && selects[q].offsetWidth && selects[q].className.indexOf("default") == -1){
selects[q]._number = q;
//create and build div structure
var selectArea = document.createElement("div");
var left = document.createElement("span");
left.className = "left";
selectArea.appendChild(left);
var disabled = document.createElement("span");
disabled.className = "disabled";
selectArea.appendChild(disabled);
selects[q]._disabled = disabled;
var center = document.createElement("span");
var button = document.createElement("a");
var text = document.createTextNode(selectText);
center.id = "mySelectText"+q;
var stWidth = selects[q].offsetWidth;
selectArea.style.width = stWidth + "px";
if (selects[q].parentNode.className.indexOf("type2") != -1){
button.href = "javascript:showOptions("+q+",true)";
}else{button.href = "javascript:showOptions("+q+",false)";}
button.className = "selectButton";
selectArea.className = "selectArea";
selectArea.className += " " + selects[q].className;
selectArea.id = "sarea"+q;
center.className = "center";
center.appendChild(text);
selectArea.appendChild(center);
selectArea.appendChild(button);
//hide the select field
selects[q].className += " outtaHere";
//insert select div
selects[q].parentNode.insertBefore(selectArea, selects[q]);
//build & place options div
var optionsDiv = document.createElement("div");
var optionsListParent = document.createElement("div");
optionsListParent.className = "select-center";
var optionsListParent2 = document.createElement("div");
optionsListParent2.className = "select-center-right";
var optionsList = document.createElement("ul");
optionsDiv.innerHTML += "<div class='select-top'><div class='select-top-left'></div><div class='select-top-right'></div></div>";
optionsListParent.appendChild(optionsListParent2);
optionsListParent.appendChild(optionsList);
optionsDiv.appendChild(optionsListParent);
selects[q]._options = optionsList;
optionsDiv.style.width = stWidth + "px";
optionsDiv._parent = selectArea;
optionsDiv.className = "optionsDivInvisible";
optionsDiv.id = "optionsDiv"+q;
populateSelectOptions(selects[q]);
optionsDiv.innerHTML += "<div class='select-bottom'><div class='select-bottom-left'></div><div class='select-bottom-right'></div></div>";
document.getElementsByTagName("body")[0].appendChild(optionsDiv);
selects[q].replaced = true;
}
all_selects = true;
}
}