ASP.NET MVC中.cshtml嵌套foreach循环数据展示异常问题

我看了你的代码，问题根源很明显：你把员工姓名和部门名称分别存在两个独立的List<string>里，然后在视图里用嵌套foreach循环，这就导致每个员工都会遍历一遍所有部门，输出自然全乱了！正确的思路应该是把每一组「员工+对应部门」作为一个整体来存储，而不是拆分到两个列表里。

下面是具体的修改步骤：

1. 创建配对模型类 #

首先新建一个类，用来保存单条员工与部门的对应关系：

namespace MvcApplication3.Models
{
    public class EmployeeDeptPair
    {
        public string EmpName { get; set; }
        public string DeptName { get; set; }
    }
}

2. 更新ViewAllData模型 #

把原来的两个List<string>换成存储配对对象的列表：

public class ViewAllData
{
    // 如果你不需要单个的empname/deptname，可以删掉这两个属性
    public string empname { get; set; }
    public string deptname { get; set; }
    
    // 新增这个列表，用来存所有员工-部门配对
    public List<EmployeeDeptPair> EmployeeDeptList { get; set; }
}

3. 修改Controller的数据读取逻辑 #

读取数据库时，把每一行数据封装成EmployeeDeptPair对象，添加到配对列表中：

public ActionResult me() 
{ 
    ViewAllData objviewalldata = new ViewAllData(); 
    // 初始化配对列表
    objviewalldata.EmployeeDeptList = new List<EmployeeDeptPair>();

    MySqlConnection con = new MySqlConnection(@"server=127.0.0.1;user id=root;pwd=n0711p2010p;database=demo;persistsecurityinfo=True"); 
    using (con) 
    { 
        con.Open(); 
        string query = "select emp.empname,dept.deptname from emp inner join dept on emp.deptid=dept.deptid"; 
        using (MySqlCommand cmd = new MySqlCommand(query, con)) 
        { 
            using (MySqlDataReader dr = cmd.ExecuteReader()) 
            { 
                while (dr.Read()) 
                { 
                    var empDeptPair = new EmployeeDeptPair();
                    empDeptPair.EmpName = dr["empname"].ToString();
                    empDeptPair.DeptName = dr["deptname"].ToString();
                    objviewalldata.EmployeeDeptList.Add(empDeptPair);
                } 
            } 
        } 
    } 
    return View(objviewalldata); 
}

4. 简化视图的循环逻辑 #

现在视图里只需要一个foreach循环，遍历配对列表就能正确显示每一行数据：

@model MvcApplication3.Models.ViewAllData 
@{ 
    ViewBag.Title = "Data"; 
} 

<h2>Data</h2> 

<table> 
    <tr> 
        <th>Employee Name</th> 
        <th>Department Name</th> 
    </tr> 
    @foreach (var pair in Model.EmployeeDeptList) 
    { 
        <tr> 
            <td>@pair.EmpName</td> 
            <td>@pair.DeptName</td> 
        </tr> 
    } 
</table>

为什么原来的代码会乱？ #

你原来的两个列表alllemp和alldept是平行存储的——第一个员工对应第一个部门，第二个员工对应第二个部门，但嵌套foreach会让每个员工都输出所有部门名称，比如第一个员工行里会把所有部门都列一遍，第二个员工行也是如此，这自然和你想要的一对一对应格式不符。而用配对类的方式，每一条数据都是完整的「员工+部门」组合，循环一次就能精准输出每一行。

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