omachizura

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


ポストバックの基本

aspでは、画面再表示時にテキストボックスなどのコントロールの値を保持・復元するためには、コントロールの値をsubmitし、サーバ処理でコントロールのプロパティに再セットして状態を復元する必要がありました。

asp.netでは保持したいコントロールにrunat="server"属性を指定してsubmitすると、自動的に内部処理でコントロールの値を復元してくれます。基本的にasp.netでは、runat="server"属性を指定したformで、画面全体を囲みます。runat="server"属性を指定したformを現在表示している同じページにsubmitすることをポストバック(POSTBACK)と呼びます。

例えば下記のようにrunat="server"属性を指定したテキストボックスと指定しないテキストボックスを用意し、テキストボックスの値を両方変更し、submitしたらrunat="server"を指定したテキストボックスは、編集した値が保持され、runat="server"を指定しないテキストボックスは値がクリアされて、初期値(保持されないコントロール)と表示されます。

<input type="text" id="txtName" value="保持されるコントロール" runat="server">
<input type="text" id="txtName" value="保持されないコントロール" >

asp.netの基本・aspとの違い で紹介したコードをrunat="server"などを使用して書き換えると下記のようになります

※本来は下記のようなやり方はしませんが、説明の都合であえて下記のような方法で実装しています。

sample.aspx
<!-- クライアント処理などは同じのため省略します -->
<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" />
    <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>
sample.aspx.vb
Imports System.Data

Partial Class sample1
    Inherits System.Web.UI.Page

    ''' <summary>
    ''' ページロードイベント
    ''' </summary>
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      If hidMode.value = "1" Then 'POSTBACKで値を復元しているためRequest.Form("hidMode")ではなく直接hidMode.valueを参照できる
        If checkData() Then 'データチェック
          insertData()
          '登録後はテキストボックスの値を削除
          txtName.value = "";
          txtPrice.value = "";
        Else
          'チェックエラー時はテキストボックスの値を保持(POSTBACKで値を復元しているため処理の必要はなし)
          hidCheck.Value = "1"
        End If
      End If

      Dim dt As DataTable = getData() 'データ取得
      dispData(dt) 'データ表示
    End Sub

    ''' <summary>
    ''' データ取得
    ''' </summary>
    Private Function getData() As DataTable
      Dim dt As DataTable
      'データを取得する処理は省略します
      Return dt
    End Function

    ''' <summary>
    ''' データ表示
    ''' </summary>
    Private Sub dispData(ByVal dt As DataTable)
      grvDetail.DataSource = dt
      grvDetail.DataBind()
    End Sub

    ''' <summary>
    ''' 登録データをチェック
    ''' </summary>
    Private Function checkData() As Boolean
      'データが存在するかどうかチェックする処理は省略します
      'すでにデータが登録されていたらtrueを返します
    End Function

    ''' <summary>
    ''' データ登録
    ''' </summary>
    Private Sub insertData()
      'データを登録する処理は省略します
    End Sub
End Class





  • 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...