913 views(since 2013/10/08)

Backborn.jsのTodosアプリでAzure SQL(クラウド)+MVC5(VS2013)の組み込み。

前回

VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Backborn.js でTodos のサンプルを組み込んでみた。

今回

前回はBackborn.js(MVVMフレームワーク)+Todosアプリは、JavaScriptのローカル変数で動作するものでしたが、今回はデータをデータベース(SQL Server, Azure SQL)に保管してみます。

以下が完成したもの。Windows Azureでホスティング、 SQL Azureのデータベースを使用しています。

Web Siteは以下です。

http://vs-samples.azurewebsites.net/Home/Todos_WebAPI

 MVC5_VS2013_Backborn_SQLAzure0010

前回作成した、Todo に以下の処理を行います。

サンプルコードは以下のGitHubに保存しました。

https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI

MVC5のRESTfulの、サービスを実装します。このサーバ再度のWeb APIでクライアントサイドのBackborn.js と通信します。

  1. データの型を定義します。 Models/Todo.cs
    ※重要1)ビルドしておきます。 ビルドしていないと次の新規作成のときにClassを参照できない
    ※重要2)Entity Frameworkのバージョンの挙動の違い
    title, order, done はBackborn.js のTodoモデルでは頭が小文字なので、
    C#側のモデルも頭を小文字にしておかないといけない。
    Entity framework5(VS2012)は頭が大文字でも小文字に自動的にしているようですが、
    Entity Framework6(VS2013)から頭がそのまま、大文字でくるのでBackborn.js側で違う項目と判断して、データ表示がうまくできないです。
    MVC5_VS2013_Backborn_SQLAzure0020
  2. 新しくスキャルフォールディングされたアイテムを選択します。
    MVC5_VS2013_Backborn_SQLAzure0030
  3. 「Entity Framework を使用したアクションがあるWeb API2 コントローラー」を選択します。
    MVC5_VS2013_Backborn_SQLAzure0040
  4. 完了すると「ApiController(TodosController)」が作成されます。
    MVC5_VS2013_Backborn_SQLAzure0050
  5. RESTfulなApiControllerがきのうするか実行してみます。
    テストURL
    http://localhost:50262/api/todos
    以下のようにJSONがダウンロードされてきます。
    MVC5_VS2013_Backborn_SQLAzure0060
    ※ちなみに、Entity Frameworkのコードファーストなので、自動的にテーブルも作成されます。
    MVC5_VS2013_Backborn_SQLAzure0070
  6. Backborn.js のTodoのモデルをローカルストレージからRestfulなAPIに変更します。

    //localStorage: new Backbone.LocalStorage(“todos”),
    url: function () { return ‘/api/todos’; },

    MVC5_VS2013_Backborn_SQLAzure0080

  7. これで実行すると以下のようにローカルのSQLサーバと接続されます。
    MVC5_VS2013_Backborn_SQLAzure0010
  8. SQL Azureに接続を変更します。
    Windows Azure管理ポータルでデータベースを作成します。
    まずはローカルでテストしたいので、「この IP アドレス用に Windows Azure ファイアウォール ルールを設定する」を設定しておきます。
    その後、「ADO.Net、ODBC、PHP、および JDBC の SQL データベース接続文字列を表示する」で接続文字列を表示します。
    MVC5_VS2013_Backborn_SQLAzure0090
  9. ADO.NET を接続文字列をコピーします。
    MVC5_VS2013_Backborn_SQLAzure0110
  10. Web.config の接続文字列を以下のようにAzureように書き換えます。
    MVC5_VS2013_Backborn_SQLAzure0120
    <connectionStrings>

    <!–Local DB–>
    <!–<add name=”Backborn_Todos_WebAPIContext” connectionString=”Data Source=(localdb)\v11.0; Initial Catalog=Backborn_Todos_WebAPIContext-20131031155459; Integrated Security=True; MultipleActiveResultSets=True; AttachDbFilename=|DataDirectory|Backborn_Todos_WebAPIContext-20131031155459.mdf” providerName=”System.Data.SqlClient” />–>

    <!–SQL Azure–>
    <add name=”Backborn_Todos_WebAPIContext” connectionString=”Server=tcp:XXXXXXXXXX.database.windows.net,1433;Database=ZZZZZZZZZZ;User ID=EAPDB_User@XXXXXXXXXX;Password=YYYYYYYYYY;Trusted_Connection=False;Encrypt=True;Connection Timeout=30″ providerName=”System.Data.SqlClient” />

    </connectionStrings>

  11. 成功すると以下のようにWindows Azure Webサイト+SQL AzureでBackborn.js Todosアプリが動作します。
    http://vs-samples.azurewebsites.net/Home/Todos_WebAPI
    MVC5_VS2013_Backborn_SQLAzure0130

参考

ASP.NET Backbone Template 

Integrating Backbone.js with ASP.NET Web API

Single Page Application with Backbone.js and ASP.NET Web API

Filed Under: .NETAzureJavaScript

Tags:

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.