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

‏ • Nasi ‏ • 3 באפריל, 2011

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

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

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

asp.net MultiView

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

asp.net MultiView

מכאן נתחיל לבנות פרוייקט
נוסיף פקד 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 הדף נראה כדלקמן

ASP.NET MultiView

אם ברצונינו להציג תצוגה ראשונה בטעינת הדף, צריך לקבוע מאפיין; 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 נוסיף לחצן להעברה לתצוגה הבאה:

<asp:Button ID="btnNext0" runat="server" Text="Next" CommandName="NextView" />

לחלק 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 קובע פעולה שמתבצעת בלחיצה על הכפתור:

ערך פעולה הערות
PreView ניווט לView הקודם  
NextView ניווט לView הבא  
SwitchViewByID ניווט לView לפי ID במאפיין CommandArgument של לחצן לציין ID
SwitcViewByIndex ניווט לView לפי INDEX במאפיין CommandArgument של לחצן לציין INDEX

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

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

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

ASP.NET MultiView

תגיות: , , , ,

תגובות בפייסבוק