使用するWebアプリについて
今回のサンプルとして利用するWebアプリは、ASP.NET CoreのASP.NET MVCプロジェクトのテンプレートを再利用して作成します。
Modelクラス
今回のアプリは、表示に利用するサンプルデータが必要になります。
そこで、プロジェクトのModelフォルダー内に以下のようなSampleModelクラスを追加します。
using System;
using System.Collections.Generic;
using System.Linq;
namespace C101MvcApp.Models
{
// Chart用サンプルエンティティ
public class DailySale
{
public DateTime Date { get; set; }
public int? TotalSales { get; set; }
public int? AsiaSales { get; set; }
public int? JapanSales { get; set; }
}
// サンプルモデルクラス
public class SampleModel
{
// チャートに表示する値は乱数から作成
private static readonly Random rand = new Random(0);
// チャートに表示するデータ
public IEnumerable<DailySale> Sales { get; } = Enumerable.Range(0, 92)
.Select(index => new DailySale()
{
Date = new DateTime(DateTime.Today.Year, 1, 1).AddDays(index),
JapanSales = rand.Next( 0, 100),
AsiaSales = rand.Next(100, 200),
TotalSales = rand.Next(200, 300)
});
// Guageに表示するデータ
public int GuageValue { get; set; } = 30;
// InputNumberのデータ
public int InputValue { get; set; } = 567;
// InputDatetimeのデータ
public DateTime InputDatetime { get; set; } = DateTime.Now;
// MultiAutoCompleteのデータ
public List<string> Todofuken { get; set; } = new List<string>
{
"Hokkaido",
"Aomori", "Iwate", "Miyagi", "Akita", "Yamagata", "Fukushima",
"Ibaraki", "Tochigi", "Gunma", "Saitama", "Chiba", "Tokyo", "Kanagawa",
"Niigata", "Toyama", "Ishikawa", "Fukui", "Yamanashi", "Nagano", "Gifu", "Shizuoka", "Aichi",
"Mie", "Shiga", "Kyoto", "Osaka", "Hyogo", "Nara", "Wakayama",
"Tottori", "Shimane", "Okayama", "Hiroshima", "Yamaguchi",
"Tokushima", "Kagawa", "Ehime", "KOchi",
"Fukuoka", "Saga", "Nagasaki", "Kumamoto", "Oita", "Miyazaki", "Kagoshima", "Okinawa",
};
}
}
Controllerクラス
今回のアプリはテンプレートで作成したアプリを極力再利用したいと思います。
Controllersフォルダー内にある、テンプレートで自動生成されたHomeControllerクラスのアクションメソッドIndexメソッドを、以下のように加工します。
public IActionResult Index()
{
var source = new SampleModel();
return View(source);
}
View
Views\Homeフォルダー内にある、こちらもテンプレート自動生成されたIndex.cshtmlファイルを以下のように加工します。
@model SampleModel
@{
ViewData["Title"] = "ComponentOne MVC Page";
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<Style>
.chart-title {
background-color: darkblue;
}
.guage-title {
background-color: darkgreen;
}
.number-title {
background-color: darkcyan;
}
.calendar-title {
background-color: darkred;
}
.autocomplete-title {
background-color: darkgoldenrod;
}
.title {
color: white;
}
h2 {
font-size: 30px;
font-weight: 700;
line-height: 30px;
margin-bottom: 50px;
text-transform: uppercase !important;
font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.control-item {
margin: auto;
}
</Style>
<div class="row wrap">
<div class="col-md-4 chart-title title">
<h2>FlexChart</h2>
</div>
<div class="col-md-8 control-item">
<c1-flex-chart binding-x="Date" chart-type="Area">
<c1-items-source source-collection="Model.Sales" />
<c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
<c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
<c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
</c1-flex-chart>
</div>
</div>
<div class="row wrap">
<div class="col-md-4 guage-title title">
<h2>Guage</h2>
</div>
<div class="col-md-8 control-item">
<c1-radial-gauge min="0" max="100"
start-angle="-20" sweep-angle="220"
width="500" height="200"
show-text="None" value="Model.GuageValue">
<c1-gauge-range min="0" max="40" color="red" />
<c1-gauge-range min="40" max="80" color="yellow" />
<c1-gauge-range min="80" max="100" color="green" />
</c1-radial-gauge>
</div>
</div>
<div class="row wrap">
<div class="col-md-4 number-title title">
<h2>InputNumber</h2>
</div>
<div class="col-md-8 control-item">
<c1-input-number value="Model.InputValue"
show-spinner="true"
step="10" format="n0"
min="0" max="1000"
placeholder="１～1000までの値を入力してください。">
</c1-input-number>
</div>
</div>
<div class="row wrap">
<div class="col-md-4 calendar-title title">
<h2>InputDateTime</h2>
</div>
<div class="col-md-8 control-item">
<c1-input-date value="Model.InputDatetime"
min="DateTime.Today.AddYears(-1)"
max="DateTime.Today.AddYears(1)">
</c1-input-date>
</div>
</div>
<div class="row wrap">
<div class="col-md-4 autocomplete-title title">
<h2>MultiAutoComplete</h2>
</div>
<div class="col-md-8 control-item">
<c1-multi-auto-complete selected-index="12"
max-selected-items="5">
<c1-items-source source-collection="Model.Todofuken" />
</c1-multi-auto-complete>
</div>
</div>
ComponentOne Studio for ASP.NET MVCのプログラミングについて
ComponentOne Studio for ASP.NET MVCでは、各コントロールをTag Helperで表現できます。つまり、デザイナーなどがViewの作成を行う際、従来行われていたC#ライクなRazor構文を習得していなくとも、HTMLと同様のタグを用いてコーディングできるため、高機能なコントロールを用いた表現を手軽に作成することができます。
<c1-flex-chart binding-x="Date" chart-type="Area">
<c1-items-source source-collection="Model.Sales" />
<c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
<c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
<c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
</c1-flex-chart>
Visual Studio 2017では、Tag HelperにおいてもIntellisenseによるコーディングのサポートが行われます。
ComponentOne Studio for ASP.NET MVCの持つTag Helperを利用する場合には、Viewsフォルダーにある_ViewImports.cshtmlや、Views\Sharedフォルダーにある_Layout.cshtmlなどの共通で参照されるファイルの中に以下のような記述を追記することでIntellisenseが有効な状態でコーディングを行うことができます。
後述する「C1 ASP.NET Core MVCプロジェクトテンプレート」のウィザードを使用してプロジェクトを作成すると、テンプレートの中でこれらの設定が行われています。
@addTagHelper *, C1.AspNetCore.Mvc @addTagHelper *, C1.AspNetCore.Mvc.FlexSheet
Intellisenseが利用できることで、コーディング中に要素名や属性名の入力補完が行われるので、必要なパラメータの設定を簡単に行うことができます。
Razor構文によるコーディングに慣れている開発者の方は、従来通りのHtml Helperによるコーディングもサポートされています。
ComponentOne Studio for ASP.NET MVCの Html Helperは、コントロールに対するパラメータの設定にGoFのBuilderパターンを使用します。
具体的には、以下のようにメソッドチェーンによって、必要なパラメータを追加記述することで表示の制御を行うことができます。
@(Html.C1().FlexChart()
.Bind("Date", Model.Sales)
.ChartType(C1.Web.Mvc.Chart.ChartType.Area)
.Series(sers =>
{
sers.Add().Binding("TotalSales").Name("総売り上げ");
sers.Add().Binding("AsiaSales").Name("アジアの売り上げ");
sers.Add().Binding("JapanSales").Name("日本の売り上げ");
}))
