テーブルの行をクリックしたときにテキストボックスを使用して追加のデータを表示するにはどうすればよいですか?

SegRos24

ASP .NET MVC4を使用してWeb開発を開始していますが、次の問題が発生します。

ビューモデルの特定のフィールドをテーブルに表示する必要があります。行を選択またはクリックすると、テキストボックスを使用して別のdivに追加のデータを表示します。これは、wiewmodelには多くのフィールドがあり、テーブル内の重要度の高いデータ(画面をスクロールする必要はありません)と、テーブルの下の重要度の低いデータを別のdivに表示したいためです(Outlookメールクライアント機能と同様の場合)。メールを選択すると、メールの本文が下に表示されます)。

したがって、これを解決するには、選択した行引数item.Aを知ってから、AJAXを使用してitem.Aに関連する追加データを取得する必要があると思います。

いくつかの一般的なコード:

@foreach (var item in Model) {

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.A)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.B)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.C)
    </td>
    ...
    ...
    ...
    <td>
        @Html.DisplayFor(modelItem => item.Z)
    </td>
</tr>
}

私はこれを達成するためにいくつかのJqueryとjavascriptsスクリプトを試しましたが成功しなかったので、何かが足りないと思います。

ここにサンプルスクリプトがあります

<script>
    $('tr').click(function () {
        alert('values: ' + $(this).data('A'));
    });
</script>

注:アラートを使用してスクリプトをテストするだけで、後でスクリプトをAJAX呼び出しに置き換えます。

どんな助けでもありがたいです。

マヘシュ
    @foreach (var item in Model) {

    <tr data-id="@item.A">
        <td>
            @Html.DisplayFor(modelItem => item.A)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.B)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.C)
        </td>
        ...
        ...
        ...
        <td>
            @Html.DisplayFor(modelItem => item.Z)
        </td>
    </tr>
    }


<script>
    $(document).ready(function () {

        $('tr').click(function () {
            alert('values: ' + $(this).data('id'));  //you will get item.A value
//do ajax call here and add partial view html data to div 
        });
    });

</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ