C# - WebForm開發一點訣，處理RadioButton單選時的應變處理

其實筆者對於WebForm的開發經驗沒有像用MVC這麼的多，因為一開始的接觸時，筆者就已經開始玩起MVC這樣的開發模式了。不過也是因為工作，有接觸到WebForm這樣的架構。一般初學者對於WebForm的許多類別的運用，常常會摸不著頭緒，尤其是表單這一個部分。本文要介紹的是RadioButton這個物件。它其實就是表單上單選項的Radio，不過很多人會遇到一個問題，有時候不知道要怎麼去改變name的名稱，或者是id名稱。就讓筆者來好好的一一講解。

RadioButton產生出來的ID，是經過運算產生的，如果是要改變ID名稱，第一個方法是透過RadioButton裡的ClientIDMode。
例如下面的例子：

<asp:GridView ID="radioList" runat="server" AutoGenerateColumns="False" Width="100%" CssClass="my_table" BorderStyle="None" BorderWidth="0" GridLines="None" OnRowDataBound=" radioList_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <HeaderStyle CssClass="title_td" />
            <AlternatingRowStyle CssClass="bg" />
            <asp:RadioButton ClientIDMode="Static" name="rbItem" ID="rbItem" runat="server" GroupName="Items" CssClass="rd"/>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

在上面asp:RadioButton標籤之中，會看到一個ClientIDMode，ClientIDMode有四種設定字串，它分別的意思：

• AutoID - ClientID 值是透過串連每個父命名容器的 ID 值與控制項的 ID 值產生。 在呈現控制項之多個執行個體的資料繫結情節中，遞增值會插入控制項之 ID 值的前面。 各區段是以底線字元 (_) 分隔。 這是在比 ASP.NET 4 還舊版本中唯一可以使用的演算法。

• Inherit - 該控制項可以繼承ClientIDMode設定其NamingContainer控制項。

• Predictable - 這個演算法用於資料繫結控制項中的控制項。 ClientID 值是透過串連父命名容器的 ClientID 值與控制項的 ID 值產生。 如果控制項是資料繫結控制項，並且會產生多個資料列，則 ClientIDRowSuffix 屬性中指定之資料欄位的值會加入結尾處。 針對 GridView 控制項，可以指定多個資料欄位。 如果 ClientIDRowSuffix 是空屬性，則會在結尾處加入序號，而不是資料欄位值。 各區段是以底線字元 (_) 分隔。

• Static - ClientID 值設定為 ID 屬性的值。 如果控制項是命名容器，則對於其包含的所有控制項而言，會用來做為命名容器之階層架構的最上層。

當ClientIDMode的字串設定為"Static"時，就可以在cs底下的物件ID更改名稱。

protected void radioList_RowDataBound(object sender, GridViewRowEventArgs e)
{
    var rbItem = e.Row.FindControl("rbItem") as RadioButton;
    rbItem.ID = "rdItem";
}

另一個方法，是jQuery可以將頁面上任何的radio裡有類似以Items為組合字的每個radio都跑過一遍，所以我們可以透過下面的方式，把所有的id都統一。
<script type="text/javascript">
$("input[name$='Items']:radio").each(function () {
    $(this).attr("id", "rdItem");
});
</script>

所以結果就會是如下面執行前跟執行後的變化：

－執行前－
<span class="rd"><input id="C_C_gvPreAppList_rbItem_0" type="radio" name="ctl00$ctl00$C$C$ radioList$ctl02$Items" value="rdItem" /></span>

－執行後－
<span class="rd"><input id="rbItem" type="radio" name="ctl00$ctl00$C$C$ radioList$ctl02$Items" value="rdItem" /></span>

改Input底下Name的名稱，通常還是只能靠JavaScript或jQuery。同樣的，RadioButton產生出來的Name，是經過運算產生的，所以產生出來的值都不一樣，這樣在Form底下是無法有單一控制這樣的效果，所以要經過一道程序來統一名稱，下面的方法，跟更改ID很雷同，只是字串要改成"id"。

<script type="text/javascript">
 $("input[name$='Items']:radio").each(function () {
    $(this).attr("name", "rbItem");
});
</script>

－執行前－
<span class="rd"><input id="rbItem" type="radio" name="ctl00$ctl00$C$C$ radioList$ctl02$Items" value="rdItem" /></span>

－執行後－
<span class="rd"><input id="rbItem" type="radio" name="rdItem" value="rdItem" /></span>

有一點要注意的事，jQuery新舊版有方法上執行的差異，舊版的採用attr，新版採用prop，需要到官網查詢使用的版本來對照，如下例子：

舊版：
$(this).attr("id", "rdItem");
$(this).attr("name", "rdItem");

新版：
$(this).prop("id", "rdItem");
$(this).prop("name", "rdItem");


要將所有的radio監聽每個點下去觸發事件的程式寫法如下：
<script type="text/javascript">
$('input[type=radio]').bind('click', function () {
    alert("選擇radio的name" + $(this).attr('name'));
}
</script>

下面這方法也是會對每一個radio都監聽，但是比較適用在已經checked時候，要做的判斷，字串中的Items就是每一個name上面有相似的Items都會觸發，例如頁上面同時有radioList$ctl01$Items、radioList$ctl02$Items的時候：
<script type="text/javascript">
var radioName = "";
$("input:radio[name$='Items']").click(function () {
    radioName = $("input:radio[name$='Items']:checked").attr("name");
}
</script>

-雲遊山水為知已逍遙一生而忘齡- 電腦神手