omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


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

htmlサーバコントロールはhtmlレイアウトに記載した要素の属性やスタイルをサーバ処理で変更することができます。しかし、フォームアプリのgridviewのように、データテーブルをバインドして自動的に表を作成するようなことはできません。

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

asp.netにはwebサーバコントロールというコントロールが用意されています。webサーバコントロールにはtextboxやbuttonなどの基本的なコントロールだけでなく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;" >

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.aspxtableタグを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の基本・aspとの違い

    classic aspとasp.net(aspx)の違いやaspx.netの基本的な考え方ついて説明します。ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見て...


  • htmlサーバコントロールの基本

    asp.netのhtmlサーバコントロールの基本の基本的な考え方ついて説明します。htmlサーバコントロールを使えば、サーバ処理でhtmlの要素(コントロール)にアクセスできるようになります。フォーム...


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

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


  • ポストバックの基本

    asp.netでは保持したいコントロールにrunat="server"属性を指定してsubmitすると、自動的に内部処理でコントロールの値を復元してくれます。基本的にasp.net...


  • イベントの基本と注意事項

    asp.netではsubmitコントロールにrunat="server"属性を指定してsubmitするようにすれば、サーバ処理ではフォームアプリと同じようにイベントのファンクション...


  • repeaterで表示・編集・登録処理 その1

    asp.netのWEBサーバコントロールのrepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。具体的には、DBに登録されているデータをrepeaterコントロ...


  • repeaterで表示・編集・登録処理 その2

    aspxファイルに定義したrepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません。なので、ID=txtNameのテキストボックス...


  • repeaterで出力時にjavascriptのイベントを定義する

    apsxファイルに詳細ボタンと、詳細画面を起動するjavascriptのファンクションを定義します。onclick属性(イベント)をaspxに定義してしまうと、引数で必要な行事の情報がわからないので、...


  • repeaterで出力したコントロールにjavascriptでアクセスする

    asp.netのrepeaterで動的に出力したコントロールにjavascriptでアクセスする方法を紹介します。javascriptで要素にアクセスする場合はgetElementById(取得したい...


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

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