Friday, December 21, 2007 - 文章

KB-MasterPage ClientID Issue

[Abstract]

When using ASP.NET masterpage, the ClientID of webcontrol inside ContentPlaceHolder will get container's ClientID as prefix, like 'ctl00_ContentPlaceHolder1_TextBox1' and this become a big trouble while writing Javascript client-side code. 

Many people suggest using "document.getElementById('<% =TextBox1.ClientID%>')" to solve the problem, but I really don't like embed server-side code in ASPX file, so here's my solution, a flexible Javascript "afa_mpget()" to replace document.getElementById() when using masterpage.

猜謎時間又來了! 想看看，以下的Code有什麼地方有問題?

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" 

Inherits="_Default" MasterPageFile="~/MasterPage.master" %>

<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">

    <asp:TextBox ID="TextBox1" runat="server" Text="Hello"></asp:TextBox>

    <script type="text/javascript">

    alert(document.getElementById("TextBox1").value);

    </script>

</asp:Content>

答案是Javascript alert時會找不到物件，為什麼? 在網頁上View Source，答案馬上揭曉，當網頁套用MasterPage時，TextBox1產生的<INPUT>名稱會變成"ctl00_ContentPlaceHolder1_TextBox1"... 天哪! 由Frameset走向MasterPage，簡單的事變複雜了，要為此回頭嗎?

Google一下，發現大家最常建議最的解法是改寫成
alert(document.getElementById('<% =TextBox1.ClientID%>').value);

不過，我個人實在不喜歡這種ASP時代的義大利麵式寫法，所以就自力救濟了一番。首先我寫了一個MasterPageHelper.cs:

public class MasterPageHelper

{

    public MasterPageHelper()

    {

    }

    public static void RegisterMPGet(MasterPage mp)

    {

        List<string> lstCph = new List<string>();

        lstCph.Add(mp.ClientID);

        searchContentPlaceHolder(mp.Page.Form, lstCph);

        StringBuilder sb = new StringBuilder();

        sb.Append(@"

<script type=""text/javascript"">

function afa_mpget(objId) {

    var inp = document.getElementById(objId);

");

        foreach (string cphId in lstCph)

        {

            sb.AppendFormat(

"   if (!inp) inp = document.getElementById(\"{0}_\" + objId);\n",

                cphId);

        }

        sb.Append("return inp;\n}\n</script>");

        Literal js = new Literal();

        js.Text = sb.ToString();

        mp.Page.Form[請看下方更新]Header.Controls.AddAt(0, js);

    }

    public static void searchContentPlaceHolder(Control ctrl, 
List<string> lst)

    {

        if (ctrl is ContentPlaceHolder)

            lst.Add(ctrl.ClientID);

        else if (ctrl.HasControls())

            foreach (Control c in ctrl.Controls)

                searchContentPlaceHolder(c, lst);

    }

}

在MasterPage的Page_Load事件中，呼叫MasterPageHelper.RegisterMPGet(this)，就會在網頁中加入一個用元件名稱自動尋找各ConentPlaceHolder下元件的彈性函數--afa_mpget(fieldName):

<script type="text/javascript">

function afa_mpget(objId) {

    var inp = document.getElementById(objId);

   if (!inp) inp = document.getElementById("ctl00_" + objId);

   if (!inp) inp = document.getElementById("ctl00_ContentPlaceHolder1_" + objId);

   if (!inp) inp = document.getElementById("ctl00_ContentPlaceHolder2_" + objId);

return inp;

}

</script>

接著，我們用afa_mpget取代document.getElementById，就又回到以前幸福快樂的生活囉!

<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">

    <asp:TextBox ID="TextBox1" runat="server" Text="Hello"></asp:TextBox>

    <script type="text/javascript">

    </script>

</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder2">

    <asp:TextBox ID="TextBox2" runat="server" Text="World"></asp:TextBox>

    <script type="text/javascript">

    alert(afa_mpget("TextBox1").value);

    alert(afa_mpget("TextBox2").value);

    </script>

</asp:Content>

Update 2008-01-03
Page.Form.Controls.AddAt會破壞ViewState，故改成Header.Controls.Add，說明在此。

Update 2008-01-19
強化版搜尋範圍擴及UserControl，說明在此。

Update 2009-01-13
另有jQuery版的解決方案，說明在此。

Posted 21 December 2007 07:42 PM 由 Jeffrey | 10 comment(s) Filed under: ASP.NET, KB

搜尋