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。然后，渲染的部分将被注入您的页面。

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

1 个答案: