1

私はこのページ構造を持っています

<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>

AutoPostBack="True"ここで、選択した国の州を拘束する必要があります。

問題は、「AutoPostBack="True" を設定すると DropDownList のデザインが失われる」ことです

AutoPostBack なし:

ここに画像の説明を入力

AutoPostBack を使用:

ここに画像の説明を入力

jquery.main.js の中に入り、select のデザインが動的に置き換えられていることがわかりました。 

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;
  }
  }

ロード時に更新パネルがポストバックされると思います。助けてください。

4

1 に答える 1

0

jquery.main.js の中に入り、select のデザインが動的に置き換えられていることがわかりました。

残念ながら、 UpdatePanelはその中のすべてのコンテンツを置き換えることによって機能します。スタイリングが崩れてしまうのはそのためです。

スタイルを維持することが重要な場合は、次の 2 つのオプションがあります。

  • よりネイティブな AJAX ソリューションに移行します。つまり、JavaScript の変更をキャッチし、ページ内の Web サービスまたは静的メソッドに対して AJAX 呼び出しを行い、必要なことを実行します。

  • UpdatePanel からの呼び出しが完了するたびに、jQuery でドロップダウンのスタイルを変更する方法があるかどうかを確認してください。

正直なところ、UpdatePanel は Microsoft がある種の Ajax ライブラリを試みた最初の試みであり、彼らの最善の努力とは言えませんでした。ここから離れることは、最悪の考えではありません。ただし、それがあなたが探していた簡単な答えではないことはわかっています。

于 2012-12-08T07:19:39.420 に答える