ASP.net LISTVIEWで選択行を取得したい

前回の質問ではエンターキー押下でsubmitが発生していたようで、js以前の不具合が発生しておりました。
質問を変更させて頂きます。

asp.net ListViewで生成されたテーブル上で、Javascript(jquery)を用いて
行の各項目の計算を行いたいです。

画面描画後、生成されたHTMLは以下の通りでした。

HTML
1<table id="itemPlaceholderContainer" border="0" >
2  <tbody>
3
4    <tr style="">
5     <th >商品</th>
6     <th >規格</th>
7     <th >在庫数</th>
8     <th >調整数</th>
9     <th >調整後在庫</th>
10    </tr>
11
12    <tr>
13     <td >
14      <span id="itemLabel">アイテム1</span>
15     </td>
16     <td >
17      <span id="lotLabel">大</span>
18     </td>
19     <td >
20      <span id="order1Label">20</span>
21     </td>
22     <td >
23      <input name="ctl00$ContentPlaceHolderContent$_listView$ctrl0$order1Text" type="text" value="0" id="order1Text">
24     </td>
25     <td >
26      <span id="zaikoAjtLabel">0</span>
27     </td>     
28    </tr>
29
30    <tr>
31     <td >
32      <span id="itemLabel">アイテム1</span>
33     </td>
34     <td >
35      <span id="lotLabel">小</span>
36     </td>
37     <td >
38      <span id="order1Label">10</span>
39     </td>
40     <td >
41      <input name="ctl00$ContentPlaceHolderContent$_listView$ctrl1$order1Text" type="text" value="0" id="order1Text">
42     </td>
43     <td >
44      <span id="zaikoAjtLabel">0</span>
45     </td>     
46    </tr>
47
48  </tbody>
49</table>

処理としては、input（id=order1Text）が変更されたときに計算させたかったので
下記のようなjqueryを作成しました。ですが、同じidが複数存在することなり、1行目は反応しますが、2行目が反応しません。

jquery
1$('#order1Text').change(function () {
2 alert('値が変更された');
3});

そこでセレクタをidではなく、name属性にしようと思ったのですが、
ASP.netではclientidmode="Static"を使用しても、nameは固定できないようなのです。

考えた結果、input属性の変更を検知して、name属性を取得し、テーブル全行からnameが含まれる行を取得して
その行にあるフィールドを取得して計算させようかと思ったのですが、もっと簡単にできるような方法はないのでしょうか。

$('input').change(function () {
alert(this.name);
});

ASP.netよりJavascript寄りの質問かもしれませんが、どうぞよろしくお願い致します。

退会済みユーザー

2018/01/30 07:49

コードは単純にコピペしないで、適宜改行を入れるなりして、もっと見やすくしていただけませんか。

退会済みユーザー

2018/01/30 07:54

$("order1Text") の order1Text は id のようですが、だとするとセレクタの書き方が間違ってます。それから、記載されているエラーメッセージはポストバックしないと出ないはずで、そのスクリプトでそうなるとは思えません。この記事を見てください→ http://surferonwww.info/BlogEngine/post/2012/01/15/EnableEventValidation.aspx 質問に書いてないことを何かしてませんか？　上のコメントでお願いしたことと合わせて質問を見直してください。

退会済みユーザー

2018/02/01 01:20

質問のソースを ListView から生成される html に変更されたようですが、質問の答えとしては ASP.NET Web Forms の ListView にクライアントスクリプト (jQuery / JavaScript) をどのように書いて適用すると望むことができるかという回答が必要と理解していますが、その理解で良いのですよね？（単純に html ソースとクライアントスクリプトの話ではない ⇒ html ソースを都合のいいように書き換えられるということはなくて、あくまで ListView から生成されることが条件・・・と理解）

Qoo

2018/02/01 02:09

はい。その理解で問題ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

ASP.NET Web Forms の ListView にクライアントスクリプト (jQuery / JavaScript) をどのように書いて適用すると望むことができるか（単純に html ソースとクライアントスクリプトの話ではない ⇒ html ソースを都合のいいように書き換えられるということはなくて、あくまで ListView から生成されることが条件）というという理解でサンプルを書いておきます。

（注）質問者さんの「望むこと」というのは、ある行で、ユーザーが調整数列のテキストボックスに数字を入力した後フォーカスを外すと、その数字とその行の在庫数を合計して、その行の調整後在庫列の Label（sapn 要素）に表示することと理解しています。その理解が違う場合は以下の回答はハズレですのでご注意ください。

あくまで「案」としての簡単なサンプルですので、ユーザー入力の検証と入力が数字でないときの対応は考えていません。

また、サンプルから id が変わってきたり、table の構造やその中の要素がサンプル通りでない場合は、$('input[id*=order1Text]') や $(textbox).parent().prev().children()[0]; で目的の要素を取得できなくなるかもしれませんので注意してください。

それらは質問者さんの方で自分のアプリの都合や ListView の構造に合わせて調整してください。

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="0024-ListViewAndJavaScript.aspx.cs" 
    Inherits="_0024_ListViewAndJavaScript" %>

<!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>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            $('input[id*=order1Text]').on("change", writeAdustedStock);
        });

        function writeAdustedStock(event) {
            var textbox = event.target;
            var value = textbox.value;
            var spanStock = $(textbox).parent().prev().children()[0];
            var stock = spanStock.textContent;
            var spanAdjust = $(textbox).parent().next().children()[0];
            var adjusted = Number(stock) + Number(value);
            spanAdjust.textContent = String(adjusted);
        }
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
            SelectCommand="SELECT TOP 5 [ProductID], [ProductName], 
                           [QuantityPerUnit], [UnitsInStock] FROM [Products]">
        </asp:SqlDataSource>
        <asp:ListView ID="ListView1" 
            runat="server" 
            DataKeyNames="ProductID" 
            DataSourceID="SqlDataSource1">
            <ItemTemplate>
                <tr style="">
                    <td>
                        <asp:Label ID="ProductIDLabel" 
                            runat="server" Text='<%# Eval("ProductID") %>' />
                    </td>
                    <td>
                        <asp:Label ID="ProductNameLabel" 
                            runat="server" Text='<%# Eval("ProductName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="QuantityPerUnitLabel" 
                            runat="server" Text='<%# Eval("QuantityPerUnit") %>' />
                    </td>
                    <td>
                        <asp:Label ID="UnitsInStockLabel" 
                            runat="server" Text='<%# Eval("UnitsInStock") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="order1Text" runat="server">
                        </asp:TextBox>
                    </td>
                    <td>
                        <asp:Label ID="zaikoAjtLabel" runat="server">
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table runat="server">
                    <tr runat="server">
                        <td runat="server">
                            <table id="itemPlaceholderContainer" 
                                runat="server" border="0" style="">
                                <tr runat="server" style="">
                                    <th runat="server">ID</th>
                                    <th runat="server">商品</th>
                                    <th runat="server">規格</th>
                                    <th runat="server">在庫数</th>
                                    <th runat="server">調整数</th>
                                    <th runat="server">調整後在庫</th>
                                </tr>
                                <tr id="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr runat="server">
                        <td runat="server" style=""></td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>
    </form>
</body>
</html>

あと、今回の話とは直接関係ないですが、もし ListView を UpdatePanel に配置して非同期ポストバックを行う場合、ASP.NET 4 以降では、ポストバックのトリガとするコントロールの ClientIDMode プロパティはデフォルトではなく AutoID にしておく必要はあるので注意してください。詳しい情報が必要でしたら以下の記事を見てください。

UpdatePanel と ListView
http://surferonwww.info/BlogEngine/post/2016/11/20/linkbutton-in-listview-in-updatepanel.aspx

投稿2018/02/01 04:18

編集2018/02/01 04:28

退会済みユーザー

総合スコア0