發出將數據發送到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中。