具有表的ASP.NET MVC Jquery對話框在單擊行時顯示詳細信息

Question

我有一個ASP.NET MVC應用程序，它會彈出一個jQuery對話框。 在對話框中，我有一個表，該表是根據從控制器獲取的模型動態構建的：

這是對話框表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”鍵中獲取Model項目，然后使用jquery在“ slideinner” div中使用項目模型數據進行更新。

希望可以有人幫幫我。 欣賞

Answer 1

您可以在表主體中呈現所需的所有模型數據，並使用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>