单击按钮更新foreach中的Razor变量

Question

好吧，经过大量搜索，我还没有真正找到问题的答案。我目前正在开发一个页面，其主要目的是在主页上显示文章。

我得到了显示所有文章的代码，但我真正想要的是只显示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中尝试过这样做，它确实将更新后的值记录到控制台，但没有更新Razor-foreach。

有办法解决这个问题吗？

Answer 1

是的，但您需要AJAX。简单如：

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

这就是它的要点。现在在你的控制器中，你会发回一个指向分部的ActionResult。然后，渲染的部分将被注入到您的页面中。