MVC javascript显示选定的数据

Question

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

在第二个loop.To连接到两个循环的guid字体中有消息的详细信息即将到来。(MessageId)。

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

已解决

 public static class mvcHelper
    {
public static string variableReplace(string id)
        {
            string yazi = null;
            if (id != null)
            {
                yazi = id.Replace('@', 'a').ToString();
            }
            else
            {
                yazi = id;
            }
            return yazi;
        }

    }

<div data-messageid="@mvcHelper.variableReplace(item.MessageId)" class="message-item">

<div class="hide message-content" id="message-content-@mvcHelper.variableReplace(item.MessageId)">

Answer 2

您的第一个问题是您正在创建具有相同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变量的值。第二个元素是and非法元素，因为它与前面的元素具有相同的ID。您需要使这些<div>具有唯一的ID。

第二个问题是：

当你运行时

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

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

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

要解决这些问题，您可以像这样更改代码：

第一个循环：

@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));
});