Eason.Yen 停,看,聽

在使用GridView控制項時我們常常會用到TemplateField(樣板欄位),

而樣板欄位內也常常會放入一些我們需要的控制項(Button,TextBox,CheckBox....),

這些控制項如果我們在設計階段在.aspx看到的控制項ID只有一個,

如下所示:

<asp:TemplateField HeaderText="使用者設定值">
       <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
       </ItemTemplate>
</asp:TemplateField>

但是因為GridView是動態隨著資料來增加列數,

而網頁上的控制項ID又都是獨一無二的,

因此網頁畫面呈現時,

我們以右鍵檢視網頁原始檔時會看到GridView的每個列看到的控制項ID都不再是剛剛的 ID="TextBox1",

取而代之的是:

<input name="_ctl0:MainContent:GridView1:_ctl2:TextBox1" type="text"  id="_ctl0_MainContent_GridView1__ctl2_TextBox1"  />

<input name="_ctl0:MainContent:GridView1:_ctl3:TextBox1" type="text"  id="_ctl0_MainContent_GridView1__ctl3_TextBox1"  />

<input name="_ctl0:MainContent:GridView1:_ctl4:TextBox1" type="text"  id="_ctl0_MainContent_GridView1__ctl4_TextBox1"  />

.aspx在網頁呈現時給了我們控制項不一樣的ID,

所以當我需要在Client端用javascript 來驗證這個樣板欄位的控制項時,

可以在GridView的PreRender事件內先取得網頁呈現時的控制項ID,

把它們存放在一個HiddenField內:

protected void GridView1_PreRender(object sender, EventArgs e)
{   
   foreach(GridViewRow row in GridView1.Rows)
   {
      this.HiddenField1.Value += row.Cells[5].FindControl("TextBox1").ClientID+",";
   }
}

然後javascript再從HiddenField內取出我們要的ID:

function ClientValidate(source, arguments) {
        
    var textBoxIds = document.getElementById("<%=HiddenField1.ClientID%>").value.split(',',<%=GridView1.Rows.Count%>);
      
    for(i=0;i<textBoxIds.length;i++)
    {
        //這裡寫我們要對這些控制項做的驗證動作   
    }     
}

還有另外一種比較簡單的做法,

不需要取得樣板欄位的正確ID,

但是使用上較有限制 : 必須是對同樣類型的控制項要做同樣的驗證!!!

因為這樣並沒有取得正確ID去指定要對那個控制項驗證,

直接只用javascript的做法:

function ClientValidate(source, arguments) {
        
    var grid = document.getElementById("<%=GridView1.ClientID%>");
    
    if (grid != null) 
    {
       var textBoxs = grid.getElementsByTagName("input");   
       for(i=0;i<textBoxIds.length;i++)
       {
         //這裡寫我們要對這些控制項做的驗證動作   
       }  
    }   
}