[ASP.NET] Gridview 於編輯時,自動計算使用者輸入的值

摘要:[ASP.NET] Gridview 於編輯時,自動計算使用者輸入的值

 

 如果希望可以在 Gridview 於編輯狀態下,輸入 N1 與 N2 的值時,系統能自動累加(計算),該怎麼做呢?我們都知道 Textbox 可以在 TextChanged 事件裡去做一些處理,那怎麼套用到 Gridview 的狀況下呢?

  1. 對 Gridview 的欄位進行轉換為 TemplateField
  2. 可以對不需要異動的欄位設定 Read-Only 屬性
  3. 到 aspx 程式碼,找到 Textbox 對應程式片段的位置
  4. 若 Gridview 內容較長,希望顯示位置停留在「編輯、更新中」的欄位
  5. 寫一個 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 ObjectByVal 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