Asp.net-multi-views

提供:Dev Guides
移動先:案内検索

ASP.NET-マルチビュー

MultiViewコントロールとViewコントロールを使用すると、ページのコンテンツを異なるグループに分割し、一度に1つのグループのみを表示できます。 各ビューコントロールは1つのコンテンツグループを管理し、すべてのビューコントロールはMultiViewコントロールにまとめられています。

MultiViewコントロールは、一度に1つのViewコントロールを表示します。 表示されるビューはアクティブビューと呼ばれます。

MultiViewコントロールの構文は次のとおりです。

<asp:MultView ID= "MultiView1" runat= "server">
</asp:MultiView>

ビューコントロールの構文は次のとおりです。

<asp:View ID= "View1" runat= "server">
</asp:View>

ただし、ビューコントロールは単独では存在できません。 スタンドアロンで使用しようとするとエラーになります。 Multiviewコントロールでは常に次のように使用されます。

<asp:MultView ID= "MultiView1" runat= "server">
   <asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>

ビューおよびマルチビューコントロールのプロパティ

ViewコントロールとMultiViewコントロールは両方ともControlクラスから派生し、そのすべてのプロパティ、メソッド、およびイベントを継承します。 ビューコントロールの最も重要なプロパティは、ビューの可視性を設定するブール型のVisibleプロパティです。

MultiViewコントロールには、次の重要なプロパティがあります。

Properties Description
Views Collection of View controls within the MultiView.
ActiveViewIndex A zero based index that denotes the active view. If no view is active, then the index is -1.

MultiViewコントロールのナビゲーションに関連付けられているボタンコントロールのCommandName属性は、MultiViewコントロールの関連フィールドに関連付けられています。

たとえば、CommandName値がNextViewであるボタンコントロールがマルチビューのナビゲーションに関連付けられている場合、ボタンがクリックされると次のビューに自動的に移動します。

次の表に、上記のプロパティのデフォルトのコマンド名を示します。

Properties Description
NextViewCommandName NextView
PreviousViewCommandName PrevView
SwitchViewByIDCommandName SwitchViewByID
SwitchViewByIndexCommandName SwitchViewByIndex

マルチビューコントロールの重要なメソッドは次のとおりです。

Methods Description
SetActiveview Sets the active view
GetActiveview Retrieves the active view

ビューが変更されるたびに、ページがサーバーにポストバックされ、多くのイベントが発生します。 重要なイベントは次のとおりです。

Events Description
ActiveViewChanged Raised when a view is changed
Activate Raised by the active view
Deactivate Raised by the inactive view

上記のプロパティ、メソッド、イベントとは別に、マルチビューコントロールはコントロールとオブジェクトクラスのメンバーを継承します。

サンプルページには3つのビューがあります。 各ビューには、ビューをナビゲートするための2つのボタンがあります。

コンテンツファイルのコードは次のとおりです。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="multiviewdemo._Default" %>

<!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 runat="server">
      <title>
         Untitled Page
      </title>
   </head>

   <body>
      <form id="form1" runat="server">

         <div>
            <h2>MultiView and View Controls</h2>

            <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
            </asp:DropDownList>

            <hr/>

            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="2"  onactiveviewchanged="MultiView1_ActiveViewChanged" >
               <asp:View ID="View1" runat="server">
                  <h3>This is view 1</h3>
                  <br/>
                  <asp:Button CommandName="NextView" ID="btnnext1" runat="server" Text = "Go To Next"/>
                  <asp:Button CommandArgument="View3" CommandName="SwitchViewByID" ID="btnlast" runat="server" Text  ="Go To Last"/>
               </asp:View>

               <asp:View ID="View2" runat="server">
                  <h3>This is view 2</h3>
                  <asp:Button CommandName="NextView" ID="btnnext2" runat="server" Text = "Go To Next"/>
                  <asp:Button CommandName="PrevView" ID="btnprevious2" runat="server" Text = "Go To Previous View"/>
               </asp:View>

               <asp:View ID="View3" runat="server">
                  <h3> This is view 3</h3>
                  <br/>
                  <asp:Calendar ID="Calender1" runat="server"></asp:Calendar>
                  <br/>
                  <asp:Button  CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnfirst"   runat="server" Text = "Go To Next"/>
                  <asp:Button CommandName="PrevView" ID="btnprevious" runat="server" Text = "Go To Previous View"/>
               </asp:View>

            </asp:MultiView>
         </div>

      </form>
   </body>
</html>

次の点に注意してください。

MultiView.ActiveViewIndexは、表示されるビューを決定します。 これは、ページに表示される唯一のビューです。 ビューが表示されていない場合、ActiveViewIndexのデフォルト値は-1です。 ActiveViewIndexは例では2として定義されているため、実行すると3番目のビューが表示されます。

MultiView