none
GridViewとJavaSCriptの連携 RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

     

    GridViewにあるTextBoxがonblurしたときに同じ行にあるLabelのTextを設定するようにしようとしたのですが

    実現できませんでした。

     

    そのときの方法はRowCreatedイベント内で行ごとに

     TextBox.Attributes.Add("onblur", "function(テキストボックスid,ラベルのid);")

    とし、JavaScript側では渡されたidをもとに値を計算させてます。

     

    HTMLを見ると、全ての行のTextBoxのidとLabelのidが同じだったので

    どの行でのイベントなのか特定できず、対処の仕方に詰まっています。。

     

    そこでですが

    どのようにすればGridViewでonblur時に値を設定できるのかご教授ください。（そもそも実現可能？）

    また、他のやり方があるのであればそちらの情報もいただければと思います。

     

    2008年4月16日 10:06
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票
     閣下 さんからの引用

     

     TextBox.Attributes.Add("onblur", "function(テキストボックスid,ラベルのid);")

    とし、JavaScript側では渡されたidをもとに値を計算させてます。

     

     

    確認になりますが、テキストボックスは、サーバーコントロールのTextBoxで宜しいですか？

    もし、サーバーコントロールのTextBoxであれば、テキストボックスのIDは、クライアントIDを渡す必要があります。

     

    定義例：

    TextBox.Attributes.Add("onblur", "function(テキストボックスのClientID, ラベルのClientID);")

     

    実際の例

    TextBox.Attributes.Add("onblur", "function(TextBox1.ClientID, Label1.ClientID);")

     

    ご参考になれば幸いです。

    2008年4月16日 13:19
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > 何らかの方法でGridView中のClientIDに行毎に個別の値を設定することは可能でしょうか？

     

    RowDataBound イベントを使ってやってみましたが、自分が自分の環境で試した限りでは

    行ごとに個別の ClientID になりましたが・・・

     

    ご参考にコードを丸ごと以下に書いておきますね。

     

    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("IntegerValue", typeof(Int32)));
            dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
            dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));

            for (int i = 0; i < 9; i++)
            {
                dr = dt.NewRow();
                dr[0] = i;
                dr[1] = "Item " + i.ToString();
                dr[2] = 1.23 * (i + 1);
                dt.Rows.Add(dr);
            }       
            return dt;
        }

        void Page_Load(Object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = CreateDataTable();
                GridView1.DataBind();
            }
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                TextBox textbox = (TextBox)e.Row.Cells[3].FindControl("TextBox1");
                Label label = (Label)e.Row.Cells[3].FindControl("Label1");
                textbox.Attributes.Add("onblur",
                    String.Format("BLOCKED SCRIPTconfirm('LabelID: {0}, Label.Text: {1}, TextBoxID: {2}');",
                        label.ClientID, label.Text, textbox.ClientID));
            }
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">
        <title>無題のページ</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                onrowdatabound="GridView1_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="IntegerValue" HeaderText="IntegerValue" />
                    <asp:BoundField DataField="StringValue" HeaderText="StringValue" />
                    <asp:BoundField DataField="CurrencyValue" HeaderText="CurrencyValue" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("StringValue") %>'>
                            </asp:Label>
                            <asp:TextBox ID="TextBox1" runat="server" >
                            </asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>       
                </Columns>       
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>

     

     

     

    2008年4月17日 4:04
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票
     閣下 さんからの引用

     

     TextBox.Attributes.Add("onblur", "function(テキストボックスid,ラベルのid);")

    とし、JavaScript側では渡されたidをもとに値を計算させてます。

     

     

    確認になりますが、テキストボックスは、サーバーコントロールのTextBoxで宜しいですか？

    もし、サーバーコントロールのTextBoxであれば、テキストボックスのIDは、クライアントIDを渡す必要があります。

     

    定義例：

    TextBox.Attributes.Add("onblur", "function(テキストボックスのClientID, ラベルのClientID);")

     

    実際の例

    TextBox.Attributes.Add("onblur", "function(TextBox1.ClientID, Label1.ClientID);")

     

    ご参考になれば幸いです。

    2008年4月16日 13:19
    |
  • Question
    サインインして投票
    0
    サインインして投票

    返信が遅れてすみません。

     

    けみ-おろさんのおっしゃるとおり、サーバコントロールを使用しています。

    サーバ側では

    RowCreatedイベントで

    Code Snippet

            Dim txt As TextBox = DirectCast(e.Row.FindControl("txt"), TextBox)
            Dim lbl As Label = DirectCast(e.Row.FindControl("txt"), Label)
            Dim js As String = String.Format("function(this, {0}, {1});",  lbl.ClientID)

            txt.Attributes.Add("onblur", js)

     

    としてみたのですがダメでした。

     

    JavaScriptでalertを入れてみたところ、onblur時のイベント自体は発生してることを確認できましたが

    Labelのテキスト表示ができません。

    Code Snippet

    function function(txt, lbl)
    {
        lbl.innerHTML= txt.value *  2;
    }

     

     

    HTMLを見たところ、各行ごと

    <input name="txt" type="text" id="txt" onblur="function(this, lbl);" />

    <span id="lbl"></span>

    となっています。

    何らかの方法でGridView中のClientIDに行毎に個別の値を設定することは可能でしょうか？

     

    2008年4月17日 2:15
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > 何らかの方法でGridView中のClientIDに行毎に個別の値を設定することは可能でしょうか？

     

    RowDataBound イベントを使ってやってみましたが、自分が自分の環境で試した限りでは

    行ごとに個別の ClientID になりましたが・・・

     

    ご参考にコードを丸ごと以下に書いておきますね。

     

    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("IntegerValue", typeof(Int32)));
            dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
            dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));

            for (int i = 0; i < 9; i++)
            {
                dr = dt.NewRow();
                dr[0] = i;
                dr[1] = "Item " + i.ToString();
                dr[2] = 1.23 * (i + 1);
                dt.Rows.Add(dr);
            }       
            return dt;
        }

        void Page_Load(Object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = CreateDataTable();
                GridView1.DataBind();
            }
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                TextBox textbox = (TextBox)e.Row.Cells[3].FindControl("TextBox1");
                Label label = (Label)e.Row.Cells[3].FindControl("Label1");
                textbox.Attributes.Add("onblur",
                    String.Format("BLOCKED SCRIPTconfirm('LabelID: {0}, Label.Text: {1}, TextBoxID: {2}');",
                        label.ClientID, label.Text, textbox.ClientID));
            }
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">
        <title>無題のページ</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                onrowdatabound="GridView1_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="IntegerValue" HeaderText="IntegerValue" />
                    <asp:BoundField DataField="StringValue" HeaderText="StringValue" />
                    <asp:BoundField DataField="CurrencyValue" HeaderText="CurrencyValue" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("StringValue") %>'>
                            </asp:Label>
                            <asp:TextBox ID="TextBox1" runat="server" >
                            </asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>       
                </Columns>       
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>

     

     

     

    2008年4月17日 4:04
    |
  • Question
    サインインして投票
    0
    サインインして投票

    上記のコードで BLOCKED SCRIPT は ジャワスクリプト：　の英小文字です。

     

    セキュリティ対策のためか、勝手に変更されてしまいます。

     

    2008年4月17日 4:08
    |
  • Question
    サインインして投票
    0
    サインインして投票

    >けみ-おろさん

    >SurferOnWwwさん

     

    RowDataBoundイベントでサーバコントロールのクライアントIDを渡すことで無事解決できました。

    どうもありがとうございました。

    2008年4月17日 4:27
    |