asp.netのwebサーバコントロールの基本

htmlサーバコントロールはhtmlレイアウトに記載した要素の属性やスタイルをサーバ処理で変更することができます。

しかし、フォームアプリのGridViewのように、データテーブルをバインドして自動的に表を作成するようなことはできません。

表を出力するにはhtmlにはtableタグくらいしかありません。tableタグにrunat="server"属性をつけて、サーバ処理でデータ件数分ループで行を追加していく方法もありますが、ASP.NETにはもっと簡単で便利な方法があります。

ASP.NETにはwebサーバコントロールというコントロールが用意されています。

webサーバコントロールにはtextboxbuttonなどの基本的なコントロールだけでなくGridViewのような便利なコントロールがあります。

下記のようなイメージです。htmlサーバコントロールと違い、webサーバコントロールはhtmlのスタイルや属性を直接編集するわけではなく、サーバ処理ではフォームアプリのように、コントロールのプロパティを編集し、最後にhtmlの形式に変換してレスポンスをします。

sample.aspx(htmlレイアウト)
<asp:text ID="txtName" BackColor="yellow" Text="テスト1" runat="server" />
sample.aspx.vb(サーバ処理)
txtName.Text = "テスト2" 'テキストボックスの値を変更する
txtName.BackColor = "Blue" 'テキストボックスの背景色を変更する
レスポンスされるhtml
<input type="text" id="txtName" value="テスト2" style="background-color:blue;" >

asp.netのhtmlサーバコントロールの基本で紹介したhtmlサーバコントロールでレスポンスされるhtmlと同一のものになります。

htmlサーバコントロールとはサーバ処理の方法が異なります。

webサーバコントロールのほうが、よりフォームアプリに近い感覚でコントロールを編集することができます。

テキストボックスではhtmlサーバコントロールでもwebサーバコントロールでも実装効率の観点ではあまり違いはありません。

下記のように、サーバ処理でデータ件数分ループでhtmlタグを作成し、変数をhtmlに埋め込みで出力している箇所をwebサーバコントロールのGridViewを使って書き換えます。

変更前のコード
''' <summary>
''' データ表示
''' </summary>
Private Sub dispData(ByVal dt As DataTable)
  detail = ""
  For Each row As DataRow In dt.Rows
    detail &= "<tr><td>" & row("商品名").ToString & "</td><td>" & row("単価").ToString & "</td>" & vbCrLf
  Next
End Sub
sample.aspx(tableタグをgridviewに変更します。)
<body onload="init()">
  <form id="frmMain" runat="server">
    <input type="button" value="登録" onclick="touroku()">
    商品名:<input type="text" name="txtName" id="txtName" runat="server">
    単価:<input type="text" name="txtPrice" id="txtPrice" runat="server">
    <input type="hidden" name="hidMode" id="hidMode" runat="server" />
    <!-- webサーバコントロールのgridviewを定義します -->
    <asp:GridView ID="grvDetail" runat="server" AutoGenerateColumns="false">
      <Columns><asp:BoundField DataField="商品名" HeaderText="商品名" /></Columns>
      <Columns><asp:BoundField DataField="単価" HeaderText="単価" /></Columns>
    </asp:GridView>
    <input type="hidden" name="hidCheck" id="hidCheck" runat="server" />
  </form>
</body>
</html>
sample.aspx.vb
Private Sub dispData(ByVal dt As DataTable)
  grvDetail.DataSource = dt
  grvDetail.DataBind() 'webサーバコントロールのgridviewにデータバインド
End Sub

サーバ処理でGridViewにデータバインドなどを行いプロパティを設定しておけばレスポンスされるhtmlを自動的に生成してくれます。

自動的にhtmlを生成してくれるのは簡単で便利ですが、レイアウトなどの細かい微調整をどのように行えばいいか困る場合があります。

その場合はwebサーバコントロールで用意されたプロパティをいろいろいじりながら、レスポンスされるhtmlを確認しながら修正していく必要があります。


関連記事

  • asp.netのwebサーバコントロールの基本

    asp.netにはwebサーバコントロールというコントロールが用意されています。webサーバコントロールはhtmlのスタイルや属性を直接編集するわけではなく、サーバ処理ではフォームアプリのように、コン...


  • 一人暮らしに便利なおすすめ家電と使わない家電

    初めて一人暮らしを始めるときに、便利そうな家電を買ってみたものの、結局使用しなくなったという経験がある方は多いと思います。一人暮らしをしていたときに、実際に買ってみて重宝した家電や逆に買っても使用しな...


  • カミソリ負けで肌荒れに困っているときの対処法

    カミソリから髭剃りに変えてから肌荒れは格段に改善しましたので、私のようにカミソリ負けによる肌荒れに悩んでいる方にはおすすめです。温タオルでひげを温めてひげを柔らかくして、シェービングクリームをつけて、...


  • 冠着山に登山・トレッキングに行ってきました

    冠着駅から歩いて行ったのですが、途中の道はサイクリングをしたくなるようなとても気持ちのいい道でした。かなりの長距離で大変でしたが、姨捨のあぜ道は景色がとても絶景で、風も心地良かったです。夏には最高の避...


  • 唐松岳・八方尾根に日帰り登山レビュー

    唐松岳に日帰り登山に行ってきました。登山道は森の中を歩く箇所は少なく、ほとんど開けた場所で、風が下から吹いてきてとても気持ちが良いです。途中までリフトが使えることや、道がとても歩きやすいことから、唐松...


  • javascriptでtableタグの中のコントロールにアクセスする

    例えばrepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById('コントロールID')のようにID...


  • LaravelのElixirでbrowserSyncを導入する

    LaravelのElixirでビルド後にブラウザを自動で再表示するために、browserSyncを導入しました。browserSyncをするためには「laravel-elixir-browsersyn...


  • Laravel5 Carbonでエラーになってしまうときの対処法

    Laravel5でCarbonを使用するとなぜかエラーになってしまいました。以下のようにしたらうまく動きました。PHPやLaravelに慣れていない人は意外とハマってしまうところかもしれません。


  • laravel なぜかcatchに入らない時に確認すること

    laravelでtry-catchの処理で、tryの中でエラーが発生したのに、何故かcatchに入らずに、サーバーエラーになってしまう時がありました。以下のように実装していましたが、catchの引数の...


  • LaravelでDB接続でAccess denied for user homestead@localhostのエラーになるとき

    LaravelでマイグレーションやDBの接続処理をするときに、以下のエラーになってしまうときの対処法です。このエラーが発生した時にはまず.envファイルの値が正しく設定されているか確認します。conf...