コードブロック内でページに明示的に出力する文字列を指定したい - textタグの利用 - Razor Pages

Razor Page でコードブロックでページに文字列を出力する場合の書式を紹介します。

概要

Razor Pageでコードブロック内でタグを記述した場合は、タグの文字列としてページに出力されますが、単純に画面に見える文字列を記述した場合、コードと判断され、コンパイル時にエラーが発生します。
コードブロック内でページに明示的に文字列を出力する場合には、<text> タグを利用する必要があります。

コンパイルエラーになる例

下記のページモデルクラスを準備します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPageTextTag.Pages
{
  public class page1Model : PageModel
  {
    public class Item
    {
      public string Name;
      public int price;
    }

    public Item[] Items { get; set;}

    public void OnGet()
    {
      Items = new Item[3];
      Items[0] = new Item { Name = "ぺんぎんクッキー", price = 110 };
      Items[1] = new Item { Name = "らくだキャラメル", price = 85 };
      Items[2] = new Item { Name = "しろくまアイス", price = 230 };
    }
  }
}

このとき、下記のRazorPageのコードはコンパイル時にエラーになります。

@page
@model RazorPageTextTag.Pages.page1Model
@{
}
<html>
<head>
</head>
<body>
  <h2>RazorPage のテスト</h2>
  <p>
    @for (int i = 0; i < 2; i++) {
      Name: @Model.Items[i].name<br />
      Price: @Model.Items[i].price<br />
    }
  </p>
</body>
</html>

コンパイルすると、下記のエラーが発生します。

エラーメッセージ

CS1002 ; が必要です

なお、以下のコードの場合はコンパイルが通ります。

@page
@model RazorPageTextTag.Pages.page1Model
@{
}
<html>
<head>
</head>
<body>
  <h2>RazorPage のテスト</h2>
  <p>
    @for (int i = 0; i < 2; i++) {
      @Model.Items[i].name<br />
      @Model.Items[i].price <br />
    }
  </p>
</body>
</html>

実行して、ページを表示すると下図の画面が表示されます。

コードブロック内に単純にページに表示する文字列、先のコードの場合では"Name:" "Price:" 記述がページに表示する文字列としてではなく、ロジックのコードとして認識されたためコンパイルエラーになっているようです。

対処法

コードブロックに明示的に文字列をページに出力したい場合は、<text> タグを利用します。

先ほどのエラーとなったRazorPageのコードは以下の記述であれば、コンパイルが通ります。

@page
@model RazorPageTextTag.Pages.page1Model
@{
}
<html>
<head>
</head>
<body>
  <h2>RazorPage のテスト</h2>
  <p>
    @for (int i = 0; i < 2; i++) {
      <text>Name:</text> @Model.Items[i].name<br />
      <text>Price:</text> @Model.Items[i].price <br />
    }
  </p>
</body>
</html>

実行結果

上記のコードのRazorPageを表示します。下図の画面が表示されます。textタグで囲んだ部分がページの文字列として出力されています。

なお、出力されるページのコードは以下になります。textタグはページの出力には含まれていないことがわかります。

<html>
<head>
</head>
<body>
  <h2>RazorPage のテスト</h2>
  <p>
Name:ぺんぎんクッキー<br />
Price:110 <br />
Name:らくだキャラメル<br />
Price:85 <br />
  </p>
</body>
</html>

参考:別のタグで記述する方法

text タグ以外のHTMLタグを記述してもコンパイルエラーにならず出力できます。下記のコードはspanタグで記述する例です。

@page
@model RazorPageTextTag.Pages.page1Model
@{
}
<html>
<head>
</head>
<body>
  <h2>RazorPage のテスト</h2>
  <p>
    @for (int i = 0; i < 2; i++) {
      <span>Name:</span> @Model.Items[i].name<br />
      <span>Price:</span> @Model.Items[i].price <br />
    }
  </p>
</body>
</html>

上記のRazorPageの結果は下図です。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

コードブロック内でページに明示的に出力する文字列を指定したい - textタグの利用 - Razor Pages

概要

コンパイルエラーになる例

対処法

実行結果

参考:別のタグで記述する方法

関連するページ