מדריך ASP.NET – פקדים צד השרת: MultiView

מפעם לפעם צריך לרכז קבוצות פקדים בכמה חלוניות בדף אחד ולתת למשתמש אפשרות לדפדף בהן.
הפתרון הטוב ביותר הוא להשתמש בפקד MultiView
פקד MultiView כולל תמיכה בדפדוף בין התצוגות השונות המוחזקות בו ומראה תצוגה יחידה בכל פעם.

במדריך זה נבנה דף אינטרנט עם 3 תצוגות. העברה בין התצוגות מתבצעת ע”י בחירת ערך מרשימה נפתחת.
ובחלק שני של המדריך נוסיף כפתורי ניווט בין התצוגות.
לפניכם תוצאה של הישום בנוי עם MultiView
תצוגה א’ של קובץ DEFAULT.ASPX

תצוגה ב’ של קובץ DEFAULT.ASPX

תצוגה ג’ של קובץ DEFAULT.ASPX

מכאן נתחיל לבנות פרוייקט
נוסיף פקד Multiview לטופס

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

ובתוכו נכניס 3 פקדי View:
View ראשון מכיל תמונה

<asp:View ID="photo" runat="server">
<h1>
my photo</h1>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Tulips.jpg" Width="100px" Height="60px" /><br />
</asp:View>

View שני מכיל טקסט

<asp:View ID="text" runat="server">
  <h1 >
    my text</h1>
  <p >
    <strong>hello!<br/>
    wellcome<br/> 
    to our<br/>
    site </strong>
  </p>
</asp:View>

View שלישי מכיל לוח שנה

<asp:View ID="calendar" runat="server">
<h1>
my calendar</h1>
<asp:Calendar ID="Calendar1" runat="server" BackColor="#C0FFFF" BorderColor="Red"
BorderStyle="Ridge" Height="16px" Width="16px"></asp:Calendar>
</asp:View>

בתצוגת DESIGN הדף נראה כדלקמן

אם ברצונינו להציג תצוגה ראשונה בטעינת הדף, צריך לקבוע מאפיין; ActiveViewIndex של MultiView ל0

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

כדי לנווט בין התצוגות נוסיף רשימה נפתחת ריקה:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
onselectedindexchanged="DropDownList1_SelectedIndexChanged1">
</asp:DropDownList>

בקובץ CS נכתוב קוד שעורך אוסף פריטי הרשימה לפי ID של פקדי View:

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
    DropDownList1.DataSource = MultiView1.Views;
    DropDownList1.DataTextField = "ID";
    DropDownList1.DataBind();
  }
}

עכשיו כאשר בוחרים אלמנט מתוך הרשימה צריך לשנות את התצוגה הנוכחית של MultiView.
זה יכול להיות מיושם כדלקמן:
במטפל אירוע OnSelectedIndexChanged נוסיף קוד :

protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
{
  MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;
}

כדי ששינוי בחירת הפריט בDropDownList יעדכן מיד את הדף, צריך להגדיר המאפיין AutoPostBack כ-True

Multiview עם כפתורי ניווט

ניתן להוסיף לחצני ניווט ,המאפשרים לעבור לסעיף הבא או הקודם.
לחלק View1 נוסיף לחצן להעברה לתצוגה הבאה:

לחלק View2 נוסיף 2 לחצנים : לחצן ראשון – להעברה לתצוגה הבאה ושני – לחזרה לתצוגה הקודמת:

<asp:Button ID="btnPre1" runat="server" Text="< Prev"  CommandName="PrevView"/>
<asp:Button ID="btnNext1" runat="server" Text="Next >" CommandName="NextView" />

ולחלק View3 נוסיף לחצן חזרה:

<asp:Button ID="btnPre2" runat="server" Text="Prev"  CommandName="PrevView"/>

המאפיין CommandName קובע פעולה שמתבצעת בלחיצה על הכפתור:

בעת השימוש בלחצנים לניווט צריך לשנות גם ערך שדה הנבחר ברשימה נפתחת.
לצורך זה נוסיף קוד:

protected void MultiView1_ActiveViewChanged(object sender, EventArgs e)
{
  DropDownList1.SelectedIndex = MultiView1.ActiveViewIndex;
}

התוצאה של הפעלת הישום: