如何在ASP.NET MVC视图中逐次显示集合中的单个项？

问题根源 #

你定义的index是服务器端变量，页面渲染完成后这个值就固定在HTML里了。客户端点击按钮时，不会触发服务器端代码重新执行，所以直接递增index不会产生任何效果。

解决方案1：纯前端JavaScript实现（推荐，无需页面回发） #

把所有数据提前渲染到前端，用JavaScript维护当前索引，点击按钮时切换显示对应的项。

修改后的视图代码：

@model List<WordsViewModel>

@{
    ViewBag.Title = "Word Viewer";
}

<div id="word-container">
    <!-- 当前位置显示 -->
    <h3 id="current-position">1/@Model.Count</h3>

    <!-- 初始显示第一个项的内容 -->
    <h4 id="word-name">@Model[0].Name</h4>
    <p id="word-definition">@Model[0].Definition</p>
    <img id="word-image" src="@Model[0].ImagePath" alt="Word image" />
</div>

<div>
    <button id="prev-btn">Previous</button>
    <button id="next-btn">Next</button>
</div>

<script>
    // 将服务器端集合序列化为JS可访问的数组
    const wordList = @Html.Raw(Json.Serialize(Model));
    let currentIndex = 0;
    const totalItems = wordList.length;

    // 统一更新显示内容的函数
    function refreshDisplay() {
        document.getElementById('current-position').textContent = `${currentIndex + 1}/${totalItems}`;
        document.getElementById('word-name').textContent = wordList[currentIndex].Name;
        document.getElementById('word-definition').textContent = wordList[currentIndex].Definition;
        document.getElementById('word-image').src = wordList[currentIndex].ImagePath;
    }

    // 下一项按钮逻辑
    document.getElementById('next-btn').addEventListener('click', () => {
        if (currentIndex < totalItems - 1) {
            currentIndex++;
            refreshDisplay();
        }
    });

    // 上一项按钮逻辑
    document.getElementById('prev-btn').addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            refreshDisplay();
        }
    });
</script>

核心逻辑说明 #

• 用@Html.Raw(Json.Serialize(Model))把服务器端集合转成前端可直接操作的JS数组
• 用JS变量currentIndex维护当前显示项的索引
• 点击按钮时先判断边界（防止索引越界），再更新索引并调用刷新函数更新页面内容

解决方案2：服务器端回发实现（页面会刷新） #

如果依赖服务器端逻辑处理，可以将当前索引通过表单传递给控制器，服务器更新索引后重新渲染页面。

控制器示例代码 #

public ActionResult WordViewer(int? currentIndex)
{
    // 替换为你的集合获取逻辑
    var wordList = GetWordCollectionFromService();
    int index = currentIndex ?? 0;

    // 处理索引边界
    if (index < 0) index = 0;
    if (index >= wordList.Count) index = wordList.Count - 1;

    ViewBag.CurrentIndex = index;
    return View(wordList);
}

修改后的视图代码 #

@model List<WordsViewModel>

@{
    int currentIndex = ViewBag.CurrentIndex ?? 0;
}

<div>
    <h3>@(currentIndex + 1)/@Model.Count</h3>

    <h4>@Model[currentIndex].Name</h4>
    <p>@Model[currentIndex].Definition</p>
    <img src="@Model[currentIndex].ImagePath" />
</div>

<div>
    @using (Html.BeginForm("WordViewer", "YourControllerName", FormMethod.Get))
    {
        <input type="hidden" name="currentIndex" value="@(currentIndex - 1)" />
        <button type="submit" disabled="@(currentIndex == 0)">Previous</button>
    }

    @using (Html.BeginForm("WordViewer", "YourControllerName", FormMethod.Get))
    {
        <input type="hidden" name="currentIndex" value="@(currentIndex + 1)" />
        <button type="submit" disabled="@(currentIndex == Model.Count - 1)">Next</button>
    }
</div>

核心逻辑说明 #

• 点击按钮时提交表单，将计算后的新索引传递给控制器
• 控制器处理索引边界后，通过ViewBag传递当前索引给视图
• 根据当前索引状态禁用按钮，避免越界操作

内容的提问来源于stack exchange，提问作者2033