2008年10月14日

ASP.NET 複数の入力画面を簡単にする。

 ASP.NETにて、複数の入力テキストボックスがあると、画面上に表示しきれずに煩雑になってしまいます。

 Windowフォームでは、タブと言う方法がありますが、ASP.NETで同様の方法を実現するには、MultiViewを使えば可能となります。

 一つの画面上で、タブを切り替えるかのように表示を切かえ、それぞれのテキストボックスに入力されたデータを扱うことが可能となります。

>>>


>>>
 画面上の配置は、以下の図を参考にしてください。

<図>
sample009-multiview.bmp

ちなみに、MultiView内にはViewしか配置できませんので。。。。


配置が終了しましたら、それぞれの表示文字も修正しておいてください。

今回の例は、View1〜3までにあるテキストボックス内に数値を入力し、最後に合計させるというものです。

次に、以下のコードを記述します。

<コード>
======================================================
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    'ページロード時に、表示させる
    'MultiViewのViewを指定。
    'View1は0
    If Not IsPostBack Then
      '表示させるViewの指定
      MultiView1.ActiveViewIndex = 0
      'Labelに表示されているViewを表示。
      Label2.Text = "view1"
    End If
  End Sub

  Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    'View1をクリックしたときに、View1を表示させる。
    MultiView1.ActiveViewIndex = 0
    Label2.Text = "view1"
  End Sub

  Protected Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
    'View2をクリックしたときに、View2を表示させる。
    MultiView1.ActiveViewIndex = 1
    Label2.Text = "view2"
  End Sub

  Protected Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
    'View3をクリックしたときに、View3を表示させる。
    MultiView1.ActiveViewIndex = 2
    Label2.Text = "view3"
  End Sub

  Protected Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click
    'View1〜3までのテキストボックスに入力
    'した数値を合計し、Labelに表示させる。
    Label1.Text = CInt(TextBox1.Text) + CInt(TextBox2.Text) + CInt(TextBox3.Text)
  End Sub

======================================================

<View1>
sample009-multiview002.bmp

<View2>
sample009-multiview003.bmp

<View3>
sample009-multiview004.bmp

<数値を合計>
sample009-multiview005.bmp


※今回は単純にサンプルとして掲載しています。
テキストボックス内に入力されたデータが数値で無い場合は、一切考慮していません。
実装する際には、エラーなどの処理が必要となってくる場合があります。




posted by Debring at 20:07 | Comment(0) | TrackBack(0) | ASP.NET MultiView
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。