[英]Issue sending data to PartialView C# MVC
I'm trying to build an inbox that is very similar to facebooks message inbox, where you have a list of conversations(I only want a list of a message title) and when you click the conversation or message title in my situation, I want the whole message to be rendered next to it in a partial view. 我正在尝试建立一个非常类似于facebook消息收件箱的收件箱,其中有一个对话列表(我只想要一个消息标题列表),而在我遇到的情况下单击对话或消息标题时,我想要在部分视图中要呈现在其旁边的整个消息。
Here's my Inbox view: 这是我的收件箱视图:
@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>
When I click this message-element that is a button, I want to pass that messageId to the PartialView ReadMessage: 当我单击该按钮的消息元素时,我想将该messageId传递给PartialView ReadMessage:
@model BlocketProject.Models.DbClasses.DbMessages
<h2>@Model.MessageTitle</h2><br />
<p>@Model.MessageText</p>
and the controller looks like this: 控制器看起来像这样:
[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);
}
I've tried passing the messageId through a post as you can see in my controller, but then the partialView is returned as a new page and I simply want to render it in the Inbox view. 我已经尝试过通过控制器中的帖子传递messageId,但是然后partialView作为新页面返回,我只想在“收件箱”视图中呈现它。
Any ideas? 有任何想法吗?
EDIT: Jonesy's answer fixed my problem when I edited it like this: 编辑:琼斯的答案修正了我的问题,当我这样编辑它:
Controller: 控制器:
public ActionResult ReadMessage(int messageId)
{
var model = ConnectionHelper.GetMessageByMessageId(messageId);
return PartialView("ReadMessage", model);
}
View: 视图:
<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>
Razor is run on the server, before the page is rendered. 在呈现页面之前,Razor在服务器上运行。 Once the page is on the client, and they can click a message, the concept of the PartialView is gone - it's all just one HTML page.
一旦页面在客户端上,并且他们可以单击一条消息,PartialView的概念就消失了-它全都是一个HTML页面。
The easiest way for you to do this is to use an Ajax.BeginForm
where your button is, and on click, update an element with a partial view retrieved from the server. 最简单的方法是在按钮所在的位置使用
Ajax.BeginForm
,然后单击以使用从服务器检索的局部视图更新元素。 Something like: 就像是:
@using(Ajax.BeginForm("ReadMessage", "Messages", new AjaxOptions() { UpdateTargetId = "showMessage" })) {
//...
}
//...
<div class="right" id="showMessage">
//ReadMessage partial rendered on button click
</div>
A little method that could help you : 一种可以帮助您的小方法:
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);
}
This will return a PartialView when you call you action via @Html.RenderAction() or call the action via Ajax (jQuery). 当您通过@ Html.RenderAction()调用动作或通过Ajax(jQuery)调用动作时,这将返回PartialView。
You can then use jQuery to prevent the form to be posted and post it with Ajax or when you click on a message, you can also use jQuery to get the result from the action and insert it in your DOM. 然后,您可以使用jQuery阻止表单被发布并使用Ajax进行发布,或者当您单击消息时,还可以使用jQuery从操作中获取结果并将其插入到DOM中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.