2009/5/2 記
GridView の中の値を計算し結果を表示
GridView の中の値を計算し、結果を GridView 中に表示します。
JavaScript で行うものとサーバーで行うものの両方の例を作りました。
JavaScript 判で計算結果を Label でなく TextBox に表示している理由は、Label には value 属性がないからです。
コードは以下のとおりです。
<%@ 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>