WebSurfer's Home

""

GridView の中の値を計算し結果を表示

GridView の中の値を計算し、結果を GridView 中に表示します。 JavaScript で行うものとサーバーで行うものの両方の例を作りました。 JavaScript 判で計算結果を Label でなく TextBox に表示している理由は、Label には value 属性がないからです。


JavaScript 版

コード商品名単価数量合価
0Item 0 123000
1Item 1 246000
2Item 2 369000

サーバー版

コード商品名単価数量合価
0Item 0123000
1Item 1246000
2Item 2369000

コードは以下のとおりです。

<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> DataTable CreateDataTable() { DataTable dt = new DataTable(); DataRow dr; dt.Columns.Add(new DataColumn("Code", typeof(Int32))); dt.Columns.Add(new DataColumn("Name", typeof(string))); dt.Columns.Add(new DataColumn("Price", typeof(Int32))); for (int i = 0; i < 3; i++) { dr = dt.NewRow(); dr["Code"] = i; dr["Name"] = "Item " + i.ToString(); dr["Price"] = 123000 * (i + 1); dt.Rows.Add(dr); } return dt; } void Page_Load(Object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = CreateDataTable(); GridView1.DataSource = dt; GridView2.DataSource = dt; GridView1.DataBind(); GridView2.DataBind(); } } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { Label label0 = (Label)e.Row.FindControl("Label0"); TextBox textbox1 = (TextBox)e.Row.FindControl("TextBox1"); TextBox textbox3 = (TextBox)e.Row.FindControl("TextBox3"); textbox1.Attributes.Add("onchange", String.Format("CalculateSum(\"{0}\", \"{1}\", \"{2}\");", label0.Text, textbox1.ClientID, textbox3.ClientID)); } } protected void TextBox2_TextChanged(object sender, EventArgs e) { TextBox textbox = (TextBox)sender; string qty = textbox.Text; GridViewRow row = (GridViewRow)(textbox.Parent).Parent; string price = row.Cells[2].Text; Label total = (Label)row.FindControl("Label2"); total.Text = (Int32.Parse(price) * Int32.Parse(qty)).ToString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無題のページ</title> </head> <body> <form id="form1" runat="server"> <div> <h3>JavaScript 版</h3> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onrowdatabound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="Code" HeaderText="コード" /> <asp:BoundField DataField="Name" HeaderText="商品名" /> <asp:TemplateField HeaderText="単価"> <ItemTemplate> <asp:Label ID="Label0" runat="server" Text='<%# Eval("Price") %>'> </asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="数量"> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server" > </asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="合価"> <ItemTemplate> <asp:TextBox ID="TextBox3" runat="server" ></asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <h3>サーバー版</h3> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Code" HeaderText="コード" /> <asp:BoundField DataField="Name" HeaderText="商品名" /> <asp:BoundField DataField="Price" HeaderText="単価" /> <asp:TemplateField HeaderText="数量"> <ItemTemplate> <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True" ontextchanged="TextBox2_TextChanged" ></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="合価"> <ItemTemplate> <asp:Label ID="Label2" runat="server"> </asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html> <script type="text/javascript"> <!-- function CalculateSum(unitPrice, textBox1ClientID, textBox3ClientID) { var qty = document.getElementById(textBox1ClientID).value; var obj = document.getElementById(textBox3ClientID); if (!isNaN(unitPrice) && !isNaN(qty)) { obj.value = unitPrice * qty; } } //--> </script>