How to use nested foreach loop in .cshtml file in MVC ASP .net C#

Question

I am creating an application in which I am retrieving data from two different table using Mysql database. And I get that data properly but the problem is that when I try to display it on a view using foreach loop then data is not display in proper manner.

Here is my code:

Controller

public ActionResult me()
{

      ViewAllData objviewalldata = new ViewAllData();
      // var emp1 = db.emps.FirstOrDefault(e => e.empid == 1);
      //  objviewalldata.deptname = emp1.dept.deptname;
      // objviewalldata.empname = emp1.empname;


      var emp1 = new ViewAllData();

      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))
          {
                MySqlDataReader dr;
                emp1.alllemp = new List<string>();
                emp1.alldept = new List<string>();
                using ( dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {
                        emp1.empname = dr["empname"].ToString();
                        emp1.deptname = dr["deptname"].ToString();

                        emp1.alllemp.Add(emp1.empname);
                        emp1.alldept.Add(emp1.deptname);
                    }
                }
           }
      }
      return View(emp1);


} 

View.cshtml

@model  MvcApplication3.Models.ViewAllData

@{
    ViewBag.Title = "Data";
}

<h2>Data</h2>


<table>
    <tr>
        <th>Employee Name</th>
        <th>Depart Name</th>
    </tr>

@foreach (string item in Model.alllemp)
{ <tr>

        <td>@Html.Label(item)</td>

     @foreach (string item1 in Model.alldept)
        {
          <td>@Html.Label(item1)</td>
        } 

       </tr>  

}

</table>

this is my output

I want output like

Employee Name Department Name
Neel          Software
Nisarg        Software
Prachi        Embeded

Answer 1

It makes mistake result in the codes as follows:

 emp1.alllemp.Add(emp1.empname);
 emp1.alldept.Add(emp1.deptname);

Maybe you can declare ViewAllData as follows:

public List<VO> emps {get;set;}

public class VO 
{
   public string empname {get;set;}
   public string deptname {get;set;}
}

Then, modify codes in data layer.

using ( dr = cmd.ExecuteReader())
{
   while (dr.Read())
   {
      VO vo = new VO();
      vo.empname = dr["empname"].ToString();
      vo.deptname = dr["deptname"].ToString();

      emp1.emps.Add(vo);
   }
}

Then, modify code in view layer.

@foreach (string item in Model.emps)
{ 
  <tr>
   <td>@Html.Label(item.empname)</td>
   <td>@Html.Label(item.deptname)</td>     
  </tr>  
}

Answer 2

Just replace the foreach loop with a simple for loop as your output can be generated without the nesting:

<table>
<tr>
    <th>Employee Name</th>
    <th>Depart Name</th>
</tr>

@for (int i=0; i < Model.allemp.Count;i++)
{
<tr>

    <td>@Html.Label(Model.allemp[i])</td>

    <td>@Html.Label(Model.alldept[i])</td>


</tr>

}