Asp.net mvc 使用按钮单击更新foreach中的Razor变量

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

我下载了代码以显示所有文章，但我真正想要的是只显示foreach中的前6篇文章，然后用户可以选择在每次单击“显示更多文章”按钮时将显示计数增加6

我使用的是

@foreach（Model.Take中的var项（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>


指数
@{
var displayedArticles=6；
}
@foreach（Model.Take中的var项（显示的项目））
{
@DisplayFor（modeleItem=>item.Title）
@DisplayFor（modelItem=>item.Content）
}


我曾尝试在JQuery中这样做，它确实将更新后的值记录到控制台，但它没有更新Razor foreach

有办法解决这个问题吗？
是的，但您需要AJAX。简单到：

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

这就是要点。现在，在控制器中，您将返回一个指向部分的
ActionResult
。然后，呈现的部分将被注入页面。
Razor代码在发送到视图之前在服务器上进行解析。仅更改客户端中javascript变量的值对已呈现的内容没有影响。您需要使用ajax调用控制器，并返回一个包含“下一篇文章”的部分视图，然后更新DOM