ASP.NET MVC コントロールヘルプ
クイックスタート：FlexPie へのデータの追加
コントロールの使用 > FlexPie > クイックスタート：FlexPie へのデータの追加

このセクションでは、MVC Web アプリケーションに FlexPie コントロールを追加し、そこにデータを追加する方法について説明します。

このトピックは3つの手順で構成されます。

次の図は、上記の手順を実行した後の FlexPie を示しています。

手順 1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

手順 2：FlexPie のデータソースの作成

  1. ［モデル］フォルダに新しいクラスを追加します（例：FlexPieDataSource.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。

  2. 次のコードを新しいモデルに追加して、FlexPie コントロールのデータソースになるクラスを定義します。

    C#
    コードのコピー 
    public class FlexPieDataSource
 {
   public string Country { get; set; }
   public int Sales { get; set; }

 public static IEnumerable<FlexPieDataSource> GetData()
  {
    var countries = new[] { "US", "UK",   "China", "France", "German", "Italy" };
    var rand = new Random(0);
    List<FlexPieDataSource> list = new List<FlexPieDataSource>();
     for (int i = 0; i < 6; i++)
      {
        var sales = rand.Next(1, 5);
        list.Add(new FlexPieDataSource {  Sales = sales, Country = countries[i] });
            }
            return list;
        }
    }
    VB
    コードのコピー 
    Public Class FlexPieDataSource
    Public Property Country() As String
        Get
            Return m_Country
        End Get
        Set
            m_Country = Value
        End Set
    End Property
    Private m_Country As String
    Public Property Sales() As Integer
        Get
            Return m_Sales
        End Get
        Set
            m_Sales = Value
        End Set
    End Property
    Private m_Sales As Integer

    Public Shared Function GetData() As IEnumerable(Of FlexPieDataSource)
        Dim countries = New String() {"US", "UK", "China", "France", "German", "Italy"}
        Dim rand = New Random(0)
        Dim list As New List(Of FlexPieDataSource)()
        For i As Integer = 0 To 5
            Dim sales = rand.[Next](1, 5)
            list.Add(New FlexPieDataSource() With {
                Key.Sales = sales,
                Key.Country = countries(i)
            })
        Next
        Return list
    End Function
End Class
先頭に戻る

手順 3：FlexPie コントロールの追加

FlexPie コントロールを初期化するには、次の手順を実行します。

新しいコントローラーの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。
  3. ［コントローラーの追加］ ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します（例：QuickStartController）。
    2. ［MVC 5 コントローラー -空］テンプレートを選択します。
    3. ［追加］をクリックします。

  4. 次に示すように MVC 参照を追加します。

    C#
    コードのコピー 
    using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
using C1.Web.Mvc.Chart;

  5. メソッド Index() を次のメソッドに置き換えます。

    C#
    コードのコピー 
    public ActionResult QuickStart()
{
    return View(FlexPieDataSource.GetData());
}
    VB
    コードのコピー 
    Public Function QuickStart() As ActionResult
Return View(FlexPieDataSource.GetData())
End Function

ビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラー QuickStartControllerをダブルクリックして開きます。
  2. メソッド QuickStart() 内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名が QuickStart で、ビューエンジンが Razor（CSHTML）であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。

  6. FlexPie コントロールをビュー QuickStart で次のようにインスタンス化します。

    Index.cshtml
    コードのコピー 
    @using MvcApplication1.Models
@model IEnumerable<FlexPieDataSource>
@(Html.C1().FlexPie<FlexPieDataSource>()
.Bind("Country", "Sales", Model)
)
    Index.vbhtml
    コードのコピー 
    @ModelType IEnumerable(Of FlexPieDataSource)

@(Html.C1().FlexPie(Of FlexPieDataSource) _
.Bind("Country", "Sales", Model) _
.Height("300px"))

先頭に戻る

手順 4：プロジェクトのビルドおよび実行

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］ キーを押してプロジェクトを実行します。
    ブラウザのアドレスバーで、生成された URL にフォルダ名とビュー名を追加して（例：http://localhost:1234/QuickStart/QuickStart）、ビューを表示します。
先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.