javascript - MVC javascript显示选定的数据

Question

首先，我列出了第一个周期中来自 ActionResult 的电子邮件。我想通过点击列出的数据来查看详细信息。我在 jQuery 详细信息的帮助下打开。问题出现在这一部分。在这种情况下，在每行的详细信息中打开第一封邮件的详细信息。

第二个循环中有消息的详细信息。即将以 guid 字体连接到两个循环。 (消息 ID)。

id=messageId(guid 类型)

邮件列表

<div class="message-list-container">
    <div class="message-list" id="message-list">

        @foreach (var item in Model)
        {
            <div id="@item.MessageId" class="message-item">
                <span class="sender" title="@item.From">
                 @item.From
                </span>
                <span class="time">@mvcHelper.saatAyarla(item.Date)</span>
                @if(item.Attachments.Any())
                {
                    <span class="attachment">
                        <i class="ace-icon fa fa-paperclip"></i>
                    </span>
                }
                    <span class="summary">
                    <span class="text">
                        @item.Subject
                    </span>
                </span>
            </div>        
        }
    </div>
</div>

邮寄详情

<!--Messsage details-->
    @foreach (var item in Model)
    {
    <!-- <div class="hide message-content" id="id-message-content">-->
    <div class="hide message-content" id="@item.MessageId">
            <div class="message-header clearfix">
                <div class="pull-left">
                    <span class="blue bigger-125"> @item.Subject </span>
                    <div class="space-4"></div>
                    <i class="ace-icon fa fa-star orange2"></i>
                    &nbsp;
                    <img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32" />
                    &nbsp;
                    <a href="#" class="sender">@item.From</a>

                    &nbsp;
                    <i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
                    <span class="time grey">@mvcHelper.saatGoster(item.Date)</span>
                </div>
            </div>
            <div class="hr hr-double"></div>
            <div class="message-body">
                <p>
                    @item.TextBody
                </p>
            </div>
            <div class="hr hr-double"></div>
            <!--Eklenti paneli-->
            <div class="message-attachment clearfix">
                @if (item.Attachments.Any())
                {

                    <div class="attachment-title">
                        <span class="blue bolder bigger-110">Eklentiler</span>
                        &nbsp;
                        <span class="grey">(@item.Attachments.Count() Dosya)</span>
                    </div>


                    <ul class="attachment-list pull-left list-unstyled">
                        @foreach (var attachment in item.Attachments)
                        {
                            <li>
                                <a href="#" class="attached-file">
                                    <i class="ace-icon fa fa-file-o bigger-110"></i>
                                    <span class="attached-name">@mvcHelper.getAttachmentName(attachment.ToString())</span>
                                </a>

                                <span class="action-buttons">
                                    <a href="#">
                                        <i class="ace-icon fa fa-download bigger-125 blue"></i>
                                    </a>

                                    <a href="#">
                                        <i class="ace-icon fa fa-trash-o bigger-125 red"></i>
                                    </a>
                                </span>
                            </li>
                        }
                    </ul>
                }
            </div>
        </div><!-- /.message-content -->
    }
    <!--Eklenti paneli Son-->
<!--message details end-->

连接两点的循环。

first foreach = <div id="@item.MessageId" class="message-item">

//Places where the problem is. They need to be connected.

second foreach = <!-- <div class="hide message-content" id="id-message-content">-->
<div class="hide message-content" id="@item.MessageId">

var content = message.find('.message-content:last').html($('#id-message-content').html());

jQuery 代码

$('.message-list .message-item .text').on('click', function () {
    var message = $(this).closest('.message-item');

    //if message is open, then close it
    if (message.hasClass('message-inline-open')) {
        message.removeClass('message-inline-open').find('.message-content').remove();
        return;
    }

    $('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
    setTimeout(function () {
        $('.message-container').find('.message-loading-overlay').remove();
        message
            .addClass('message-inline-open')
            .append('<div class="message-content" />');
        var content = message.find('.message-content:last').html($('#id-message-content').html());

        //remove scrollbar elements
        content.find('.scroll-track').remove();
        content.find('.scroll-content').children().unwrap();

        content.find('.message-body').ace_scroll({
            size: 150,
            mouseWheelLock: true,
            styleClass: 'scroll-visible'
        });

    }, 500 + parseInt(Math.random() * 500));

});

Answer 1

您的第一个问题是您正在创建多个具有相同 id 的元素特性。这会使您的 HTML 无效。

这是问题代码:

@foreach (var item in Model)
{
    <div id="@item.MessageId" class="message-item">
...

@foreach (var item in Model)
{
   <div class="hide message-content" id="@item.MessageId">
...

对于模型中的每条消息，这将创建 2 <div>元素 id值为 @item.MessageID多变的。其中第二个元素是非法元素，因为它与前面的元素具有相同的 ID。您需要制作这些 <div> s 具有唯一的 ID。

第二个问题是:

当你运行时

var content = message.find('.message-content:last').html($('#id-message-content').html());

这部分: $('#id-message-content').html()

找不到任何内容，因为没有 id 的元素是“id-消息内容”。此外，每次打开消息时，您都会将另一个“消息内容”div 附加到消息项中。这是没有必要的。

要解决这些问题，您可以更改代码，如下所示:

第一个循环:

@foreach (var item in Model)
{
    <div data-messageid="@item.MessageId" class="message-item">
...
           <span class="summary">
                <span class="text">
                    @item.Subject
                </span>
           </span>
           <div class="message-content" hidden></div>
...

第二个循环:

@foreach (var item in Model)
{
<div class="hide message-content" id="message-content-@item.MessageId">
...

jQuery:

$('.message-list .message-item .text').on('click', function () {
var message = $(this).parents('.message-item');

//if message is open, then close it
if (message.hasClass('message-inline-open')) {
    message.removeClass('message-inline-open').find('.message-content').hide();
    return;
}

$('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
setTimeout(function () {
    $('.message-container').find('.message-loading-overlay').remove();
    message.addClass('message-inline-open');
    var content = message.find(".message-content");
    content.show();
    content.html($('#message-content-' + message.data("messageid")).html());

    //remove scrollbar elements
    content.find('.scroll-track').remove();
    content.find('.scroll-content').children().unwrap();

    content.find('.message-body').ace_scroll({
        size: 150,
        mouseWheelLock: true,
        styleClass: 'scroll-visible'
    });

}, 500 + parseInt(Math.random() * 500));
});