在mvc中刷新部分视图

本文关键字：视图 刷新部 mvc | 更新日期: 2023-09-27 18:20:45

我有一个详细视图，其中将有一个对话，甚至对话中的评论框。我有一个局部视图的评论框。但当决定只刷新创建评论的对话时，出现了问题。我知道我可以在部分视图中绑定以下代码。但我很难调用它的操作方法。所以它将有详细的视图代码，然后下面的代码

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

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

在mvc中刷新部分视图

您可以创建一个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 */ });}

然后，为了只刷新对话，您可以使用jQueryajax或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>

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