Question

我正在尝试构建一个与facebooks消息收件箱非常相似的收件箱，在那里你有一个对话列表（我只想要一个消息标题列表），当你在我的情况下点击对话或消息标题时，我希望在局部视图中将整个消息渲染到它旁边。

这是我的收件箱视图：

@model BlocketProject.Models.ViewModels.ProfilePageViewModel
@{
ViewBag.Title = "Inbox";
}

<h2>Dina meddelanden:</h2><br />

<div class="left">
    <table id="messageTable">
        @foreach (var message in Model.UserMessages)
        {
            <tr>
                <td>
                    <button type="submit" class="messageButton">
                        @if (message.Unread == true)
                        {
                            <h4 style="font-weight:bold;">@message.MessageTitle</h4>
                        }
                        else if (message.Unread == false)
                        {
                            <h4>@message.MessageTitle</h4>
                        }

                    </button>
                </td>
            </tr>
        }
    </table>
</div>
<div class="right">

    @Html.Partial("ReadMessage")

</div>

当我单击此消息元素作为按钮时，我想将该messageId传递给PartialView ReadMessage：

@model BlocketProject.Models.DbClasses.DbMessages


<h2>@Model.MessageTitle</h2><br />
<p>@Model.MessageText</p>

，控制器如下所示：

        [HttpPost]
    public ActionResult Inbox()
    {
        var allMessages =    ConnectionHelper.GetAllMessages(ConnectionHelper.GetUserByEmail(User.Identity.Name).UserId);
        var model = new ProfilePageViewModel();

        model.UserMessages = allMessages;

        return View("Inbox", model);

    }

    [HttpPost]
    public ActionResult ReadMessage(int messageId)
    {
        var model = ConnectionHelper.GetMessageByMessageId(messageId);
        return PartialView("ReadMessage", model);
    }

我已经尝试将messageId传递给我在控制器中看到的帖子，但是然后partialView作为新页面返回，我只想在收件箱视图中呈现它。

有什么想法吗？

修改当我这样编辑时，琼斯的答案解决了我的问题：

控制器：

        public ActionResult ReadMessage(int messageId)
    {
        var model = ConnectionHelper.GetMessageByMessageId(messageId);
        return PartialView("ReadMessage", model);
    }

查看：

<div class="left">
<table id="messageTable">
    @foreach (var message in Model.UserMessages)
    {
        <tr>
            <td>
                @using (Ajax.BeginForm("ReadMessage", new { @messageId = message.MessageId }, new AjaxOptions { UpdateTargetId = "showMessage" }, FormMethod.Post))
                {
                    <button type="submit" class="messageButton">
                        @if (message.Unread == true)
                        {
                            <h4 style="font-weight:bold;">@message.MessageTitle</h4>
                        }
                        else if (message.Unread == false)
                        {
                            <h4>@message.MessageTitle</h4>
                        }
                    </button>
                }
            </td>
        </tr>
    }
</table>
</div>
<div class="right" id="showMessage">
@Html.Partial("ReadMessage", new BlocketProject.Models.DbClasses.DbMessages())
</div>

Answer 1

Razor在呈现页面之前在服务器上运行。一旦页面在客户端上，并且他们可以单击消息，PartialView的概念就消失了 - 它只是一个HTML页面。

最简单的方法是使用按钮所在的Ajax.BeginForm，然后单击，使用从服务器检索到的部分视图更新元素。类似的东西：

@using(Ajax.BeginForm("ReadMessage", "Messages", new AjaxOptions() { UpdateTargetId = "showMessage" })) {

//...

}

//...

<div class="right" id="showMessage">
    //ReadMessage partial rendered on button click
</div>

Answer 2

一种可以帮助你的方法：

protected ActionResult View(string viewName, object model)
{
    if (ControllerContext.IsChildAction)
        return PartialView(viewName, model);
    else if (Request.IsAjaxRequest())
        return PartialView(viewName, model);
    else
        return View(viewName, model);
}

当你通过@ Html.RenderAction（）调用你的动作或通过Ajax（jQuery）调用动作时，这将返回一个PartialView。

然后，您可以使用jQuery来阻止表单发布并使用Ajax发布它，或者当您单击消息时，您还可以使用jQuery从操作中获取结果并将其插入到DOM中。

发送数据到Partial View C＃MVC

2 个答案: