摘要:[ASP.NET] Gridview 於編輯時,自動計算使用者輸入的值
如果希望可以在 Gridview 於編輯狀態下,輸入 N1 與 N2 的值時,系統能自動累加(計算),該怎麼做呢?我們都知道 Textbox 可以在 TextChanged 事件裡去做一些處理,那怎麼套用到 Gridview 的狀況下呢?
- 對 Gridview 的欄位進行轉換為 TemplateField
- 可以對不需要異動的欄位設定 Read-Only 屬性
- 到 aspx 程式碼,找到 Textbox 對應程式片段的位置
- 若 Gridview 內容較長,希望顯示位置停留在「編輯、更新中」的欄位
- 寫一個 Function 來對應你要做計算的事項
依序說明如下:
◎對 Gridview 的欄位進行轉換為 TemplateField◎
◎可以對不需要異動的欄位設定 Read-Only 屬性◎
◎到 aspx 程式碼,找到 Textbox 對應程式片段的位置◎
底下程式碼的「OnTextChanged」代表當使用者在該 TextBox 有做文字輸入或修改時,會觸發此 OnTextChanged 事件,我們以此來呼叫我們設定的 Function「CountAcc」。 不管使用者是針對 N1 欄位或 N2 欄位做修改,我們都要重新計算,所以欄位 N2 的程式片段也要做相同的改變。 「AutoPostBack="true"」則代表有此事件發生,啟動 PostBack 動作。 |
<asp:TemplateField HeaderText="N1" SortExpression="N1"> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("N1") %>' OnTextChanged="CountAcc" AutoPostBack="true"></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("N1") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> |
◎若 Gridview 內容較長,希望顯示位置停留在「編輯、更新中」的欄位◎
在前端 ASPX 的 Page 宣告部份增加「MaintainScrollPositionOnPostback="true"」 |
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" MaintainScrollPositionOnPostback="true" Inherits="gv._Default" %> |
◎寫一個 Function 來對應你要做計算的事項◎
只要前端的「OnTextChanged」能正確的呼叫我們的 Function「CountAcc」,那麼只需要利用 Findcontrol 的方式抓到對應的 TextBox 取出其值計算,便不是多難的事了。 |
Protected Sub CountAcc(ByVal sender As Object, ByVal e As EventArgs) Dim My_tb1 As TextBox '利用 Findcontrol 來對應 Gridview 裡的 TextBox 'N1 欄位 My_tb1 = CType(GridView1.Rows(GridView1.EditIndex).FindControl("TextBox1"), TextBox) 'N2 欄位 Dim My_tb2 As TextBox My_tb2 = CType(GridView1.Rows(GridView1.EditIndex).FindControl("TextBox2"), TextBox) '總和 Sum 欄位 Dim My_tb3 As TextBox My_tb3 = CType(GridView1.Rows(GridView1.EditIndex).FindControl("TextBox3"), TextBox) '執行計算動作 My_tb3.Text = CInt(My_tb1.Text) + CInt(My_tb2.Text) End Sub |
但 PostBack 就是會在那閃阿閃的看起來礙眼,就用 updatepanel 給他包起來,輕鬆完成無刷的效果
動作一:先拉一個 scriptmanager 到 aspx 裡的最前面
動作二:將 Gridview 放到 updatepanel 裡
上面放那個圖是用來感知「無刷感」AJAX的效果。
~ End