カスタムHTML Helperの作成

12463 ワード

html mvc XHTML asp.net asp

このチュートリアルでは、MVCビューでカスタムHTML Helperを作成する方法を説明します.HTML Helpersを利用することで、退屈な入力HTMLタグを減らすことができます.
チュートリアルの第1部では、ASPについて説明します.NET MVCフレームワーク既存のHTML Helper.次に、カスタムHTML Helperを作成する2つの方法について説明します.静的メソッドと拡張メソッドを作成することでHTML Helperを作成する方法を説明します.

HTML Helperの理解

HTML Helperは文字列を返す方法にすぎません.この文字列は、あなたが望む内容を表すことができます.たとえば、HTML Helperを使用して、HTML <input>および<img>などの標準的なHTMLタグを表示できます.また、HTML Helperを使用して、ラベルページやデータベースデータのHTMLテーブルなど、より複雑な内容を表示することもできます.
ASP.NET MVCフレームワークには、以下の標準的なHTML Helpersが含まれています(このリストは完全ではありません).

Html.ActionLink()

Html.BeginForm()

Html.CheckBox()

Html.DropDownList()

Html.EndForm()

Html.Hidden()

Html.ListBox()

Html.Password()

Html.RadioButton()

Html.TextArea()

Html.TextBox()

たとえば、コード1のフォームを考慮します.このフォームは、2つの標準HTML Helperによって表示されます(図1参照).このフォームは、Html.BeginForm()およびHtml.TextBox() Helperメソッドを使用して、簡単なHTMLフォームを提示します.

図01:HTML Helperで表示されるページ(フルサイズ表示をクリック)
コード1–Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
     <title>Index</title>
</head>
<body>
      <div>
          <% using (Html.BeginForm())
          { %>
               <label for="firstName">First Name:</label>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />    
          <% } %>
     1     </div>
</body>
</html>

Html.BeginForm()Helperメソッドは、HTML <form>のラベルの先頭と末尾を作成するために使用されます.注意Html.BeginForm()メソッドは、using文で呼び出されます.using文は、<form>ラベルがusingブロックの最後に閉じられることを保証する.
もしよろしければ、usingブロックを使わずにHtmlを呼び出すことができます.EndForm()Helperメソッドは、<form>ラベルを閉じるために使用されます.どれが直感的だと思ったら、どれを使ってください.Html.TextBox() Helperメソッドは、HTML <input>ラベルを表示するために使用される.ブラウザでソースコードの表示を選択すると、図2に示すようなHTMLソースが表示されます.注ソースコードには標準のHTMLタグが含まれています.
重要点:Html.TextBox()-HTML Helperは<%= %>ラベルではなく<% %>ラベルで表示されることに注意してください.この等号を付けないと、ブラウザには何も表示されません.
ASP.NET MVCフレームワークにはhelpersのグループが含まれています.8割の場合、カスタムHTML HelperでMVCフレームワークを拡張する必要があります.このチュートリアルの残りの部分では、カスタムHTML Helperを作成する方法を2つ学びます.
コード2–Index.aspx Source

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Index</title>
</head>
<body>
     <div>
          <form action="http://localhost:33102/" method="post">
               <label for="firstName">First Name:</label>
               <br />
               <input id="firstName" name="firstName" type="text" value="" />
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <input id="lastName" name="lastName" type="text" value="" />
               <br /><br />
               <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
          </form>
     </div>
</body>
</html>

静的方法でHTML Helperを作成する

新しいHTML Helperを作成する最も簡単な方法は、文字列を返す静的メソッドを作成することです.たとえば、HTML <label>のラベルを表示するためにHTML Helperを新規作成することにしました.コード3のクラスを使用して<label>を表示できます.
コード3-Helpers\LabelHelper.cs

using System;
namespace MvcApplication1.Helpers
{
          public class LabelHelper
          {
               public static string Label(string target, string text)
               {
                    return String.Format("<label for='{0}'>{1}</label>", target, text);
               }
          }
}

コード3のクラスは特にありません.Label()メソッドは、1つの文字列のみを返します.
コード4で修正されたIndexビューは、HTML LabelHelperタグを<label>で提示する.注意ビューは、<%@ imports %>ネーミングスペースを導入するためのApplication1.Helpers命令を含む.
コード4–Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index2</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= LabelHelper.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>
</html>

拡張方法でHTML Helperを作成する

ASPを作成したい場合はNET MVCフレームワークの標準HTML HelperのようなHTML Helperでは、拡張方法を作成する必要があります.拡張メソッドを使用すると、既存のクラスに新しいメソッドを追加できます.HTML Helperメソッドを作成すると、ビューのHtmlプロパティで表されるHtml Helperクラスに新しいメソッドが追加されます.
コード5のクラスにはLabel()という拡張メソッドがHtmlHelper。に追加されています.このような点に注意してください.まず、このクラスは静的クラスであることに注意してください.静的クラスへの拡張方法を定義する必要があります.
次に、Label()メソッドの最初のパラメータの前にキーワードthisがあることに注意する.拡張メソッドの最初のパラメータは、拡張メソッドが拡張するクラスを示します.
コード5–Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this HtmlHelper helper, string target, string text)
          {
               return String.Format("<label for='{0}'>{1}</label>", target, text);
          }
     }
}

拡張メソッドを作成し、アプリケーションの生成に成功すると、拡張メソッドは他のクラスのすべてのメソッドのようにVisual Studioインテリジェントプロンプトに表示されます.(図2参照).唯一異なるのは、拡張メソッドの横にあるアイコンが特殊(下の矢印)であることです.

図02:Htmlを用いる.Label()拡張メソッド(クリックしてフルサイズを表示)
コード6で修正するIndexビュー用Html.Label()拡張メソッドは、そのすべての<label>ラベルを示します.
コード6–Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index3</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>    
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= Html.Label("lastName", "Last Name:") %>    
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>
</html>

まとめ

このチュートリアルでは、カスタムHTML Helperを作成する方法を2つ学びました.まず、文字列を返す静的メソッドを作成することで、カスタムLabel() HTML Helperを作成する方法を学びました.次に、HtmlHelperクラスで拡張メソッドクラスを作成してカスタムLabel() HTML Helperを作成する方法を学びました.
このチュートリアルでは、極めて簡単なHTML Helperメソッドの構築に専念しています.HTML Helperはあなたの考え通りに完成できることに注意してください.ツリーリスト、メニュー、データベースレコードなどの豊富なコンテンツを表示するHTML Helperを作成できます.

css iPhone、iPadのデフォルトボタンスタイルを削除

セッションイベントの処理