在 mvc 中刷新局部视图答案

【问题标题】：refresh a partial view in mvc在 mvc 中刷新局部视图
【发布时间】：2016-02-07 10:19:39
【问题描述】：

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

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

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

【问题讨论】：

标签： c# sql .net ajax model-view-controller

【解决方案1】：

当我需要这样做时，我使用 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);

【讨论】：

【解决方案2】：

您可以创建一个 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>

【讨论】：