refresh a partial view in mvc

Question

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

which method can be called to get conversation list?? do i need to write a new action method.

Answer 1

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);
    }
}

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 */ });}

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>

Answer 2

when I need to do this, I work with jquery ajax. For example:

I need to load this div below dynamically:

Button View

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

I call my ajax in one event and load de result there:

Success ajax

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

Partial

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

Return on Controller :

  return PartialView("_Player", video);