如何在MVC中循环生成HTML数据？实现后台新增菜单前端自动渲染

嘿，这个需求在ASP.NET MVC里完全能实现，思路和PHP的循环生成页面元素是一样的，只是咱们用Razor视图引擎来做。我给你一步步拆解：

首先得有个模型类来映射你数据库里的菜单分类数据。假设你的数据库表包含主键Id、菜单名称CategoryName、图片文件名ImageFileName（比如pic1.jpg）这些字段，模型可以这么写：

public class MenuCategory
{
    public int Id { get; set; }
    public string CategoryName { get; set; }
    public string ImageFileName { get; set; }
    // 你还可以按需添加其他字段，比如排序序号、是否启用状态等
}

接下来要在控制器里拿到数据库中的菜单数据。这里用Entity Framework Core（EF Core）来做数据访问会比较方便，先配置好你的DbContext：

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
    {
    }

    // 对应数据库里的菜单分类表
    public DbSet<MenuCategory> MenuCategories { get; set; }
}

然后在Home控制器的目标Action（比如用来展示菜单列表的Index Action）里，注入DbContext并查询数据：

public class HomeController : Controller
{
    private readonly AppDbContext _dbContext;

    // 通过构造函数注入DbContext
    public HomeController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public IActionResult Index()
    {
        // 从数据库获取所有菜单分类，也可以加过滤条件（比如只取启用的）
        var menuList = _dbContext.MenuCategories.ToList();
        // 把数据传给视图
        return View(menuList);
    }
}

现在把你原来手动重复的代码换成Razor的@foreach循环，动态生成每个菜单项。视图代码修改成这样：

@* 指定视图接收的模型是菜单分类的列表 *@
@model List<MenuCategory>

@* 循环遍历每个菜单分类，生成对应的布局 *@
@foreach (var category in Model)
{
    <div class="responsive">
        <div class="gallery">
            @* 如果Submenu需要接收分类ID，这里可以加参数：new { id = category.Id } *@
            <a href="@Url.Action("Submenu", "Home")">
                <img src="@Url.Content($"~/Content/mytemplate/img/{category.ImageFileName}")" 
                     alt="@category.CategoryName" 
                     width="600" 
                     height="400">
            </a>
            <div class="desc">@category.CategoryName</div>
        </div>
    </div>
}

• 如果你的Submenu Action需要根据分类ID展示对应的子菜单，记得修改a标签的链接：@Url.Action("Submenu", "Home", new { id = category.Id })，然后在Submenu Action里接收int id参数来查询子菜单数据。
• 要确保数据库里的ImageFileName存储的是正确的文件名（比如pic1.jpg），而且图片确实放在~/Content/mytemplate/img/目录下。
• 要是你不用EF Core，也可以用ADO.NET的SqlDataReader读取数据，把数据封装成List<MenuCategory>之后传给视图，循环渲染的逻辑是完全一样的。

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