0

jQuery ダイアログをポップアップする ASP.NET MVC アプリケーションがあります。ダイアログ内には、コントローラーから取得したモデルから動的に作成したテーブルがあります。

これは、ダイアログ テーブルの html です。

<script type="text/javascript">
    $(function () {

        $('#btnslide').click(function () {

        });

        $('#dtnotes tr').click(function () {

            var noteUid = $(this).attr("noteuid");

            //*******
            // here somehow i need to filter my @Model to get the item 
            // and then update my DIV 'slideinner' with the details data.
            //*******

            $(".slideinner").slideToggle();
        });

    });
</script>


<div class="widget widget-table">
    <div class="widget-header">
        <span class="icon-list"></span>
        <h3 class="icon chart">
            Notes</h3>
    </div>
    <div class="widget-content">


        <table id="dtnotes" class="table table-bordered table-striped data-table">
            <thead>
                <tr>
                    <th>
                        Subject
                    </th>
                    <th style="width: 70px;">
                        Type
                    </th>
                    <th style="width: 70px;">
                        UserName
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr class="gradeA" noteuid="@item.NoteUid">

                        <td>
                            @item.Subject
                        </td>
                        <td>

                            @item.NoteTypeDesc

                        </td>
                        <td nowrap>
                            @item.UserName
                        </td>

                    </tr>
                }
            </tbody>
        </table>

        <button id="btnslide">slide it</button>
    </div>
    <!-- .widget-content -->
</div>
<div class="slideinner">
    <p>Subject</p>
    <p>Body</p>
</div>
<!-- .widget -->

また、下部にスライド div の div があります。したがって、ユーザーがテーブルの行をクリックすると、div が上にスライドします。

私が望むのは、そのテーブル行をクリックすることであり、DIV はモデル アイテムから追加の詳細情報を表示する必要があります。

したがって、テーブル行の「item.NoteUid」キーからモデル項目を取得し、jquery を使用して項目モデル データで「slideinner」div を更新できる必要があると思います。

誰かが私を助けてくれることを願っています。感謝

4

1 に答える 1

0

必要なすべてのモデル データをテーブル本体に表示し、必要なデータを css display:none で非表示にすることができます。@model.body の値を a に隠したので、jquery で取得できます

$('#dtnotes tr').click(function () {

            var noteUid = $(this).attr("noteuid");

            //*******
            $('.slideinner > p.body').html($(this).children('.body').html());
           $('.slideinner > p.subject').html($(this).children('.subject').html());

            //*******

            $(".slideinner").slideToggle();
        });



 <tbody>
                @foreach (var item in Model)
                {
                    <tr class="gradeA" noteuid="@item.NoteUid">

                        <td class="subject">
                            @item.Subject
                        </td>
                         <td class="body" style="display:none;">
                                @item.Body
                            </td>
                        <td class="notetypedesc">

                            @item.NoteTypeDesc

                        </td>
                        <td nowrap>
                            @item.UserName
                        </td>

                    </tr>
                }
            </tbody>

<div class="slideinner">
    <p class="subject">Subject</p>
    <p class="body">Body</p>
</div>
于 2013-07-14T08:22:01.543 に答える