- PR -

JavaScriptで動的に追加したGridViewの行をサーバ側で処理したい

1
投稿者投稿内容
なめくじ
会議室デビュー日: 2003/02/20
投稿数: 11
投稿日時: 2009-01-21 21:48
お世話になっております。

[やりたい事]
・GridViewの行をJavaScriptで追加
・追加した行をサーバ側で処理する()

[現象]
・追加した行の内容が元のcol2に追記される

[環境]
VS2005
以下、コードになります。
よろしくお願いします。

WebForm1.aspx
コード:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="FrameWorkTest.Form.WebForm1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>無題のページ</title>

<script language="javascript" type="text/javascript">

<!--

function test(arg){

  var obj = document.getElementById(arg);

  var parent = obj.parentNode.parentNode;

  var table = obj.parentNode.parentNode.parentNode;



  table.appendChild(parent.cloneNode(true),parent);

}

-->

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

        <Columns>

          <asp:ButtonField DataTextField="col1" Text="ボタン" />

          <asp:TemplateField>

            <ItemTemplate>

              <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("col2") %>'></asp:TextBox>

            </ItemTemplate>

          </asp:TemplateField>

        </Columns>

      </asp:GridView>

    </div>

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

      <asp:Button ID="Button1" runat="server" Text="Button" />

    </form>

</body>

</html>

WebForm1.aspx.vb
コード:

Public Partial Class WebForm1

    Inherits System.Web.UI.Page



    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load



        If Not Me.IsPostBack Then



            Dim dt1 As New DataTable

            dt1.Columns.Add("col1", Type.GetType("System.Int32"))

            dt1.Columns.Add("col2", Type.GetType("System.String"))



            ''マスタを参照すべきデータ

            For i As Integer = 1 To 10

                Dim dr As DataRow = dt1.NewRow

                dr("col1") = i

                dr("col2") = "test" + i.ToString()

                dt1.Rows.Add(dr)

            Next



            GridView1.DataSource = dt1

            GridView1.DataBind()

            GridView1.EnableViewState = True

            TextBox1.Text = GridView1.Rows.Count

        End If



    End Sub



    Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        TextBox1.Text = GridView1.Rows.Count

    End Sub



    Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim button As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)



            '押下時の処理

            button.OnClientClick = "test('" + button.ClientID + "');"

            'リンク表示の上書き

            button.Attributes.Add("href", "javascript:void(0)")



        End If



    End Sub

End Class




[ メッセージ編集済み 編集者: なめくじ 編集日時 2009-01-21 21:49 ]
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2009-01-22 00:11
cloneNodeすると、テキストボックスの(form部品としての)nameがコピー元と同じになるから、
同じnameの値が２つサーバにPOSTされて、元のcol2に追記されたようになるのでしょう。

「サーバ側で処理する」の詳細がわかりませんが、いずれにしても、javascriptで行を追加したところで、
サーバに渡される値は、POSTパラメータが１つ増えるだけなので、
GridViewの行が自動的に追加されることは無いと思われます。
GridViewの行として追加するには、サーバーコードで追加する必要があります。
なめくじ
会議室デビュー日: 2003/02/20
投稿数: 11
投稿日時: 2009-01-22 09:10
べるさん、ご返答ありがとうございます。

引用:

cloneNodeすると、テキストボックスの(form部品としての)nameがコピー元と同じになるから、
同じnameの値が２つサーバにPOSTされて、元のcol2に追記されたようになるのでしょう。

DomTreeを調べてみるとID等がダブっていたので、おっしゃる通りでした。

引用:

「サーバ側で処理する」の詳細がわかりませんが、いずれにしても、javascriptで行を追加したところで、
サーバに渡される値は、POSTパラメータが１つ増えるだけなので、
GridViewの行が自動的に追加されることは無いと思われます。
GridViewの行として追加するには、サーバーコードで追加する必要があります。

やはり、GridViewでは取れないのですね。
追加した分は命名規則を決めておいて、
POSTパラメータを取得した方が早いと理解しました。

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

スキルアップ／キャリアアップ（JOB@IT）