发出将数据发送到PartialView C＃MVC的问题

Question

我正在尝试建立一个非常类似于facebook消息收件箱的收件箱，其中有一个对话列表（我只想要一个消息标题列表），而在我遇到的情况下单击对话或消息标题时，我想要在部分视图中要呈现在其旁边的整个消息。

这是我的收件箱视图：

@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中。