استفاده از UpdatePanel به همراه Triggers

یکشنبه 17 خرداد 1394

در این مقاله بنا به درخواست و سوالی که یکی از دوستان درباره Update Panel به همراه استفاده از Triggers شده نمونه ای آماده کردم که براتون ارائه میدم.

استفاده از UpdatePanel به همراه Triggers

در طراحی سایت توسط ASP .Net زمانی وجود داره که ما نیاز به این داریم که کل صفحه Postback نشه بنابراین از Updatepanel استفاده میکنیم حال این احتمال وجود داره که یکی از اجزاء صفحه ما که داخل Updatepanel نیست همراه با Postback شدن صفحه نیاز به refresh شدن داشته باشه، اینجاست که trigger به کمکمون میاد و این مشکل را حل میکند. در مثال زیر این موضوع به صورت یک نمونه کامل انجام داده شده.

در زیر کد صفحه aspx ما قرار داره که داخل آن دو updatepanel، دو Button ، یک Gridview و یک Label وجود داره:

<div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="grdList" runat="server" AutoGenerateColumns="False" OnRowCommand="grdList_OnRowCommand">
                        <Columns>
                            <asp:BoundField DataField="Name" HeaderText="نام و نام خانوادگی"></asp:BoundField>
                            <asp:BoundField DataField="Job" HeaderText="شغل"></asp:BoundField>
                            <asp:TemplateField HeaderText="دستورات">
                                <ItemTemplate>
                                    <asp:Button ID="Button1" runat="server" Text="نمایش" CommandName='<%# string.Format("نام و نام خانوادگی: {0} - شغل: {1}",Eval("Name"),Eval("Job"))  %>'/>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
            </Triggers>
            </asp:UpdatePanel>
            <asp:Button ID="btnRefresh" runat="server" Text="Button" OnClick="btnRefresh_OnClick"/>
        </div>

        <%--//////////////--%>
        <%--قسمت های دیگر--%>
        <%--//////////////--%>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblNameJob" runat="server"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

 

نکته قابل توجه اینه که Updatepanel با Scriptmanager کار میکنه حتما آن را به صفحه اضافه کنید .

در زیر کد ساخت یک کلاس و پر کردن اطلاعات اولیه Gridview در PageLoad صفحه توسط لیستی از آن کلاس نمایش داده میشه:

class People
    {
        public string Name { get; set; }
        public string Job { get; set; }

    }

 

{
            if (!Page.IsPostBack)
            {
                var list = new List<People>
                {
                    new People() {Name = "سجاد باقرزاده", Job = "برنامه نویس"},
                    new People() {Name = "ایمان مدائنی", Job = "برنامه نویس"},
                    new People() {Name = "حسین مولایی", Job = "دکتر دندان پزشک"}
                };
                grdList.DataSource = list;
                grdList.DataBind();
            }
        }

 

حال رویدادهای دکمه btnRefresh  که خارج از Updatepanel1 قرار دارد و دکمه ی داخل Gridview را نمایش میدهیم:

protected void btnRefresh_OnClick(object sender, EventArgs e)
        {
            lblNameJob.Text = "خط 1 - نام و نام خانوادگی: " + grdList.Rows[0].Cells[0].Text + " - شغل: " + grdList.Rows[0].Cells[1].Text+"<br/>";
            lblNameJob.Text += "خط 2 - نام و نام خانوادگی: " + grdList.Rows[1].Cells[0].Text + " - شغل: " + grdList.Rows[1].Cells[1].Text + "<br/>";
            lblNameJob.Text += "خط 3 - نام و نام خانوادگی: " + grdList.Rows[2].Cells[0].Text + " - شغل: " + grdList.Rows[2].Cells[1].Text + "<br/>";
            lblNameJob.Text += "<a href='http://www.barnamenevisan.org' target='_blank' />سایت رسمی برنامه نویسان</a>";
        }

        protected void grdList_OnRowCommand(object sender, GridViewCommandEventArgs e)
        {
            lblNameJob.Text = e.CommandName;
        }

 

توجه داشته باشید که کار triggerهای Updatepanel1 و Updatepanel2 این است که زمان postback دکمه btnRefresh، هر دو updatepanel بروز شود.

 

-- بررسی triggers:

<Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
            </Triggers>

ControlID = نام component ما که لازم است با postback شدن روی updatepanelهای ما کاری را انجام دهند.

EventName = نام رویداد مربوط به component انتخاب شده که در اینجا رویداد Click دکمه btnRefresh میباشد.

فایل های ضمیمه

سجاد باقرزاده

نویسنده 54 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید