Question

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

我正在使用MVC构建简单的应用程序，这是关于检索和发送消息，现在我正在处理收件箱视图，在我的视图中我已经加载了消息列表（这些消息已被检索来自我的控制器）用于记录的用户，并且保留视图的右侧部分以查看点击消息的内容（位于我的视图的左侧部分并在下面的图像中列出），这就是它的外观（ ilustration不是来自我的应用程序的真实图像，但控件，内容等的顺序相同）：

正如你可以看到的那样，我的视图分为左右两部分，左边是已登录用户的消息列表，应该显示点击消息的正确内容，我猜这必须使用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); 
  }); 
}

然后设置您的Controller以接收该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); 
}

当我点击其内容是从数据库

1 个答案: