2015-04-01 104 views
0

好吧,所以經過大量的搜索周圍我還沒有真正找到我的問題的答案。我目前在一個頁面上工作,主要目的是在主頁上顯示文章。更新剃刀變量在foreach使用按鈕點擊

我得到的代碼顯示所有的文章,但我真正想要的只是顯示在第一篇文章中說6個第一篇文章,然後用戶可以選擇每次增加顯示計數6次點擊「顯示更多文章」按鈕。

我使用@foreach (var item in Model.Take(displayedArticles)),其中var displayedArticles = 6;

是否有用戶的方式來增加點擊「顯示更多」按鈕,此櫃檯?我有一些問題。

我當前的代碼:

<div class="container-fluid"> 
<h2 class="page-header">Index</h2> 

@{ 
    var displayedArticles = 6; 
} 

@foreach (var item in Model.Take(displayedArticles)) 
{ 
    <div class="col-lg-4"> 
     <h2>@Html.DisplayFor(modelItem => item.Title) </h2> 
     <div id="textContent"> 
      @Html.DisplayFor(modelItem => item.Content) 
     </div> 
    </div> 
} 
<div class="col-lg-12" > 
    <input type="button" class="btn btn-success" value="Show more articles" id="showMore" onclick="@(displayedArticles+=6)" style="width: 100%"/> 
</div> 

我試圖做到這一點在jQuery和它沒有記錄的更新值到控制檯,但它並沒有更新的剃刀的foreach。

有沒有辦法解決這個問題?

+0

Razor代碼在發送到視圖之前在服務器上解析。只是在客戶端改變一個javascript變量的值對已經呈現的內容沒有影響。您需要使用ajax來調用控制器並返回包含'next articles'的部分視圖並更新DOM – 2015-04-01 23:15:23

回答

0

是的,但你需要AJAX。一些簡單的:

$('#showMore').click(function() { 
    $.get('Article/ShowMore', function (html) { 
     $('.col-lg-4').append(html); 
    }); 
}); 

這就是它的要義。現在在你的控制器中,你會發回一個指向局部的ActionResult。呈現的部分將被注入到您的頁面中。