在MVC中刷新局部视图 [英] refresh a partial view in mvc
问题描述
我有一个详细的视图，其中将有一个对话，甚至在对话中有评论框.我在局部视图中有一个注释框.但是在决定仅刷新有关创建评论的对话时遇到了问题. 我知道我可以在部分视图中绑定以下代码.但是我很难调用动作方法. 因此，它将有详细信息查看代码，然后有下面的代码
i'm having a detail view in which there will be a conversation, and even comment box in conversation. I had a comment box in partial view. but had an issue when decided to refresh just the conversation on creating comment. I know i can bind below code in partial view. but i have difficulty in calling action method for it. So it will have details view code and then below code
<div class="row">
<div class="panel-group" id="accordion">
@foreach (var convo in Model.TicketConversation.OrderByDescending(x => x.LastUpdatedTimestamp))
{
<div class="col-md-10 col-md-offset-1" style="padding-bottom: 5px;">
<div class="panel panel-default">
<div class="panel-heading removePaddingBottom" data-toggle="collapse" data-target="#accord-convo-@convo.id" style="background-color: inherit;" id="accordHeading-@convo.id" onclick="javascript:showHideLastConvoMsg(@convo.id)">
<a style="text-decoration: none !important; color: inherit; width: 100px;">
<span style="font-size: 16px; font-weight: bold; vertical-align: middle !important;"><i class="fa fa-chevron-right" id="accord-heading-icon-@convo.id"></i> @convo.Subject</span>
</a>
@{ var lastmessage = convo.ConversationComments.First(); }
<div class="row">
<div id="accord-lastmsg-@convo.id" style="margin-top: 15px;">
<div class="@lastmessage.DisplayCssClass">
<div class="row">
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 5px; margin-top: 10px;">
<strong>@lastmessage.TypeOfContact</strong>
</div>
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 10px;">
@lastmessage.Message
</div>
</div>
<div class="row">
<div class="col-md-offset-6 col-md-5 text-right text-muted" style="margin-bottom: 10px;">
<small>
<em>Posted by @lastmessage.CommenterName @@ @lastmessage.MessageTimestamp</em>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="accord-convo-@convo.id" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0;">
@if (convo.IsReadOnly == false @*&& Model.IsClosed == false*@)
{
<div class="row">
@*<div class="col-md-12" style="padding-bottom: 3px; padding-top: 3px;">
<a href="@Url.Action("ReplyQuery", new { cid = convo.id })" class="pull-right btn btn-sm btn-default"><i class="fa fa-reply"></i> Reply</a>
</div>*@
---- here i'm calling partial view for comment box---
}
@foreach (var item in convo.ConversationComments)
{
<div>
<div class="message-border @item.DisplayCssClass">
<div class="row">
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 5px;">
<strong>@item.TypeOfContact</strong>
</div>
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 10px;">
@item.Message
</div>
</div>
<div class="row">
<div class="col-md-5 text-right text-muted">
<small>
<em>Posted by @item.CommenterName @@ @item.MessageTimestamp</em>
</small>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
}
</div>
</div>
可以调用哪个方法来获取对话列表??我需要写一个新的动作方法吗?
which method can be called to get conversation list?? do i need to write a new action method.
推荐答案
您可以创建一个Action方法，该方法为您进行的对话返回部分视图.例如:
You can create a Action method that return a partial view for the conversation you have. For ex:
public class SomeCtrlController : Controller
{
public PartialViewResult Conversation(int id)
{
List<Conversation> conversations = new List<Conversation>();
//Use id to create your Model and pass it to Partial View
conversations = PopulateConversations(id);
// The below code search for Conversation.cshtml inside Views\SomeCtrl folder
return PartialView(conversations);
}
}
然后从cshtml(剃刀视图)中调用它，就像第一次加载时一样:
Then from your cshtml (razor view) you can call it like for first time loading:
@{ Html.RenderAction("Conversation", "SomeCtrl", new { id = 1 /*this will be id for which conversion have to load */ });}
然后仅刷新对话即可使用jQuery ajax或get方法.这只会刷新您指定的部分.参见下面的示例
Then to refresh just conversations you can use jQuery ajax or get method. This will refresh only section of the which you have specified. See example below
<script>
var conversationData = {
"id": 1 /*this will be id for which conversion have to load */
};
$.get("/SomeCtrl/Conversation", conversationData,
function (returnedHtml) {
$("#placeHolderDivToHaveConversation").html(returnedHtml);
});
</script>
这篇关于在MVC中刷新局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
