Category: EntitiyFramework

SPA(Single Page Application) for knockout.js + TwitterBootstrap + Sammy.js + SQL Azure + Visual Studio2013

概要 Mobile(携帯)、PC/Tabletでも動作し、かつローカルアプリのように”さくさく”動かすためにには JavaScriptでSPAで、一生懸命かかないといけないです。 今回、簡単にSPA(Singe Page Application)ができるよに再利用可能な ベースクラスを作成してみました。 MITライセンスでご自由に改変して使ってください。 以下のサイトを事前にみておくと理解が早いです。 Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout) Knockout.js で Multiple View (Partial View) をエレガントに切り替える方法  要件 iPhone/Android/PC/Tabletで動作すること レシンポンシブルデザインにするためTwitterBootstrapを使用し各種端末に対応する。 SPAの実現のために、JavaScriptを使用する Jquery + Knockout.js を使用して各種端末に対応する。 戻るボタン等のURL履歴に対応のこと Sammy.js により、URL履歴に対応する。 デバックしやすくするためにVisual Studio 2013を使用する データベースはSQL Azureを使用する。 WebサイトはWindows Azure 簡易Webサイトを使用する。 Demo Web Site(デモサイト) http://vs-samples.azurewebsites.net/Home/SPA010 Program Source(プログラムソース) サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI イメージ 一覧画面 新規作成をクリックすると新規作成画面へ 明細をクリックすると更新画面へ 新規作成画面 更新画面 課題 データの読み込み時、更新時にLoading画面を表示してボタンを押せないようにする。 一覧画面にページング処理をいれる。 明細データの取得や設定のコードを書かないでいいように改良する。 入力時に日付等にデートピッカーをつける ソース抜粋 SPA010.cshtml.cshtml   knockout-SPA-0.1.1.js 参考 Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout) Knockout.js で Multiple View (Partial View) をエレガントに切り替える方法  [Sammy.js]URLによって処理を分割する  ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (2)  ASP.NET MVC 3 で jQuery Mobile を使ってみる (インデックス)  スマホ対応初心者に送るjQuery Mobileの使い方“超”入門  ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事  Twitter Bootstrap Button Generator  […]

Knockout.js でSQL Azureに一覧表示、データ更新のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap)

前回 Knockout.js でSQL Azureに一覧表示、データ追加のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap) 今回 Knockout.js でSQL Azureへ一覧表示とデータ更新するサンプルをVisual Studio2013で作りました。 以下はイメージです。 Eidtボタンを押すと編集モードになります。 Web Siteは以下です。 http://vs-samples.azurewebsites.net/Home/Knockout_WebAPI2 サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI Knockout_WebAPI2.cshtml 参考 Simple data binding with Knockout, Web API and ASP.Net Web Forms http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Forms.html Building a Knockout.js based client for Web API services in an ASP.NET MVC app http://www.devcurry.com/2013/08/building-knockoutjs-based-client-for_16.html Hello world, with Knockout JS and ASP.NET MVC 4! http://blogs.msdn.com/b/amar/archive/2012/12/12/hello-world-with-knockout-js-and-asp-net-mvc-4.aspx Building Single Page Apps with ASP.NET MVC4 – Part 1 – Basic Desktop Application http://bartjolling.blogspot.jp/2012/02/building-single-page-apps-with-aspnet.html

Knockout.js でSQL Azureに一覧表示、データ追加のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap)

前回 VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Knockout.js でTodos のサンプルを組み込んでみた。 今回 Knockout.js でSQL Azureへ一覧表示とデータ追加するサンプルをVisual Studio2013で作りました。 以下はイメージです。 Web Siteは以下です。 http://vs-samples.azurewebsites.net/Home/Knockout_WebAPI1 サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI Knockout_WebAPI1.cshtml 参考 Simple data binding with Knockout, Web API and ASP.Net Web Forms http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Forms.html Building a Knockout.js based client for Web API services in an ASP.NET MVC app http://www.devcurry.com/2013/08/building-knockoutjs-based-client-for_16.html Hello world, with Knockout JS and ASP.NET MVC 4! http://blogs.msdn.com/b/amar/archive/2012/12/12/hello-world-with-knockout-js-and-asp-net-mvc-4.aspx Building Single Page Apps with ASP.NET MVC4 – Part 1 – Basic Desktop Application http://bartjolling.blogspot.jp/2012/02/building-single-page-apps-with-aspnet.html

モダンWebサイト(One ASP.NET)の新しい認証システム(クレームベース認証対応)

標準でクレームベース認証のサポート、まってました!!  概要 Visual Studio 2013 から 新しい ASP.NET Identity が使えるようになった。 この認証システム基盤はマイクロソフトの戦略、One ASP.NET(マルチデバイス対応やモダンWebを実現するシステム)に基づいているようです。 Microsoft Blog (原文) Introducing ASP.NET Identity – A membership system for ASP.NET applications 特徴としては、 クレームベース認証(Claims Based)のサポート 古いけどこの辺がわかりやすいかも。 マイクロソフトのアイデンティティに関するビジョン ログイン連携 Microsoft Account, Facebook, Twitter and Google 、独自認証に対応 権限管理 認証済みかどうかだけではなく、ユーザの権限によってアクセス制限できる。 試しに Visual Studio 2013 RC でMVC5 プロジェクトを作成すると、認証系がそれで実装されます。 イメージは以下のような感じ ただ。 現在 Viausl Studio 2013 がまだRCである。 ということで、検索してもほとんど情報がないので、以下のような機能がアプリでは必要になるが自力で実装しないといけない。 機能例:ユーザがパスワード忘れたときに、リセットするサンプルがないので自作しないといけない。 以下の関数が使えそうだが、マニュアルすらまだないので手探りで作らないといけない。 Microsoft.AspNet.Identity PasswordManagerExtensions ResetPassword(this IPasswordManager manager, string tokenId, string newPassword); 以下が認証系で使用しているライブラリ using System.Security.Claims; using Microsoft.AspNet.Identity; using Microsoft.AspNet.Identity.EntityFramework; using Microsoft.AspNet.Identity.Owin; using Microsoft.Owin.Security;

Office用アプリ(Apps for Office)にクールなデザイン(Twitterbootstrap)を適用し, Facebook, Google等とログイン連携してみた。

概要 実際の製品としてアプリを作るには、いろんな細かいところを作らなければならないので、アプリを作成し検証してみました。 今回作成したサンプルは、後でGithub/CodeprexにUPする予定です。 詳細 ちなみに、今回はVisual Studio 2013 RC1 を使い開発しました。 なぜならば! 開発(プロジェクトテンプレート・デバック等)がかなり簡単だからだ!! 実際、わたしはこのコードを今日1日で書き上げることができた!!! だから、頑張れば誰でも出来るんです!!!(言い過ぎね!) わからなければ、わたしが、勉強会でやりますので来てくださいね、たぶん。 環境 Microsoft Office 2013 twitterBootstrap Visual Studio2013 RC1 with MVC5 Windows Azure, SQL Azure Login連携(Twitter, Facebook, Microsoft ID, Google) イメージ Office用アプリ(Apps for Office)の個別機能画面(見積、不動産管理、等の個別の機能) WebSiteの共通画面(認証、権限、顧客、等のマスター) ※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能 Visual Studio 2013 RC1 のプロジェクト及び、データベースの構成 ※Officeアプリ用のテンプレートを ASP.NET MVC5で作ります。 まずは機能要件を整理してみよう。 Tablet 等のモバイルにも対応するため、クッキーレス(cookieless)であることiPhone/iPad/Androidでも問題なく動作 様々なアカウントと連携したログイン機能を有すること(独自認証、Facebook, Google, Twitter, Microsoft ID) 整理されたメニューが必要 Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能) WebSiteの共通画面(認証、権限、顧客、等のマスター) そして非機能要件も整理してみよう。 デザインがかっこいい!(twitterbootstrap) クラウドで動く(Windows Azure, Azure Web Site)とりあえず、簡単にWebサーバをスケールアウト(増設)できるように、にセッションなしで開発しておこう!! 細かいのは順次ブログにかきますが。ログインのイメージを掲載しておきます。 ログイン-Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能) ログイン-WebSiteの共通画面(認証、権限、顧客、等のマスター)※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能 次回は細かいプログラム解説やるつもりです!!

クラウド(Windows Azure)で作ったアプリでデータがでない場合がある?そうかクラウドのデータベース(SQL Azure)はロードバランサーにより移動するのだ!!

クラウド(Windows Azure)にてアプリを動作させているのですが、 自分の操作中は問題ないのですが、たまに他の人から、データ出てこないよと言われます。 え、なんか操作ミスじゃないかと思っていました!! しかしながら、今日、その謎がとけました!! 理由 クラウドのデータベース(SQL Azure)は可溶性を保つために、ロードバランサーがデータベースの間にはいっており、適時切り替えられます。 ということは、プログラムから接続したセッション(コネクションプール)が無効になっており、再度セッションを張る必要があります。 なので、データ取得の再にエラーになった場合は、セッションが無効になっているので、再度セッションを張るプログラムが必要になる。 参考 SQL Azureへの接続(ADO.NET)では、再接続を考慮するhttp://sqlazure.jp/b/sqlazure/207/ Entity framework 6でのretry方法http://shiba-yan.hatenablog.jp/entry/20130913/1379048007