在MVC中刷新局部视图

Question

我有一个详细的视图，其中将有一个对话，甚至在对话中有评论框。 我在局部视图中有一个注释框。 但是在决定仅刷新有关创建评论的对话时遇到了问题。 我知道我可以在部分视图中绑定以下代码。 但是我很难调用动作方法。 因此它将有详细信息查看代码，然后是下面的代码

<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>&nbsp;&nbsp;@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>&nbsp;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>

可以调用哪种方法来获取对话列表？ 我需要写一个新的动作方法吗？

Answer 1

您可以创建一个Action方法，该方法为您的对话返回部分视图。 例如：

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（剃刀视图）中，可以像首次加载时一样调用它：

@{ Html.RenderAction("Conversation", "SomeCtrl", new { id = 1 /*this will be id for which conversion have to load */ });}

然后，只要刷新对话，就可以使用jQuery ajax或get方法。 这只会刷新您指定的部分。 见下面的例子

<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>

Answer 2

当我需要执行此操作时，我将使用jquery ajax。 例如：

我需要在下面动态加载此div：

按钮检视

  <button id="buscarVideos" class="btn">Buscar</button>

我在一个事件中调用我的ajax并在那里加载结果：

成功ajax

 $("#partial_video").html(data);

部分的

 <div class="col-lg-12">
            <div id="partial_video">
              @*@Html.Partial("_Player")*@
          </div>
   </div>

返回控制器 ：

  return PartialView("_Player", video);