お試し：Web Components と Tag Helper

昨日、Tag Helper について書いたのですが ASP.NET MVC 6 Tag Helper について - miso_soup3 Blog。

Web フロント側の技術である Web Components と、サーバー側の ASP.NET MVC 6 の機能である Tag Helper で、同じ HTML を解釈してみました。
とくにオチはありません。

まず、Web Components の template を使い、カスタム要素で HTML を記述します。
次に、その HTML をそのまま ASP.NET MVC 6 のビューにコピペし、サーバー側の値で HTML を出力してみます。

バージョン

Polymer 1.0
ASP.NET 5 rc1

Web Components

Polymer ライブラリを使い、以下の用に 2 つの HTML を書きます。
ここでは、employee-list と、site-information の 2 つの要素を定義しました。

index.html：

<!doctype html>
<html lang="en">
  <head>
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <employee-list></employee-list>
    <site-information title="my web site" author="Daniel"></site-information>
  </body>
</html>

proto-element.html：

<dom-module id="site-information">

  <template>
    <!-- bind to the "owner" property -->
    site title : <b>{{title}}</b>. author is : <b>{{author}}</b>.
  </template>

  <script>
    Polymer({
      is: "site-information",
      properties: {
        title: {
          type: String,
          value: "mySite"
        },
        author: {
          type: String,
          value: "Daniel"
        }
      }
    });
  </script>
  
</dom-module>

<dom-module id="employee-list">
  <template>

    <div> Employee list: </div>
    <template is="dom-repeat" items="{{employees}}">
        <div># <span>{{index}}</span></div>
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
    </template>

  </template>

  <script>
      Polymer({
      is: 'employee-list',
      ready: function() {
        this.employees = [
            {first: 'Bob', last: 'Smith'},
            {first: 'Sally', last: 'Johnson'}
        ];
      }
      });
  </script>

</dom-module>

これをブラウザで確認すると、このように表示されます。
proto-element.html に書いてあるように html でレンダリングされます。

f:id:miso_soup3:20151203233252p:plain

ASP.NET MVC 6 Tag Helper

ASP.NET MVC 6 のプロジェクトを用意し、cshtml ファイルを用意し、
先ほどの index.html の内容をコピペします。

index.cshtml：

<!doctype html>
<html lang="en">
  <head>
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <employee-list></employee-list>
    <site-information title="my web site" author="Daniel"></site-information>
  </body>
</html>

polymer ライブラリの参照がありますが、ここでは不要です。

Tag Helper を 2 つ作成します。

EmployeeListTagHelper :

using Microsoft.AspNet.Razor.TagHelpers;
using WebApplication12.Models;
using Microsoft.AspNet.Mvc.Rendering;

namespace WebApplication12.TagHelpers
{
    public class EmployeeListTagHelper : TagHelper
    {
        public ModelExpression Employees { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var emoloyees = Employees.Model as Employee[];

            string content = string.Empty;
            int i = -1;
            foreach(var employee in emoloyees)
            {
                content += $@"<div># <span>{++i}</span></div>
<div>First name: <span>{employee.First}</span></div>
<div>Last name: <span>{employee.Last}</span></div>";
            }

            output.TagName = "div";
            output.Content.SetHtmlContent(content);
        }
    }
}

SiteInformationTagHelper :

using Microsoft.AspNet.Razor.TagHelpers;
using Microsoft.AspNet.Mvc.Rendering;

namespace WebApplication12.TagHelpers
{
    public class SiteInformationTagHelper : TagHelper
    {
        public ModelExpression Title { get; set; }

        public ModelExpression Author { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            output.Content.SetHtmlContent($"site title : <b>{Title.Model}</b>. author is : <b>{Author.Model}</b>.");
        }
    }
}

Controller クラスにて、ダミーの値を用意しビューに渡します。

HomeController :

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var employees = new Employee[]
        {
            new Employee() { First = "Adela", Last = "Mabbut"  },
            new Employee() { First = "Sian", Last = "Macbeth" }
        };
            
        var model = new IndexView();
        model.Employees = employees;
        model.Title = "Member Site";
        model.Author = "Cleman";
        return View(model);
    }
//...