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

ASP.NET MVC Jquery dialog with table show details on row click

本文关键字：显示 对话框 Jquery 单击 详细信息 MVC ASP NET      更新时间：2023-09-26

我有一个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必须显示来自我的Model项的额外详细信息。

所以我想我必须能够从表行"item.NoteUid"键中获取Model项，然后使用jquery更新带有项模型数据的"slideinner"div。

希望有人能帮助我。感谢

您可以在表体中呈现所有需要的模型数据，并使用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>
相关文章：