当我单击另一个内容是从数据库生成的 div 时，如何更改 div 的内容

Question

我有下一个问题，我可能需要通过点击另一个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>

编辑 - 我的模型：

public class Message 
{
        #region Attributes

        public System.Guid MessageID { get; set; }

        public string Subject { get; set; }
        public string Body { get; set; }
        public bool UnRead { get; set; }
        public bool Active { get; set; }

        public User Sender { get; set; }

        #endregion
}

现在我想知道如何通过单击左侧部分（加载的消息）来过滤/刷新/更改右侧部分的内容。 我是否还应该在循环中包含MessageID 作为HiddenFor 以便能够获取所选消息的ID 或其他？

无论如何，我真的需要关于这些人的帮助，甚至是一些开始，一些方向，无论如何，非常感谢！ 干杯

Answer 1

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

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

然后更改右侧视图的 HTML，以便为 p 设置一个挂钩，该挂钩将保存邮件正文。我使用 id 是因为我假设阅读消息内容的视图是唯一的并显示在右侧：

<div class="view-mail">
  <p>Message content</p>
  <p id="email-body">
  </p>
</div>

定义您的函数以向您的控制器发起 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); 
}