この投稿は One ASP.NET Advent Calendar 2013 24日目の記事です。前日は neuecc さんでした。

Classic ASP(VBScriptで動くアレです）と ASP.NET の混在しているサイトを普段扱ってます。未だに Classic ASP 使っている人はほとんどいないと思うのですが、10年以上保守しているサイトでそこそこ規模が大きいため現在に至っている感じです。VBScript は本当に辛いのでどうにかしたいんですが、作り直す予算も無いしどうしようも無い。

さて、愚痴はこの辺にしておいて、今日は ASP.NET を .NET Framework 3.5 で使用したときの注意すべき TIPS を３つご紹介します。Web Forms の話です。

１．マスターページを使うとIDが変わる

問題

例えば次のようなチェックボックスを含むページがあります。

<asp:Button ID="changeCheckButton" runat="server" Text="チェックボックス切り替え" />

このページをブラウザで確認すると、通常は次のようになります。

<input type="submit" name="changeCheckButton" value="チェックボックス切り替え" id="changeCheckButton" />

ところがマスターページを指定して、ブラウザで確認すると次のようにIDが変わります。

<input type="submit" name="ctl00$ContentPlaceHolder1$changeCheckButton" value="チェックボックス切り替え" id="ctl00_ContentPlaceHolder1_changeCheckButton" />

問題の例

例えばチェックボックスの切り替えをするボタンとして、jQuery で次のように書いたとします。するとIDが変わっているので、チェックボックスが切り替わりません。

jQuery(function () {
    $('#changeCheckButton').on('click', function () {
        $('input:checkbox').prop('checked', function (i, val) {
            return !val;  //各チェックボックスのチェック状態を反転します。
        });
        return false;
    });
});

問題のサンプルページ

http://ac2013-dotnet35.azurewebsites.net/masterpage/before.aspx

対処

ポストバックの処理が必要なければ、 <asp:Button> から <input> に変更してあげればIDは変わりません。ただポストバックの処理がどうしても必要なときは、jQuery 側で後方一致するように書いてあげましょう

jQuery(function () {
    $('input[id$=_changeCheckButton]').on('click', function () {
        $('input:checkbox').prop('checked', function( i, val ) {
            return !val;  //各チェックボックスのチェック状態を反転します。
        });
        return false;
    });
});

対処のサンプルページ

http://ac2013-dotnet35.azurewebsites.net/masterpage/after.aspx

ASP.NET 4 からならば…

Control.ClientIDMode プロパティを Static にすれば、変わらなくなります。便利ですね…

http://msdn.microsoft.com/ja-jp/library/system.web.ui.control.clientidmode%28VS.100%29.aspx

２．LinkButton を disabled しても無効っぽく見えない

問題

LinkButton に CSS を当てて、マウスオーバーしたときに背景を黄色くしています。

<style>
    a.linkClass:hover {
        background-color:yellow;
    }
</style>

  ... 中略 ...

<asp:LinkButton ID="LinkButton1" runat="server"
    CssClass="linkClass">LinkButton</asp:LinkButton>

問題の例

とある条件で LinkButton を無効にしたく、次のように Enabled に False を設定します。

<asp:LinkButton ID="LinkButton2" runat="server"
    CssClass="linkClass" Enabled="False">LinkButton</asp:LinkButton>

すると、リンクではなくなりますが、マウスオーバーすると背景が黄色くなるのは残ります。生成される HTML は次の通りです。CSS が残っているので当然ですね。

<a id="LinkButton2" disabled="disabled" class="linkClass">LinkButton</a>

問題のサンプルページ

http://ac2013-dotnet35.azurewebsites.net/linkdisabled/before.aspx

対処

CSS で disabled ならば、背景等をリセットするようにします。ついでに文字色も灰色にして無効っぽくします。

<style>
    a[disabled=disabled],
    a[disabled=disabled]:hover,
    a[disabled=disabled]:focus {
        pointer-events: none;
        cursor: default;
        color: gray;
        text-decoration: none;
    }
</style>