1. 程式人生 > 實用技巧 >C#服務控制元件UpdatePanel的區域性重新整理與屬性AutoPostBack回傳(盜)

C#服務控制元件UpdatePanel的區域性重新整理與屬性AutoPostBack回傳(盜)

本文為盜,(原文連結)

  C#服務控制元件許多都有AutoPostBack這一屬性(AutoPostBack意思是自動回傳,也就是說此控制元件值更改後是否和伺服器進行互動),如下程式碼所示:

       protected void Textbox1_TextChanged(object sender, EventArgs e)
        {
            TextBox txt = (TextBox)sender;
             var txt_text = txt.Text.Trim().Split(' ')[0];//獲取修改後的文字(不包括後面的時間)
            txt.Text = txt_text + " " + DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");//設定文字
        }

 其中textbox中的OnTextChanged事件,如果沒有AutoPostBack=“true”的屬性,該事件永遠不會跟後臺有互動(也就是永遠不會進到方法Textbox1_TextChanged裡面)

之後加入AutoPostBack屬性後,終於能執行裡面的程式碼,效果圖如下:

  效果是實現了,但是細心的人會發現頁面其實在重新整理了(相當於手動給瀏覽器按F5了)。當頁面上的資料量不是很大的時候,頁面重新整理非常快不細心的話根本看不出來;一旦資料量大了,重新整理頁面就會很慢。

這時候就需要UpdatePanel控制元件了(由於本人也是剛剛接觸一系列服務控制元件,理解的也不是很多請見諒),直接上程式碼了。

 <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:DataGrid ID="dgData" runat="server" CssClass="GridViewStyle" DataKeyField="xh"
                    AllowSorting="True" AutoGenerateColumns="False" PageSize="10" Width="100%">
                    <FooterStyle CssClass="GridViewFooterStyle" />
                    <ItemStyle CssClass="GridViewRowStyle" />
                    <HeaderStyle CssClass="GridViewHeaderStyle" />
                    <PagerStyle Mode="NumericPages" CssClass="GridViewPagerStyle" />
                    <Columns>
                        <asp:BoundColumn HeaderText="院系" HeaderStyle-HorizontalAlign="Center" DataField="xsmc">
                        </asp:BoundColumn>
                        <asp:BoundColumn HeaderText="專業" HeaderStyle-HorizontalAlign="Center" DataField="zymc">
                        </asp:BoundColumn>
                        <asp:BoundColumn DataField="xh" HeaderText="學號" HeaderStyle-HorizontalAlign="Center">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                            <ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
                        </asp:BoundColumn>
                        <asp:BoundColumn DataField="xm" HeaderText="姓名" HeaderStyle-HorizontalAlign="Center">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                            <ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
                        </asp:BoundColumn>
                        <asp:TemplateColumn HeaderText="成績屬性" HeaderStyle-HorizontalAlign="Center">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                            <ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
                            <ItemTemplate>
                                <asp:Label ID="lblcjsx" runat="server" Text='<%# DataBinder.Eval(Container,"DataItem.cjsx")%>'>
                                </asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn HeaderStyle-Width="60" HeaderText="考核成績" HeaderStyle-HorizontalAlign="Center"
                            ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:TextBox ID="txtCJ" runat="server" MaxLength="5" Width="90%" AutoPostBack="true"
                                    OnTextChanged="txtCj_Change" CssClass="txtbox" Text='<%# DataBinder.Eval(Container,"DataItem.cj")%>'>
                                </asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn HeaderStyle-Width="60" HeaderText="考核成績" HeaderStyle-HorizontalAlign="Center"
                            ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:DropDownList ID="drpCJ" runat="server">
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:BoundColumn DataField="id" Visible="False"></asp:BoundColumn>
                        <asp:BoundColumn DataField="cj" Visible="False"></asp:BoundColumn>
                    </Columns>
                </asp:DataGrid>
            </ContentTemplate>
        </asp:UpdatePanel>

UpdatePanel控制元件下面ContentTemplate基本上可以放任何控制元件,設定UpdateMode屬性為Conditional,設定控制元件下面的一個控制元件進行回傳的話就會像前端Ajax一樣實現區域性重新整理而不會進行全頁面的重新整理。

     //區域性更新資料
        protected void txtCj_Change(object sender, EventArgs e)
        {
            TextBox txtCJ = (TextBox)sender;
            var cj = txtCJ.Text.Trim();//考核成績
            decimal temp;
            if (Decimal.TryParse(cj, out temp) && temp <= 100 && temp >= 0)
            {
                DataGridItem dgItem = (DataGridItem)txtCJ.Parent.Parent;
                this.SaveCJ(dgItem, txtCJ);
            }
            else
            {
                //txtCJ.Focus();
                txtCJ.BackColor = Color.YellowGreen;
                //PageCtrl.ShowMessage(this, "考核成績出現非法資料(綠色標記部分),請修正!");
                ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "xz", "alert('儲存出錯')", true);
            }
        }

 值得注意的是,當使用UpdatePanel控制元件時註冊JS的一些方法許多都不能使用(如 response.write(string script),this.RegisterStartupScript(string key, string script)等),要使用

ScriptManager.RegisterClientScriptBlock(Control control, Type type, string key, string script, bool addScriptTags)進行JS的註冊,否則的話UpdatePanel非同步執行不會執行裡面的JS