JSONデータを使ったレポート

Visual Studioで新しいプロジェクトを開きます（［ファイル］メニューから［新規作成］、［プロジェクト］を選択）。
［新しいプロジェクト］ダイアログが表示されます。［ActiveReports18.0J ページレポートアプリケーション］を選択し、ファイル名を「CustomerDetails」に変更します。
［OK］ボタンをクリックすると、ActiveReports16 ページレポートアプリケーションが新規作成されます。デフォルトでページレポートがプロジェクトに追加されています。
［ソリューションエクスプローラー］で、ページレポートのファイル名を「Customers.rdlx」に変更します。

レポートレイアウトの追加については、「クイックスタート」を参照してください。

［レポートエクスプローラ］で、［データソース］ノードを右クリックして［データソースの追加］を選択するか、［追加］（＋）ボタンをクリックして［データソース］を選択します。
表示される［レポートデータソース］ダイアログの［全般］ページで、データソースの名前を入力します。
［種類］フィールドで「Json Provider」を選択します。

同じページの［スキーマ］タブで、ラジオボタンから［埋め込み］を選択し、その下の欄に埋め込むスキーマを次のように入力します。

JSONスキーマ	コードのコピー
{ "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Customers": { "type": "array", "items": { "type": "object", "properties": { "Id": { "type": "string" }, "CompanyName": { "type": "string" }, "ContactName": { "type": "string" }, "ContactTitle": { "type": "string" }, "Address": { "type": "string" }, "City": { "type": "string" }, "PostalCode": { "type": "string" }, "Country": { "type": "string" }, "Phone": { "type": "string" }, "Fax": { "type": "string" } }, "required": [ "Id", "CompanyName", "ContactName", "ContactTitle", "Address", "City", "PostalCode", "Country", "Phone", "Fax" ] } }, "ResponseStatus": { "type": "object", "properties": {} } }, "required": [ "Customers", "ResponseStatus" ] }

JSONスキーマ

コードのコピー

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "properties": {
    "Customers": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "Id": {
            "type": "string"
          },
          "CompanyName": {
            "type": "string"
          },
          "ContactName": {
            "type": "string"
          },
          "ContactTitle": {
            "type": "string"
          },
          "Address": {
            "type": "string"
          },
          "City": {
            "type": "string"
          },
          "PostalCode": {
            "type": "string"
          },
          "Country": {
            "type": "string"
          },
          "Phone": {
            "type": "string"
          },
          "Fax": {
            "type": "string"
          }
        },
        "required": [
          "Id",
          "CompanyName",
          "ContactName",
          "ContactTitle",
          "Address",
          "City",
          "PostalCode",
          "Country",
          "Phone",
          "Fax"
        ]
      }
    },
    "ResponseStatus": {
      "type": "object",
      "properties": {}
    }
  },
  "required": [
    "Customers",
    "ResponseStatus"
  ]
}

メモ: 上記のスキーマは、JSONSchema.net（http://jsonschema.net/#/）で利用可能なJSON schema generatorを使用してcustomers.jsonデータ用に作成しました。

［OK］ボタンをクリックしてデータソース接続を保存します。

［レポートエクスプローラ］で、追加したデータソースのノードを右クリックして［データセットの追加］を選択するか、［追加］（＋）ボタンをクリックして［データセット］を選択します。
表示される［データセット］ダイアログで、［全般］ページを選択し、データセットの名前として「顧客」と入力します。
［クエリ］ページで、［クエリ］の横にある［JSONクエリデザイナで編集する］ボタンをクリックします。表示される［JSONクエリデザイナ］で[*]を選択し、［OK］ボタンをクリックすると、［クエリ］テキストボックスに次のようなクエリが得られます。
$.Customers[*]
［OK］ボタンをクリックしてダイアログを閉じます。データセットとクエリで作成したフィールドが子ノードとして［レポートエクスプローラ］に表示されます。

［レポートエクスプローラ］の［顧客］データセットのノードを開き、Idフィールドをドラッグしてレポートのデザイナ面へドロップし、［プロパティ］ウィンドウへと移動して各プロパティを次のように設定します。

プロパティ名	プロパティの値
Location	0.375in, 0.25in
FontSize	14pt
FontStyle	Italic
Size	4in, 0.375in

［ツールボックス］から、Tableデータ領域をドラッグして、デザイナ面へドロップし、［プロパティ］ウィンドウへと移動して各プロパティを次のように設定します。

プロパティ名	プロパティの値
Location	0.375in, 1in
Size	4.5in, 1.125in
FixedSize	4.5in, 1.125in

このTableの左側にある行ハンドルのいずれかを右クリックし、［テーブルのフッタ］を選択してテーブルフッタ行を削除します。
ポインタをTexBox5上でホバーさせると、フィールド選択用アイコン（五本線の入ったアイコン）が表れます。これをクリックして表示されるフィールドのリストから［CompayName］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「会社名」に変更します。
ポインタをTexBox6上でホバーさせると、フィールド選択用アイコンが表れます。これをクリックして表示されるフィールドのリストから［ContactName］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「担当者」に変更します。
ポインタをTexBox7上でホバーさせると、フィールド選択用アイコンが表れます。これをクリックして表示されるフィールドのリストから［Address］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「住所」に変更します。

［ソリューションエクスプローラー］からForm1を開きます。
Form1のタイトルバーをダブルクリックして、Form1_Loadイベントのイベント処理メソッドを作成します。

レポートにデータをロードし、ビューワにレポートを表示するために、Form1.cs内のInitializeComponentメソッドの後に次のコードをペーストします。

Form1.cs	コードのコピー
// レポートに妥当なデータを返す<see cref="PageDocument.LocateDataSource"/>のハンドラ private void OnLocateDataSource(object sender, GrapeCity.ActiveReports.LocateDataSourceEventArgs args) { object data = null; var dataSourceName = args.DataSourceName; var source = new DataLayer(); if (dataSourceName == "DataSource1") { data = source.CreateData(); } args.Data = data; } // レポートをロードして表示します。 private void Form1_Load(object sender, EventArgs e) { var rptPath = new System.IO.FileInfo(@"..\..\Customers.rdlx"); var definition = new GrapeCity.ActiveReports.PageReport(rptPath); definition.Document.LocateDataSource += OnLocateDataSource; viewer1.LoadDocument(definition.Document); }

Form1.cs

コードのコピー

// レポートに妥当なデータを返す<see cref="PageDocument.LocateDataSource"/>のハンドラ
        private void OnLocateDataSource(object sender, GrapeCity.ActiveReports.LocateDataSourceEventArgs args)
        {
            object data = null;
            var dataSourceName = args.DataSourceName;
            var source = new DataLayer();
            if (dataSourceName == "DataSource1")
            {
                data = source.CreateData();
            }
            args.Data = data;
        }
// レポートをロードして表示します。
        private void Form1_Load(object sender, EventArgs e)
        {
            var rptPath = new System.IO.FileInfo(@"..\..\Customers.rdlx");
            var definition = new GrapeCity.ActiveReports.PageReport(rptPath);
            definition.Document.LocateDataSource += OnLocateDataSource;
            viewer1.LoadDocument(definition.Document);
        }

このWebサービスは、プロジェクトに追加すると、JSONデータへのアクセス認証を行います。

［ファイル］メニューから［追加］、［新しいプロジェクト］を選択します。
表示される［新しいプロジェクトの追加］ダイアログで、ASP.NET Webアプリケーションを選択し、［名前］フィールドを「WebService」に変更します。
［OK］ボタンをクリックして、新しいプロジェクトを追加します。
表示される［新しいASP.NETプロジェクト］ダイアログで、「Empty」テンプレートを選択して［OK］をクリックします。
［ソリューションエクスプローラー］で［WebService］ノードを右クリックして、［追加］、［クラス］を選択します。
表示される［新しい項目の追加］ダイアログで、［クラス］を選択して、［名前］フィールドで名前を「BasicAuthHttpModule.cs」に変更します。
［追加］ボタンをクリックして、新しいクラスをプロジェクトに追加します。

BasicAuthHttpModuleクラスファイルが開かれます。次のコードをWebService名前空間の中に追加します。

BasicAuthHttpModule.cs	コードのコピー
namespace WebService { public class BasicAuthHttpModule : IHttpModule { private const string Realm = "My Realm"; public void Init(HttpApplication context) { // イベントハンドラを登録します。 context.AuthenticateRequest += OnApplicationAuthenticateRequest; context.EndRequest += OnApplicationEndRequest; } private static void SetPrincipal(System.Security.Principal.IPrincipal principal) { System.Threading.Thread.CurrentPrincipal = principal; if (HttpContext.Current != null) { HttpContext.Current.User = principal; } } // ユーザー名とパスワードを検証します。 private static bool CheckPassword(string username, string password) { return username == "admin" && password == "1"; } private static void AuthenticateUser(string credentials) { try { var encoding = System.Text.Encoding.GetEncoding("iso-8859-1"); credentials = encoding.GetString(Convert.FromBase64String(credentials)); int separator = credentials.IndexOf(':'); string name = credentials.Substring(0, separator); string password = credentials.Substring(separator + 1); if (CheckPassword(name, password)) { var identity = new System.Security.Principal.GenericIdentity(name); SetPrincipal(new System.Security.Principal.GenericPrincipal(identity, null)); } else { // ユーザー名またはパスワードに誤りがあります。 HttpContext.Current.Response.StatusCode = 403; } } catch (FormatException) { // 資格情報は正しく設定されませんでした。 HttpContext.Current.Response.StatusCode = 401; } } private static void OnApplicationAuthenticateRequest(object sender, EventArgs e) { var request = HttpContext.Current.Request; System.IO.FileInfo info = new System.IO.FileInfo(request.Url.AbsolutePath); if (!info.Name.Equals("GetJson")) return; var authHeader = request.Headers["Authorization"]; if (authHeader != null) { var authHeaderVal = System.Net.Http.Headers.AuthenticationHeaderValue.Parse(authHeader); // スキーム名RFC 2617 sec 1.2は大文字小文字を区別しません。 if (authHeaderVal.Scheme.Equals("basic", StringComparison.OrdinalIgnoreCase) && authHeaderVal.Parameter != null) { AuthenticateUser(authHeaderVal.Parameter); } } else { HttpContext.Current.Response.StatusCode = 401; } } // リクエストが不正な場合は、応答に対してWWW-Authenticateヘッダ // を追加します。 private static void OnApplicationEndRequest(object sender, EventArgs e) { var response = HttpContext.Current.Response; if (response.StatusCode == 401) { response.Headers.Add("WWW-Authenticate", string.Format("Basic realm=\"{0}\"", Realm)); } } public void Dispose() { } } }

BasicAuthHttpModule.cs

コードのコピー

namespace WebService
{
    public class BasicAuthHttpModule : IHttpModule
    {
        private const string Realm = "My Realm";
        public void Init(HttpApplication context)
        {
            // イベントハンドラを登録します。
            context.AuthenticateRequest += OnApplicationAuthenticateRequest;
            context.EndRequest += OnApplicationEndRequest;
        }
        private static void SetPrincipal(System.Security.Principal.IPrincipal principal)
        {
            System.Threading.Thread.CurrentPrincipal = principal;
            if (HttpContext.Current != null)
            {
                HttpContext.Current.User = principal;
            }
        }
        // ユーザー名とパスワードを検証します。
        private static bool CheckPassword(string username, string password)
        {
            return username == "admin" && password == "1";
        }
        private static void AuthenticateUser(string credentials)
        {
            try
            {
                var encoding = System.Text.Encoding.GetEncoding("iso-8859-1");
                credentials = encoding.GetString(Convert.FromBase64String(credentials));
                int separator = credentials.IndexOf(':');
                string name = credentials.Substring(0, separator);
                string password = credentials.Substring(separator + 1);
                if (CheckPassword(name, password))
                {
                    var identity = new System.Security.Principal.GenericIdentity(name);
                    SetPrincipal(new System.Security.Principal.GenericPrincipal(identity, null));
                }
                else
                {
                    // ユーザー名またはパスワードに誤りがあります。
                    HttpContext.Current.Response.StatusCode = 403;
                }
            }
            catch (FormatException)
            {
                // 資格情報は正しく設定されませんでした。
                HttpContext.Current.Response.StatusCode = 401;
            }
        }
        private static void OnApplicationAuthenticateRequest(object sender, EventArgs e)
        {
            var request = HttpContext.Current.Request;
            System.IO.FileInfo info = new System.IO.FileInfo(request.Url.AbsolutePath);
            if (!info.Name.Equals("GetJson")) return;
            var authHeader = request.Headers["Authorization"];
            if (authHeader != null)
            {
                var authHeaderVal = System.Net.Http.Headers.AuthenticationHeaderValue.Parse(authHeader);
                // スキーム名RFC 2617 sec 1.2は大文字小文字を区別しません。
                if (authHeaderVal.Scheme.Equals("basic",
                        StringComparison.OrdinalIgnoreCase) &&
                    authHeaderVal.Parameter != null)
                {
                    AuthenticateUser(authHeaderVal.Parameter);
                }
            }
            else
            {
                HttpContext.Current.Response.StatusCode = 401;
            }
        }
        // リクエストが不正な場合は、応答に対してWWW-Authenticateヘッダ 
        // を追加します。
        private static void OnApplicationEndRequest(object sender, EventArgs e)
        {
            var response = HttpContext.Current.Response;
            if (response.StatusCode == 401)
            {
                response.Headers.Add("WWW-Authenticate",
                        string.Format("Basic realm=\"{0}\"", Realm));
            }
        }
        public void Dispose()
        {
        }
    }
}

［ソリューションエクスプローラー］でWebServiceプロジェクトを右クリックして、［追加］、［参照］を選択し、System.Net.Httpの参照を追加します。
［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
表示される［新しい項目の追加］ダイアログで、［Webサービス（ASMX）］を選択して、［名前］フィールドの名前を「Service.asmx」に変更します。
［追加］ボタンをクリックして、プロジェクトに新しいサービスを追加します。

表示されるServiceファイルで、[System.Web.Script.Services.ScriptService]のコメントを解除し、WebMethodの下に次のコードを追加します。

Service.asmx.cs	コードのコピー
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] public string GetJson() { string result; try { using (System.IO.StreamReader streamReader = new System.IO.StreamReader(Properties.Resource.JsonFilePath, System.Text.Encoding.UTF8)) { result = streamReader.ReadToEnd(); } } catch (System.IO.FileNotFoundException e) { var errorMessage = String.Format(Properties.Resource.FormatErrorMessage, e.Message, e.StackTrace); result = "{'error': '" + errorMessage + "'}"; } return result; }

Service.asmx.cs

コードのコピー

[System.Web.Script.Services.ScriptMethod(UseHttpGet = true, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
        public string GetJson()
        {
            string result;
            try
            {
                using (System.IO.StreamReader streamReader = new System.IO.StreamReader(Properties.Resource.JsonFilePath, System.Text.Encoding.UTF8))
                {
                    result = streamReader.ReadToEnd();
                }
            }
            catch (System.IO.FileNotFoundException e)
            {
                var errorMessage = String.Format(Properties.Resource.FormatErrorMessage, e.Message, e.StackTrace);
                result = "{'error': '" + errorMessage + "'}";
            }
            return result;
        }

［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
表示される［新しい項目の追加］ダイアログで、［Webフォーム］を選択して、［名前］フィールドで名前を「default.aspx」に変更します。
［追加］ボタンをクリックして、新しいファイルをプロジェクトに追加します。

表示されるdefault.aspxコードファイルで、次のように<div>タグを<form>タグに替えます。

default.aspx	コードのコピー
<form id="form1" runat="server"> <asp:Label ID="messageLabel" runat="server" Text=""></asp:Label> </form>

［ソリューションエクスプローラー］で、［default.aspx］を右クリックして、［コードの表示］を選択します。

表示される［default.aspx］コードファイルで、Page_Loadイベントに次のコードを追加します。

default.aspx.cs	コードのコピー
messageLabel.Text = Properties.Resource.bodyOfMessage;

［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
表示される［新しい項目の追加］ダイアログで、［リソースファイル］を選択して、［名前］フィールドで名前を「Resource.resx」に変更します。
［追加］ボタンをクリックして、プロジェクトに新しいファイルを追加します。Resources.resxファイルを［WebService］>［Properties］ノードの下にドラッグします。

Resource.resxファイルに次のデータを追加します。

名前	値
bodyOfMessage	Json Data SourceサンプルWebServiceが正常に開始されました
FormatErrorMessage	Message : {0}, StackTrace: {1}
JsonFilePath	<User folder>\ActiveReportsNET18\Samples\Data\customers.json

［ソリューションエクスプローラー］でソリューションのノードを右クリックして、［プロパティ］を選択します。
表示される［ソリューション'CustomerDetails'プロパティページ］ダイアログで、ラジオボタンで［マルチスタートアッププロジェクト］を選択し、［アクション］のドロップダウンから2つのプロジェクトに対して［開始］を選択します。
［適用］、［OK］をクリックして、ソリューションに追加した変更を適用します。
［ソリューションエクスプローラー］で、CustomerDetailsプロジェクトを右クリックして、［追加］、［参照］を選択し、System.Web.Extentionsの参照を追加します。

DataLayerクラスはこのチュートリアルで使用するデータを提供します。

［ソリューションエクスプローラー］でCustomerDetailsプロジェクトを右クリックして、［追加］、［クラス］を選択します。
表示される［新しい項目の追加］ダイアログで、［クラス］を選択して、「名前」フィールドで名前を「DataLayer.cs」に変更します。
［追加］ボタンをクリックして新たなクラスをプロジェクトに追加します。

表示されるDataLayerクラスファイルで、このプロジェクトの名前空間の内部に次のコードを追加します。

注意: "source_url"に設定しているURL中のポート番号（"http://localhost:"の後ろの部分）は、IIS Expressが実際に使用するポート番号に変更する必要があります。IIS Expressが使用するポート番号は、WebServiceプロジェクトのプロパティページで確認・変更することができます。

DataLayer.cs	コードのコピー
// このサンプルで使用するデータを提供します internal sealed class DataLayer { public String CreateData() { string source_url = @"http://localhost:6719/Service.asmx/GetJson"; string responseText = null; using (var webClient = new System.Net.WebClient()) { webClient.Headers[System.Net.HttpRequestHeader.Authorization] = "Basic " + Convert.ToBase64String(System.Text.Encoding.Default.GetBytes("admin:1")); // username:password webClient.Headers[System.Net.HttpRequestHeader.ContentType] = "application/json;"; webClient.Encoding = System.Text.Encoding.UTF8; var responseJson = webClient.DownloadString(source_url); Dictionary<string, string> values = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(responseJson); if (values.ContainsKey("d")) { responseText = values["d"]; } } return responseText; } }

DataLayer.cs

コードのコピー

       
// このサンプルで使用するデータを提供します
 internal sealed class DataLayer
    {
        public String CreateData()
        {
            string source_url = @"http://localhost:6719/Service.asmx/GetJson";
            string responseText = null;
            using (var webClient = new System.Net.WebClient())
            {
                webClient.Headers[System.Net.HttpRequestHeader.Authorization] = "Basic " + Convert.ToBase64String(System.Text.Encoding.Default.GetBytes("admin:1")); // username:password 
                webClient.Headers[System.Net.HttpRequestHeader.ContentType] = "application/json;";
                webClient.Encoding = System.Text.Encoding.UTF8;
                var responseJson = webClient.DownloadString(source_url);
                Dictionary<string, string> values = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(responseJson);
                if (values.ContainsKey("d"))
                {
                    responseText = values["d"];
                }
            }
            return responseText;
        }
    }

［ソリューションエクスプローラー］で、WebServiceプロジェクト内のWeb.configファイルを開きます。

<configuration>タグを次のコードに置き換えます。

Web.config	コードのコピー
<configuration> <system.web> <compilation debug="true" targetFramework="4.5"/> <httpRuntime targetFramework="4.5"/> <httpModules> <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/> </httpModules> <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> <add name="HttpSoap"/> </protocols> </webServices> </system.web> <system.codedom> <compilers> <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/> <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\"Web\" /optionInfer+"/> </compilers> </system.codedom> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules> <add name="BasicAuthHttpModule" type="WebService.BasicAuthHttpModule, WebService"/> <remove name="ApplicationInsightsWebTracking"/> <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler"/> </modules> </system.webServer> </configuration>

Web.config

コードのコピー

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <httpModules>
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/>
    </httpModules>
  <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
        <add name="HttpSoap"/>
      </protocols>
</webServices>     
  </system.web>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs"
        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/>
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb"
        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/>
    </compilers>
  </system.codedom>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <add name="BasicAuthHttpModule" type="WebService.BasicAuthHttpModule, WebService"/>
      <remove name="ApplicationInsightsWebTracking"/>
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"
        preCondition="managedHandler"/>
    </modules>
  </system.webServer>
</configuration>

［ビルド］メニューから［ソリューションのビルド］を選択します。
［F5］ボタンを押してプロジェクトを実行します。

デザイン時のレイアウト

実行時のレイアウト