2015-04-01 103 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。呈现的部分将被注入到您的页面中。