SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)(AD)

ASP.NET 5に対応したComponentOne Studio for ASP.NET MVCを試してみよう

  • X ポスト
  • このエントリーをはてなブックマークに追加

商品管理アプリケーション(2)

データベースの構築

 次に、モデルクラスからデータベースのテーブルを作成してみましょう。この作業は、Entity Frameworkのコマンドを使用して実行します。

リスト3 データベースの構築
> cd <プロジェクトのルートフォルダ>
> dnu restore
> dnx ef migrations add Initial
> dnx ef database update

 実行したコマンドを見ていきましょう。

(1)cd <プロジェクトのルートフォルダ>

 コマンドはプロジェクトのルートフォルダで実行する必要があるため、cdコマンドで移動しています。

(2)dnu restore

 dnuとは、DNX Utilityツールのことで、アプリケーションのパッケージに関する操作を行ってくれます。restoreコマンドを指定することで、依存関係のあるパッケージを検出し、ローカルに存在しないものはダウンロードして配置する一連の作業を行います。

(3)dnx ef migrations add Initial

 このefとはEntity Frameworkのことであり、Entity Frameworkの一連の作業を行います。ここで新たに追加したProductモデルをデータベースに登録するための処理をXXXX_Initial.csというファイル名で作成し、「Migrations」フォルダ以下に保存します。

(4)dnx ef database update

 最後に、登録されているマイグレーションファイルを実行し、データベースに反映します。

スキャフォールディングで作成されたCRUD画面

 これでデータベースと連携した商品管理アプリケーションが動作するようになりました。Visual Studioのメニュー「デバッグ」-「デバッグの開始」を選択し、実行させてみましょう。デフォルトで設定されているブラウザが起動します。URLのパスに「/Products」と入力して、スキャフォールディングで作成された商品一覧画面を表示させます。

http://localhost<:Port>/Products

 次のように、商品の一覧が表示されます。「Create New」で商品の登録画面に遷移しますので、いくつか商品を登録してみてください。

スキャフォールディングにより生成された一覧表示画面
スキャフォールディングにより生成された一覧表示画面

FlexGridを利用した一覧表示(コントローラ)

 次に、FlexGridコントロールを利用して、登録された商品の一覧を表示し、編集や新規追加を行うことのできる画面を作成します。Productsコントローラを作成した時と同様の手順で作成します。コントローラ名は「C1ProductsController」としました。

 作成したコントローラは次にように実装しました。更新や新規作成部分についてはサンプルコードをご覧ください。

リスト4 FlexGrid用コントローラクラス(C1ProductsController.cs)
// 省略
using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
namespace C1Mvc6.Controllers
{
  public class C1ProductsController : Controller
  {
    private ApplicationDbContext _context;
    public C1ProductsController(ApplicationDbContext context)
    {
      _context = context;
    }
    // GET: C1Products
    public IActionResult Index()
    {
      return View();
    }
    // 商品データをJSON形式で返す
    public IActionResult Index_Bind([C1JsonRequest] CollectionViewRequest<Product> requestData)
    {
      var model = _context.Product.ToList();
      return this.C1Json(CollectionViewHelper.Read(requestData, model));
    }
    // 商品データの更新
    public IActionResult Edit_Bind([C1JsonRequest] CollectionViewEditRequest<Product> requestData)
    {
      // 省略
    }
    // 商品データを新規作成
    public IActionResult Create_Bind([C1JsonRequest] CollectionViewEditRequest<Product> requestData)
    {
      // 省略
    }
  }
}

 Indexアクションは空のViewを返していますが、これは、FlexGridコントロールはJSON形式でデータをやり取りできるので、アクションとしてデータを渡す必要がないためです。実際のデータは、その下にある「Index_Bind」アクションで返しています。同様にデータを更新する場合には「Edit_Bind」、新規作成する場合には「Create_Bind」アクションとして定義しています。

 ComponentOne Studio for ASP.NET MVCには、FlexGridなどのデータ連結コントロールでデータを操作するための仕組みとしてCollectionViewが実装されています。このCollectionViewは、実際のデータ操作をラッピングするレイヤを提供し、ソート、フィルタ、グループ化などの様々な操作を実現します。CollectionViewの機能など詳細な情報は、CollectionViewをご覧ください。

FlexGridを利用した一覧表示(ビュー)

 次にビューの定義を紹介します。ASP.NET MVC 6から導入されたタグヘルパーを使用してFlexGridの実装を行います。

リスト5 FlexGrid表示ビュー(Views\C1Products\Index.cshtml)
@using C1.Web.Mvc.Grid
@model IEnumerable<C1Mvc6.Models.Product>
@{
  ViewData["Title"] = "C1Products";
}
<h2>C1Products</h2>
<c1-flex-grid auto-generate-columns="false" height="400px" width="600px"
  class="grid" is-read-only="false" allow-add-new="true"
  allow-sorting="true" selection-mode="@((SelectionMode.Cell))">
  <c1-items-source read-action-url="@Url.Action("Index_Bind")"
    update-action-url="@Url.Action("Edit_Bind")"
    create-action-url="@Url.Action("Create_Bind")"></c1-items-source>
  <c1-flex-grid-column binding="Name"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Price" format="c"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Supplier"></c1-flex-grid-column>
</c1-flex-grid>

 先頭のusing句でComponentOne Studio for ASP.NET MVCのFlexGridを指定しています。先ほどコントローラで定義したIndex_Bindアクションは、<c1-items-source>タグのread-action-urlで指定しています。同様に作成、更新、削除はcreate-action-url、update-action-url、delete-action-urlで指定します。

 <c1-flex-grid-column>ではテーブルのカラムとグリッドの列を割りあてます。カラム名はbinding属性で指定し、format属性で書式設定することもできます。

 タグ名や属性名は長いものが多いですが、FlexGridを始めとしてタグヘルパーに対応したコントロールすべてでインテリセンスに対応しているため、指定可能なタグや要素は即座に指定可能になっています。いろいろな値を指定して動作が変わることを確認してみてください。FlexGridの豊富な機能を詳しく知りたい方は、FlexGridをご覧ください。

 それではデバッグを開始し、実際の画面を見てみましょう。URLのパスに「/C1Products」と入力して、FlexGridを使用した商品一覧画面を表示させます。

http://localhost<:Port>/C1Products
FlexGridを利用した画面表示例
FlexGridを利用した画面表示例

 ソートやセル単位での選択などが動作することを確認してみてください。

まとめ

 本記事では、ComponentOne Studio 2015J v3で対応したいくつかの機能について、ASP.NET 5 MVC 6で実装する例を、サンプルを交えて紹介しました。

 ComponentOne Studioでは、ASP.NET 5対応以外でも多くの点で改良が加えられていますが、やはり開発中であるAPS.NET 5の最新機能と組み合わせるとどのようなメリットがあるのかも気になるところです。この機会に、次世代のASP.NET開発環境に今から触れてみてはいかがでしょうか?

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9270 2021/03/29 14:30

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング