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