带有表格的 ASP.NET MVC Jquery 对话框在行单击时显示详细信息

Question

我有一个弹出 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。

希望有人可以帮助我。欣赏

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>