Javascript 如何更改div'；当I'；m单击另一个div，其内容是从数据库生成的

我有下一个问题，我可能需要通过单击另一个div来更改div的内容，现在我将更详细地解释它：

我正在使用MVC构建一个简单的应用程序，它是关于检索和发送消息的，现在我正在处理收件箱视图，在我的视图中，我已经为登录用户加载了消息列表（从我的控制器检索），视图的右侧部分被保留以查看单击消息的内容（如下图所示，它位于并列在我视图的左半部分），这是它的外观（说明不是我应用程序中的真实图像，而是控件、内容等的相同顺序）：

大家可以看到，我的视图分为左视图和右视图，左侧是登录用户的消息列表，右侧应该显示单击消息的内容，我想这必须使用javascript/ajax来完成，但我几乎没有这方面的经验，我不知道如何在消息单击时获取消息id或其他信息，这样就可以了过滤右div的内容（我想这就是重点）

以下是我的查看代码：

    @model IEnumerable<MyApplication.Entities.Message>
@{
    ViewBag.Title = "Index";
}
<div class="">
    <!-- /MAIL LIST (LEFT PART OF VIEW) -->
                <div class="x_content">

                            @foreach (var item in Model)
                            {
                                <a href="#">
                                    <div class="mail_list">
                                        <div class="left">
                                            <i class="fa fa-circle"></i>
                                        </div>
                                        <div class="right">
                                            <h3>
                                                @item.Sender.Code @item.Sender.FirstName @item.Sender.LastName
                                                <small>@item.Created</small>
                                            </h3>
                                            <p>@item.Body</p>
                                        </div>
                                    </div>
                                </a>
                            }
                        </div>

                        <!-- CONTENT MAIL -->
                        <div class="col-sm-9 mail_view">
                            <div class="inbox-body">
                                    <div class="col-md-4 text-right">
                                        <p class="date"> 23:32h 16.05.2017.</p>
                                    </div>
                                    <div class="col-md-12">
                                        <h4>Subject</h4>
                                    </div>
                                </div>
                                <div class="sender-info">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <strong>User 1</strong>
                                            <span>(user11@gmail.com)</span> za
                                            <strong>user2</strong>
                                            <a class="sender-dropdown"><i class="fa fa-chevron-down"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="view-mail">
                                    <p>Message content</p>

                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        consequat.
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </div>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" type="button">
                                        <i class="fa fa-reply"></i>
                                        Odgovori
                                    </button>
                                    <button class="btn btn-sm btn-default" type="button" data-placement="top"
                                            data-toggle="tooltip" data-original-title="Forward">
                                        <i class="fa fa-share"></i>
                                    </button>
                                    <button class="btn btn-sm btn-default" type="button" data-placement="top"
                                            data-toggle="tooltip" data-original-title="Print">
                                        <i class="fa fa-print"></i>
                                    </button>
                                    <button class="btn btn-sm btn-default" type="button" data-placement="top"
                                            data-toggle="tooltip" data-original-title="Trash">
                                        <i class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </div>

                        </div>
                        <!-- /CONTENT MAIL -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在我想知道如何通过点击左边的部分（已加载的消息）来过滤/刷新/更改右边部分的内容。 我是否应该将

MessageID

作为

HiddenFor

包含在我的循环中，以便能够获取所选消息的Id或其他信息

不管怎样，我真的需要对这些家伙的帮助，甚至是一些开始，一些方向，不管什么，谢谢！

---

干杯

因此，对于每个项目，使用唯一的id标识消息，并在单击消息时绑定一个函数：

<a href="#" id="@item.MessageID" onclick="onSelectMessage(this);">
<!-- other stuffs here corresponding to the list -->
</a>

定义函数以启动对控制器的AJAX请求并检索与该ID对应的消息体：

function onSelectMessage(el) { 
  $.ajax({ 
    method: "GET", 
    url: "Message/GetMessageBody", 
    data: { messageID: el.id } 
  }) 
  .done(function( msg ) { 
    $('#email-body').text(msg); 
  }); 
}

然后通过添加以下方法设置控制器以接收该AJAX请求：

[HttpPost] 
public string GetMessageBody(Guid messageID) 
{ 
  // retrieve the message corresponding to that id and return it
  // now returning an example string 
  return ("it worked the AJAX request for the message: " + messageID); 
}

---

只需在视图（div）时为右侧和左侧创建2个视图左键单击使用ng click将函数求值为true，右键使用hg show显示右视图我认为我们可以为您提供一个后续流程。在右视图上设置一个包含消息内容的元素。检索消息列表并将其放在左视图中。使用id或还有一个自定义属性。在这些元素上，绑定一个启动AJAX请求的单击事件到服务器，请求与该id对应的消息内容。一旦从服务器得到响应，将正确元素的内容设置为从服务器得到的消息内容。@Quirimo I检索到消息列表和thr应该为循环，我在左视图中显示了它们。它们都准备好了MessageID，因此对于左视图中的每个项目都是唯一的，并且可能我不需要调用服务器来获取消息信息，因为我正在循环实际的消息对象，并且有我所需要的一切。我应该只获取它并显示完整的消息正文/主题t位于视图的右侧部分。但我不知道如何才能做到这一点。请使用MessageID作为左侧元素的标识符，在传递当前元素的元素上绑定一个单击事件，并更改右侧视图的内容，指定您单击的消息的相应正文。缺少对象的结构，您的HTML中充满了项目。您可以编辑您的帖子，以便只显示所涉及的元素（查看内容的左项目和右项目）和相关代码（邮件的结构）这也会让你更容易read@quirimmo我做了编辑来简化我的HTML..在你放注释的地方//在这里检索你的项目的主体，对应于el.id，这实际上意味着我应该调用一个控制器的动作方法，该方法将通过该el.id从数据库检索数据？你可以这样做，我建议你启动一个AJAX re搜索并检索它。对我来说，这听起来更好。但是从你的回复中我了解到你已经有了客户端以及消息的主体。不是吗？否则，我将添加一行代码，向你展示如何在文件中启动AJAX请求，并在收到响应后将响应附加到电子邮件的主体中。p.s.是吗也使用jQuery？p.s.2如果您已经在一个包含所有对象以及消息体的数组中有客户端，只需检索与该ID对应的一个ID，我怎么能做到这一点？如果您发布的内容对我很有用，因为我在javascript、jQuery ajax等方面绝对行不通：）好的，明白了：）将讨论转移到一个没有什么可谈的聊天，然后在我们得到适合您情况的内容后，我将更改答案

function onSelectMessage(el) { 
  $.ajax({ 
    method: "GET", 
    url: "Message/GetMessageBody", 
    data: { messageID: el.id } 
  }) 
  .done(function( msg ) { 
    $('#email-body').text(msg); 
  }); 
}

[HttpPost] 
public string GetMessageBody(Guid messageID) 
{ 
  // retrieve the message corresponding to that id and return it
  // now returning an example string 
  return ("it worked the AJAX request for the message: " + messageID); 
}