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必须显示我的“模型”项目中的额外详细信息。

所以我想我必须能够从表格行“item.NoteUid”键中获取Model项，然后使用jquery更新“slideinner”div和项目模型数据。

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

Answer 1

您可以在表格中渲染所需的所有模型数据，并使用css display：none隐藏所需的模型数据。我将@ model.body值隐藏在一个所以你可以用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>

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

1 个答案: