ピースペース

MVC5 SPAを別ドメインのページで利用してみる

leave a comment »

MVC5のTemplateで作成したknockoutなSPA
は、一旦ロードしてしまえばその後のサーバーアクセスはWebAPIだけになる。
は、別サイトのページでも簡単に使えるようにできるんでね? を試してみた。

すったもんだして結果は問題なく動いた。
これができる。はSPAする動機になるな。アプリ変換考えても…SPAでしょ!

変わるところは、

・ SPAなViewをreturn PartialViewするAction, Viewを追加する(ajax対応にする)
・ SPAコードがアクセスするwebAPIのurlを絶対パスにする
・ ローカルページだとSPAのScriptはView内参照でも正常に動作するが、
別ドメインのページに読み込むと、scriptのロードが前後して想定とおり動作しない場合がある
ので、SPAなscriptはscriptで着実に順番通りロードされるようにする方がよさげ
・ もちろん、この外部ページからアクセスされるaction、apiはCORS対応しておく

だいたいこんな感じ
viewをloadする>scriptをloadする>runする それだけ

<div id="spa-panel"></div>
<script type="text/javascript">
     $(function () {
         loadYYYY();
     });

     function loadYYYY() {
         var url = ‘http://xxxx.azurewebsites.net/yyyy/spa’
         $.ajax({
             url: url,
             dataType: ‘html’,
             success: function (view) {
                 $(‘#spa-panel’).html(view);
                 $.getScript("http://xxxx.azurewebsites.net/bundles/knockout", function () {
                    $.getScript("http://xxxx.azurewebsites.net/bundles/yyyyjs", function () {
                       runYYYY(""http://xxxx.azurewebsites.net");  //apiホストを注入して起動する
                    });
                 });
             }
         });
     }
</script>

Written by nasu38yen

2015年8月7日 @ 9:42 AM

カテゴリー: .NET

Tagged with

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。