none
GRIDVIEW内のTEXTBOXでの計算。 RRS feed

  • 質問

  •  

    ただいまASPにて模擬開発を行っております。

    gridviewに商品マスタ(商品コード,商品名,単価)をバインドして、

    TEXTBOX(数量),LABEL(合計金額),ボタン(登録ボタン)を設置しています。

    textboxに数値を入れたときにlabelに合計金額を出したいと思うのですが、

    LBL_合計金額=TXT_数量.X

    とやってもLBL,TXTともに宣言されていないと怒られてしまいます。

    なにかよい方法をご伝授いただきたいです。

    よろいくおねがいします。

     

     

     

    2008年8月1日 0:14

回答

  • > javascriptでやるにはどのようにしたらよいのでしょうか??

     

    まずはJavaScriptでどのようにしたら表示されているページの内容を変更することができるのかを調べてみましょう。
    今だと、何もわからないので一から教えてくれ、といわれているようですが、掲示板上でのやりとりだけで何も知らない人にすべて教えられるほど単純なものではないと思います。

    2008年8月1日 4:06
  •  ぱんだ さんからの引用


    gridviewに商品マスタ(商品コード,商品名,単価)をバインドして、
    TEXTBOX(数量),LABEL(合計金額),ボタン(登録ボタン)を設置しています。
    textboxに数値を入れたときにlabelに合計金額を出したいと思うのですが、
    LBL_合計金額=TXT_数量.X
    とやってもLBL,TXTともに宣言されていないと怒られてしまいます。


    GridView 内に配置したコントロールは、実行時にバインドデータの件数分生成されるわけなので、フィールドは定義されません。
    よって "LBL_合計金額=TXT_数量.X" というようなコードは書けません。

    GridView 内に配置したコントロールをプログラムで操作したいなら、
    コントロールにイベントハンドラを設けて、sender パラメータでイベント元コントロールを受け取るとか、
    FindControl メソッドで特定の行内にある "LBL_合計金額" を取得するといった方法になります。

    例えば、テキストボックスに入力された値を隣のラベルにそのまま表示する場合、
    テキストボックスの TextChanged イベントにハンドラを用意し、次のようなコードを書けばいけます。
    (既定ではテキストボックスの TextChanged イベントは発生しないので、AutoPostBack を true に設定する必要があります。)
    Code Snippet
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        TextBox t = (TextBox)sender;
        Label l = t.FindControl("Label1");
        l.Text = t.Text;
    }

     

    2008年8月1日 4:17
  •  ぱんだ さんからの引用

    javascriptでやるにはどのようにしたらよいのでしょうか??

     

    たぶん、こんな感じですよね? 動作を確かめてないんでおかしな部分があるかもしれません。

     

    Code Snippet

    <script type="text/javascript" language="javascript">
    function CalculateSum(arg1, arg2, arg3)
    {
        var value1 = document.getElementById(arg1).value;
        var value2 = document.getElementById(arg2).value;

        var obj = document.getElementById(arg3);

     

        if (!isNaN(value1) && !isNaN(value2))
        {
            obj.value = parseInt(value1) * parseInt(value2);
        }
    }
    </script>


      protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
      {

       if (e.Row.RowState == DataControlRowState.Edit)
       {
        TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox1");    //単価
        TextBox textBox2 = (TextBox)e.Row.FindControl("TextBox2");    //数量
        TextBox textBox3 = (TextBox)e.Row.FindControl("TextBox3");    //合計

        //単価

        textBox1.Attributes.Add("onkeyup", @"CalculateSum(""" + textBox1.ClientID + @""",""" + textBox2.ClientID + @""",""" + textBox3.ClientID + @""")");

        //数量    

        textBox2.Attributes.Add("onkeyup", @"CalculateSum(""" + textBox1.ClientID + @""",""" + textBox2.ClientID + @""",""" + textBox3.ClientID + @""")");
       }

      }

     

     

     

    2008年8月1日 4:37
    モデレータ
  • > JscriptのfunctionにVBから値を渡すことは可能なのでしょうか?

     

    できないです。C# ですが、JavaScript で行なうのと、サーバー側で行なうのと両方

    サンプルを作ってみました。参考になれば幸いです。

     

    Code Snippet

    <%@ 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[0] = i;
                dr[1] = "Item " + i.ToString();
                dr[2] = 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 textbox = (TextBox)e.Row.FindControl("TextBox1");
                Label label1 = (Label)e.Row.FindControl("Label1");
                TextBox textbox3 = (TextBox)e.Row.FindControl("TextBox3");
                textbox.Attributes.Add("onchange",
                    String.Format("CalculateSum(\"{0}\", \"{1}\", \"{2}\");",
                        label0.Text, textbox.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" ReadOnly="True" ></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(arg1, arg2, arg3)
    {
        var qty = document.getElementById(arg2).value;
        var obj = document.getElementById(arg3);

        if (!isNaN(arg1) && !isNaN(qty))
        {
            obj.value = (parseInt(arg1) * parseInt(qty));
        }
    }
    //-->
    </script>

     

     

    2008年8月1日 10:03

すべての返信

  • 問題はエラーメッセージの通りだと思うのですが、さすがにこれだけではわかりません。TextBoxに数字を入れるとリアルタイムでLabelに合計金額を表示したいように思えるのですが、その通りでしょうか? であれば、javascriptで書かれているのですか?

    いずれにしてもご質問の内容がよくわかるように、できればソースをご提示願えますか?

    2008年8月1日 0:36
    モデレータ
  • ありがとうございます。

    そのとおりです。

    javascriptで書く仕様なんですが、まずはjavascriptを使わずにと思っていたのですが・・・・

    javascriptでやるにはどのようにしたらよいのでしょうか??

     

    ソースなんですがデータをバインドする以外はなにもかけておりません。

     

    2008年8月1日 0:41
  • > javascriptでやるにはどのようにしたらよいのでしょうか??

     

    まずはJavaScriptでどのようにしたら表示されているページの内容を変更することができるのかを調べてみましょう。
    今だと、何もわからないので一から教えてくれ、といわれているようですが、掲示板上でのやりとりだけで何も知らない人にすべて教えられるほど単純なものではないと思います。

    2008年8月1日 4:06
  •  ぱんだ さんからの引用


    gridviewに商品マスタ(商品コード,商品名,単価)をバインドして、
    TEXTBOX(数量),LABEL(合計金額),ボタン(登録ボタン)を設置しています。
    textboxに数値を入れたときにlabelに合計金額を出したいと思うのですが、
    LBL_合計金額=TXT_数量.X
    とやってもLBL,TXTともに宣言されていないと怒られてしまいます。


    GridView 内に配置したコントロールは、実行時にバインドデータの件数分生成されるわけなので、フィールドは定義されません。
    よって "LBL_合計金額=TXT_数量.X" というようなコードは書けません。

    GridView 内に配置したコントロールをプログラムで操作したいなら、
    コントロールにイベントハンドラを設けて、sender パラメータでイベント元コントロールを受け取るとか、
    FindControl メソッドで特定の行内にある "LBL_合計金額" を取得するといった方法になります。

    例えば、テキストボックスに入力された値を隣のラベルにそのまま表示する場合、
    テキストボックスの TextChanged イベントにハンドラを用意し、次のようなコードを書けばいけます。
    (既定ではテキストボックスの TextChanged イベントは発生しないので、AutoPostBack を true に設定する必要があります。)
    Code Snippet
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        TextBox t = (TextBox)sender;
        Label l = t.FindControl("Label1");
        l.Text = t.Text;
    }

     

    2008年8月1日 4:17
  •  ぱんだ さんからの引用

    javascriptでやるにはどのようにしたらよいのでしょうか??

     

    たぶん、こんな感じですよね? 動作を確かめてないんでおかしな部分があるかもしれません。

     

    Code Snippet

    <script type="text/javascript" language="javascript">
    function CalculateSum(arg1, arg2, arg3)
    {
        var value1 = document.getElementById(arg1).value;
        var value2 = document.getElementById(arg2).value;

        var obj = document.getElementById(arg3);

     

        if (!isNaN(value1) && !isNaN(value2))
        {
            obj.value = parseInt(value1) * parseInt(value2);
        }
    }
    </script>


      protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
      {

       if (e.Row.RowState == DataControlRowState.Edit)
       {
        TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox1");    //単価
        TextBox textBox2 = (TextBox)e.Row.FindControl("TextBox2");    //数量
        TextBox textBox3 = (TextBox)e.Row.FindControl("TextBox3");    //合計

        //単価

        textBox1.Attributes.Add("onkeyup", @"CalculateSum(""" + textBox1.ClientID + @""",""" + textBox2.ClientID + @""",""" + textBox3.ClientID + @""")");

        //数量    

        textBox2.Attributes.Add("onkeyup", @"CalculateSum(""" + textBox1.ClientID + @""",""" + textBox2.ClientID + @""",""" + textBox3.ClientID + @""")");
       }

      }

     

     

     

    2008年8月1日 4:37
    モデレータ
  •  

    おっしゃるとおりです。

    自分でもある程度調べたつもりでもういやになって聞いてしまいました。

    申し訳ないです。

    2008年8月1日 6:55
  • 皆様ありがとうございます。

    すこしは理解をしてきました。

     

    gridviewのTXTの指定などはできるようになりました。

     

    ここで新たな質問で申し訳ないのですが。

    JscriptのfunctionにVBから値を渡すことは可能なのでしょうか?

    どうやってやったらいいのでしょうか・・・・?

    もしよろしければご指導ご鞭撻のほどお願いいたします。

    2008年8月1日 8:20
  • > JscriptのfunctionにVBから値を渡すことは可能なのでしょうか?

     

    できないです。C# ですが、JavaScript で行なうのと、サーバー側で行なうのと両方

    サンプルを作ってみました。参考になれば幸いです。

     

    Code Snippet

    <%@ 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[0] = i;
                dr[1] = "Item " + i.ToString();
                dr[2] = 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 textbox = (TextBox)e.Row.FindControl("TextBox1");
                Label label1 = (Label)e.Row.FindControl("Label1");
                TextBox textbox3 = (TextBox)e.Row.FindControl("TextBox3");
                textbox.Attributes.Add("onchange",
                    String.Format("CalculateSum(\"{0}\", \"{1}\", \"{2}\");",
                        label0.Text, textbox.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" ReadOnly="True" ></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(arg1, arg2, arg3)
    {
        var qty = document.getElementById(arg2).value;
        var obj = document.getElementById(arg3);

        if (!isNaN(arg1) && !isNaN(qty))
        {
            obj.value = (parseInt(arg1) * parseInt(qty));
        }
    }
    //-->
    </script>

     

     

    2008年8月1日 10:03
  • こんにちは。中川俊輔 です。

     

    皆様、回答ありがとうございます。

     

    ぱんださん、フォーラムのご利用ありがとうございます。

    その後いかがでしょうか?

    勝手ながら、有用な情報と思われる回答へ回答済みチェックをつけさせていただきました。

     

    回答済みチェックが付くことにより、有用な情報を探している方が情報を見つけやすくなります。
    有用な情報と思われる回答があった場合は、なるべく回答済みボタンを押してチェックを付けてください。

    ぱんださんはチェックを解除することもできますので、ご確認ください。

     

    それでは!

    2008年8月15日 10:11