DCSIMG
Question from Tapuz .Net forum: Updating ASP.Net Page display without refreshing - Justin myJustin = new Justin( Expriences.Current );

Question from Tapuz .Net forum: Updating ASP.Net Page display without refreshing

שאלה:

אני כותב ממשק הזנה לDB. משתמש ב gridview. עם asp.net2.
יש רשימת לקוחות ולכל לקוח יש רשימת פרוייקטים. כשבוחרים לקוח רשימת הפרוייקטים מסתננת לפי הבחירה.

מה הדרך הכי טובה להשתמש ליישם סינון אינטרקטיבי? (ajax? javascript? )
 למרות שאין לי זמן להכנס לזה, כנראה שאצטרך להשתמש ב AJAX. יש כל מיני מחלקות ותוספים לעבודה עם AJAX, על איזה אתם ממליצים?

 

תשובה:

ב-Microsoft AJAX קיים פקד חדש בשם UpdatePanel. בדיוק כמו Panel רגיל הוא מכיל בתוכו פקדים אחרים, אך בנוסף ליכולות של Panel רגיל יש לו יכולות AJAXיות.
כל פקד שנמצא בתוך ה-UpdatePanel יכול להתרפרש בצורה דינמית ע"י טריגרים מסויימים.
טריגרים לדוגמה ל-UpdatePanel שיגרמו לתוכן שלו להתרפרש: לחיצה כל כפתור, שינוי טקסט ב-TextBox, סימון CheckBox וכמו ששאלת בחירת ערך ב-DropDownList.
בתוך האירועים שמתאימים לטריגרים שמים את הקוד שרוצים שישנה את הפקדים בתוך ה-Panel.
למשל, במקרה שלנו יהיה לנו מחוץ ל-UpdatePanel פקד DropDownList רגיל לחלוטין.

        <asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem>www.JustinAngel.Net</asp:ListItem>

            <asp:ListItem>blogs.Microsoft.co.il</asp:ListItem>

        </asp:DropDownList>

 

נרצה ששינוי של ערך ב-DropDownList יגרום לשינוי כלשהו בדף ונרצה שהוא יהיה AJAXי ולכן נשנה קלות את הקוד של ה-DropDownList שישקף זאת

       <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

            <asp:ListItem>www.JustinAngel.Net</asp:ListItem>

            <asp:ListItem>blogs.Microsoft.co.il</asp:ListItem>

        </asp:DropDownList>

נוסיף לדף UpdatePanel שאמרנו שנרצה שהפקדים בו ישתנו עם שינוי הערך הנבחר ב-DropDownList.

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />

            </Triggers>

        </asp:UpdatePanel>

 

נכניס לתוך ה-UpdatePanel שלנו GridView שהמטרה שלה היא להציג לנו את הערך שנבחר כרגע ב-DropDownList:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />

            </Triggers>

            <ContentTemplate>

                <asp:GridView runat="server" ID="GridView1" />

            </ContentTemplate>

        </asp:UpdatePanel>

 

נדאג כי האירוע SelectedIndexChanged יקושר ל-GridView כך שידאג לשנות אותו לערך הנבחר:

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        GridView1.DataSource = new string[] {DropDownList1.SelectedItem.Text};

        GridView1.DataBind();

    }

 

כל הקוד הזה לכאורה (ובמיוחד ה-AutoPostBack על ה-DropDownList) היו אמורים לגרום לרפרוש של הדף, אבל הם לא.
הכל מתבצע בשורה שקטה ואכן הטקסט הנבחר מופיע בתוך ה-GridView.

 

קישור: http://www.tapuz.co.il/tapuzforum/main/Viewmsg.asp?forum=831&msgid=91951541

Published Monday, January 08, 2007 9:01 PM by Justin-Josef Angel [MVP]

Comments

No Comments