如何在MVC4中將部分視圖發送到Ajax

Question

我有一個ajax調用功能。 在其中，我稱局部視圖。 該視圖用於顯示評論。 如何使用Ajax刷新此視圖？ 我在上下文中不喜歡json，因為我的linq查詢是使用模型設置的。 因此，這些具有部分視圖的模型應該發送給ajax方法。 Ajax方法應該替換我的div。 請注意，在ajax調用之前，應在頁面加載時首先呈現此視圖。 我不明白這一點。 我怎么了

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

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

        }
    });

控制者

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




    }

部分視圖

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

     }

我的觀點

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

Answer 1

您可以使用jquery加載功能：

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

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

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

您的操作方法和局部視圖無需編輯。

Answer 2

我們在項目中做了類似的事情。 首先，我們有兩種操作方法，一種是獲取數據（不包含任何與視圖相關的東西），然后將其傳遞給其他具有視圖的方法，它什么也不做，只能直接獲取輸入並渲染視圖。

上下文是我們有一個計時器，該計時器將在特定間隔內調用ajax請求並將數據傳遞給操作（具有視圖），該操作將在后台更新視圖。

希望我說清楚。