ASP.NET MVC 4 のブラウザオーバーライドを JavaScript から設定する

ASP.NET MVC 4 というか Web Pages 2 では、ブラウザのオーバーライド機能が追加されたことはみんな知っていると思います。知らなかった人は以下のブログ記事を 3 回ぐらい読んでおいてください。

Making a switchable Desktop and Mobile site with ASP.NET MVC 4 and jQuery Mobile - Scott HanselmanASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (2) - THE TRUTH IS OUT THERE - Site Home - MSDN Blogs

同じく ASP.NET MVC 4 というか Web Pages 2 で追加された Display Modes という機能を使って実装されてるんですが、よくサンプルで出てくる jQuery.Mobile.MVC では切り替え用のアクションに遷移して、リダイレクトで戻ってくるような実装になってます。

実際のところ、このブラウザのオーバーライド機能では、デフォルトではクッキーに .ASPXBrowserOverride という名前で User-Agent 文字列が保存されているだけなので、JavaScript だけで完結できそうですよね。*1

という訳で試しました。

// PC 版に切り替えるための UA
var ua = 'Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)';

// クッキーの有効期限は標準と同じく 7 日間
var expires = new Date();
expires.setDate(expires.getDate() + 7);

// クッキーを書き込む
document.cookie = '.ASPXBrowserOverride=' + encodeURIComponent(ua) + '; expires=' + expires.toUTCString() + '; path=/';

// ページを再読み込み
location.reload();

通常はスマホ版のページから PC 版のページに切り替えるケースだと思うので、UA を PC 向けのものにしています。当たり前ですがリロードしないと反映されないので注意です。

元に戻したい場合にはクッキーを削除すればいいです。

// 有効期限を過去にする
document.cookie = '.ASPXBrowserOverride=; expires=' + new Date(0).toUTCString() + '; path=/';

// ページを再読み込み
location.reload();

専用のコントローラを用意する必要がなく、さらにリダイレクトもさせることなく切り替えが出来るのは、無駄なリクエストの削減の観点からも良いと思います。

追記

上記の例ではクッキーの操作に直接 DOM を触っていましたが、jQuery Cookie という素晴らしいプラグインがあったので、こっちを使うように修正してみました。

var ua = 'Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)';

$.cookie(".ASPXBrowserOverride", ua, { expires: 7, path: '/' });
            
location.reload();

そしてクッキーの削除もメソッドが用意されているので簡単です。

var cookie = $.cookie(".ASPXBrowserOverride");
                
if (cookie) {
    $.removeCookie(".ASPXBrowserOverride");
                    
    location.reload();
}

クッキーの存在確認が簡単にできるので、スマホ版に戻すボタンの表示処理まで JavaScript で簡単に完結することができますね。

*1:System.Web.WebPages の CookieBrowserOverrideStore クラスを参照