Dotjum@點部落

筆記自己的想法與記錄

2008-03-06

[ASP.NET]AJAX UpdatePanel在設計畫面模式 design view 排版時亂在一起解決方法div

Dotjum今天要介紹的是，在UpdatePanel 在設計畫面模式 design view，
你已經做好的GridView DataList textBox
等阿，放到 UpdatePanel ContentTemplate 結果就亂掉了，

Dotjum今天要介紹的是，在UpdatePanel 在設計畫面模式 design view，
你已經做好的GridView DataList textBox
等阿，放到 UpdatePanel ContentTemplate 結果就亂掉了，
如下圖

image
那該怎麼處理呢?Dotjum也想了半天，後來就想到一個比較「硬」的方法處理，
當然好不好就看你怎麼想了，話不多說，請看以下說明。
Step1.在  UpdatePanel  中 ContentTemplate  加入一個 div 並設定為 runat="Server"
<div runat="server" id="div1" style="width: 750px;">
 

 

   <ContentTemplate>
                         <div runat="server" id="div1" style="width: 750px;">
                        <table width="100%">
                            <tr>
                                <td>
                                    寄件者：<asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtFrom"
                                        ErrorMessage="*"></asp:RequiredFieldValidator></td>
                            </tr>
                            <tr>
                                <td>
                                    主　旨：<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator></td>
                            </tr>
                            <tr>
                                <td>
                                    <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/fckeditor/" Height="500px" Width="100%">
                                    </FCKeditorV2:FCKeditor>
                                </td>
                            </tr>
                        </table>
                        </div>
                    </ContentTemplate>


Step2.在 .cs Load 的程式 將div.Style["width"] = "100%";
 

protected void Page_Load(object sender, EventArgs e)
    {
        this.div1.Style["width"] = "100%";
    }

 

就這個兩步驟你就會發現你已經可以在設計畫面看到你UpdatePanel裡面的排版（Step1 完成就可以）
但為什麼要多做 Step2 因為在 HTML <div runat="server" id="div1" style="width: 750px;"> 是讓VS2005介面
顯示出來在設計畫面時，但要考量到畫面輸出時可能不一定可以設定到 width = 數字px
所以還是輸出為 div1.Style["width"] = "100%"; 來配合畫面的輸出。
當然這樣就暫時性的解決，在UpdatePanel無法看到排版的問題，雖然蠻奇怪的解法，但可以至少能完整的看到。
如果你有更好的解法，在麻煩你留言給Dotjum，讓Dotjum也可以學習一下。
有趣嗎?下次介紹更有趣的給你知道。

系列文章