QA@IT

ListView内のtextboxコントロールの値取得・設定方法について

5261 PV

ListViewを使用してDBの値を表示・更新することはできたのですが
image.jpg
jikan1とjikan2の値を入れたら、その数値の合計がjikan3に自動で入力されるようにすることは可能なのでしょうか?

 <asp:TextBox ID="jikan2TextBox" runat="server" OnTextChanged="jikan2TextBox_TextChanged" AutoPostBack="true" Text='<%# Bind("jikan2") %>' />

のようにして、jikan2が変更されたらjikan2TextBox_TextChangedが呼ばれるところまで作れたのですが、jikan2TextBox_TextChanged内でjikan2TextBox.Textとしても値を取得することができずに困っています。

ListView内のコントロールから値を取得する方法、値を設定する方法をご存知の方は、教えていただけないでしょうか。
よろしくお願いします。

ちなみにわたしの環境は
windows7 Ultimate sp1 32bit
VS Cmmunity 2015
ASP.NET 4

ソースは以下の通りです。

・WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSource1">
            <EditItemTemplate>
                <tr style="background-color: #999999;">
                    <td>
                        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="キャンセル" />
                    </td>
                    <td>
                        <asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="jikan1TextBox" runat="server" Text='<%# Bind("jikan1") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="jikan2TextBox" runat="server" OnTextChanged="jikan2TextBox_TextChanged" AutoPostBack="true" Text='<%# Bind("jikan2") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="jikan3TextBox" runat="server" Text='<%# Bind("jikan3") %>' />
                    </td>
                </tr>
            </EditItemTemplate>
            <EmptyDataTemplate>
                <table runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                    <tr>
                        <td>データは返されませんでした。</td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <ItemTemplate>
                <tr style="background-color: #E0FFFF;color: #333333;">
                    <td>
                        <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編集" />
                    </td>
                    <td>
                        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
                    </td>
                    <td>
                        <asp:Label ID="jikan1Label" runat="server" Text='<%# Eval("jikan1") %>' />
                    </td>
                    <td>
                        <asp:Label ID="jikan2Label" runat="server" Text='<%# Eval("jikan2") %>' />
                    </td>
                    <td>
                        <asp:Label ID="jikan3Label" runat="server" Text='<%# Eval("jikan3") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table runat="server">
                    <tr runat="server">
                        <td runat="server">
                            <table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                                <tr runat="server" style="background-color: #E0FFFF;color: #333333;">
                                    <th runat="server"></th>
                                    <th runat="server">Id</th>
                                    <th runat="server">jikan1</th>
                                    <th runat="server">jikan2</th>
                                    <th runat="server">jikan3</th>
                                </tr>
                                <tr id="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr runat="server">
                        <td runat="server" style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF"></td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Table]" UpdateCommand="UPDATE [Table] SET jikan1 = @jikan1, jikan2 = @jikan2, jikan3 = @jikan3 WHERE (Id = @Id)">
            <UpdateParameters>
                <asp:Parameter Name="jikan1" />
                <asp:Parameter Name="jikan2" />
                <asp:Parameter Name="jikan3" />
                <asp:Parameter Name="Id" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </form>
</body>
</html>

・WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace test
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void jikan2TextBox_TextChanged(object sender, EventArgs e)
        {
            jikan3TextBox.Text = jikan1TextBox.Text + jikan2TextBox.Text; //ここでエラー
        }
    }
}
  • JavaScriptで実装するという手段は選べませんか? また、エラーの内容を書くと回答がつきやすいと思います。 -
  • jikan3TextBox, jikan1TextBox, jikan2TextBox が取得できないのでエラーになるのだと思いますが、それを解決するのは結構大変ですし、そもそもポストバックしてサーバー側で計算するというのは無駄が多いです。boros さんが言われるようにクライアントスクリプトで処理する方がよさそうですが、そうしませんか? -
  • コメントありがとうございます。エラー内容は「現在のコンテキストに 'jikan3TextBox' という名前は存在しません。」となっています。SurferOnWwwさんがおっしゃるとおりjikan3TextBox, jikan1TextBox, jikan2TextBox が取得できないためエラーとなっています。 -
  • borosさんやSurferOnWwwさんのアドバイスどおり、JavaScriptで実装できないか検討してみようと思います。 -
  • テンプレートに配置したコントロール(この例では jikan3TextBox, jikan1TextBox, jikan2TextBox)は質問者さんがかかれたコードのようにしては取得できないのです。ListView が編集モードになっている時、編集モードになっている項目から FindControl メソッドを使って取得します・・・ということが、理解できてないと難しいと思います。 -
  • JavaScript, jQuery を使ってやってみてください。その上で不明点があれば質問してください。できる限り回答します。 -
  • SurferOnWwwさん、アドバイスいただきありがとうございます。javascriptで思い通りの動作をすることができました。具体的には onChangeイベントをボタンに設置して、イベント内でthisのIDを取得することで行数がわかり、値を取得、設定することができるようになりました。この質問を解決済みにしたいのですが、アドバイスを回答に記入していただけませんか? -
  • 確かご自分で回答を書いてそれをベストアンサーにできたかと思いますが、私のアドバイスをベストアンサーにするよりそうされた方がよさそうです。その際、できれば、もう少し詳しくどうされたかを書いていただけると幸いです。 -

回答

SurferOnWwwさんのお手柄を奪う形になって恐縮ですが、閉じられる様子がないので投稿してみます(一応、JavaScriptでの実装の提案者ということで…)。
JavaScriptでの実装で上手く行ったようで何よりです。SurferOnWwwさんの仰るように、解決方法や簡単なソースコードなど、公開できる範囲で結構ですので記載していただくと、後から検索などでこのページを訪れた人にとっての知識の共有となっていいと思いますので、よろしくお願いします。

編集 履歴 (1)
  • アドバイスありがとうございました。ソースコードにつきましては仕事がおちつきましたら再度投稿させていただきます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。