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

2011-05-09

11334
0
ASP.NET

摘要:[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

回首頁