How to send partial view to ajax in mvc4

Question

I have an ajax call function. Inside that I'm calling a partial view. This view is for displaying comments. How can I refresh this view using ajax? I don't like json in my context, because my linq queries are set up with models. So these models with partial view should be send to ajax method. Ajax method should replace my div. Note that before ajax call, this view should be rendered at first as the page loads. I am not getting this. What is my fault?

 $.ajax({
        url: '/Home/Item',
        type: 'POST',
        data: { itemid: itemid },
        success: function (data) {

       $('.mycontainer').html(data);

        }
    });

Controller

        public ActionResult Item(int itemid)
    {

        FoodContext db = new FoodContext();
        ViewBag.FoodItems = db.FoodItems.Where(row => row.itemid == itemid);
        List<ImageComment> comments = (from user in db.TxtComments
                                       join o in db.Logins on user.username equals o.username
                                       where user.itemid == itemid
                                       select new ImageComment
                                       {
                                           ImageUrl = o.imgurl,
                                           Comment = user.txtcmt,
                                           ImgCmntUrl = user.imgurl,
                                           Cmntdate = user.cmtdate,
                                           Username = user.username,

                                       }).OrderByDescending(x => x.Cmntdate).ToList();

        ViewModel vm = new ViewModel { ImageComments = comments };
        return PartialView("_Comments", vm);




    }

Partial View

      @model ViewModel

     @foreach (ImageComment comment in Model.ImageComments)
     {
    <table width="100%" height="152" border="0">
  <tr>
    <td width="101" rowspan="2" valign="top"><img src="@comment.ImageUrl" width="100%" height="100%" /></td>
    <td height="27" colspan="3" valign="middle"><p> @comment.Username Commented On   On @comment.Cmntdate</p></td>
  </tr>
  <tr>

    <td colspan="2" rowspan="2"><div style="width:70%;">  

    @if (@comment.ImgCmntUrl != null)
    {
     <img src="@Url.Content(comment.ImgCmntUrl)" width="100%" height="100%" />
    }
  </div>     
   <div style="background-color:#E3EEFA;width:68%;min-height:50px;padding:5px;">@comment.Comment</div></td>
    <td width="209" height="29">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="23">&nbsp;</td>
    <td>Like this.</td>
    <td>Unlike this</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="23">&nbsp;</td>
    <td width="303">&nbsp;</td>
    <td width="588">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>  

     }

My view

<div class="mycontainer">
</div>

Answer 1

You could use the jquery load function:

<div class=".mycontainer"></div>

<script>
    function ReloadComments(){
        $(".mycontainer").load("@Url.Action("Item", new { itemId = Model.Id })");
    }

    $(function(){
        setInterval(ReloadComments, 10000);
        ReloadComments();
    });
</script>

Your action method and partial view don't need to be edited.

Answer 2

We have did something similar in our project. first of all we have two action methods one is to get the data (doesnot have any view related things) and pass it to other one which have view , it will do nothing but get the input and render view directly.

The context is we have a timer which will call the ajax request in particular interval and get the data pass it to action (which has view) that will update the view in the background.

Hope i made it clear.