Making a single row with comma separated list in mvc

Question

Hi I have a mvc application in which I have teacher, courses and techervs courses table , Now i am assigning multiple courses to a signle teacher as show below in my table 

 

Teacher Table:

id	name
1	GGG
2	CCCC

 

Courses Table

id	name
1	Math
2	geography

 

TeacherVsCourses:

Id	course_id	Teacher_Id
1	1	1
2	2	1
3	3	2
4	1	2

 

Now below is my contorller code:

public ActionResult Index(string sortOrder, string currentFilter, string SearchString, int? page)
{
ViewBag.Course_Id = _ITeacherCoruses.PopulateCourses();
ViewBag.Teacher_Id = _ITeacherCoruses.PopulateTeachers();
ViewBag.Semester_Id = _ITeacherCoruses.PopulateSemsters();
// ViewBag.Teacher_Id = new SelectList(db.Registration, "User_Id", "FirstName");
ViewBag.CurrentSort = sortOrder;
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date";
if (SearchString != null)
{
page = 1;
}
else
{
SearchString = currentFilter;
}
ViewBag.CurrentFilter = SearchString;
var dept = from s in db.Teacher_courses
select s;
dept =dept.Include(t => t.course).Include(t => t.regs).Include(t => t.semesterName).OrderBy(t => t.Teacher_Id);
if (!String.IsNullOrEmpty(SearchString))
{
dept = dept.Where(s => s.course.Course_Name.Contains(SearchString));
// || s.FirstMidName.Contains(searchString));
}
switch (sortOrder)
{
case "name_desc":
dept = dept.OrderByDescending(s => s.course.Course_Name);
break;
case "Date":
dept = dept.OrderBy(s => s.Course_Assignment_date);
break;
case "date_desc":
dept = dept.OrderByDescending(s => s.Course_Assignment_date);
break;
default:
dept = dept.OrderBy(s => s.course.Course_Name);
break;
}
int pageSize = 5;
int pageNumber = (page ?? 1);
// var teacher_courses = db.Teacher_courses.Include(t => t.course).Include(t => t.regs).Include(t => t.semesterName).OrderBy(t=>t.Teacher_Id);
dept = dept.Include(t => t.course).Include(t => t.regs).Include(t => t.semesterName).OrderBy(t => t.Teacher_Id);
//return View(groupedUsers);
return View(dept.ToPagedList(pageNumber, pageSize));
// return View(teacher_courses.ToList());
}

below is my view :

@*@model IEnumerable<CMS_Monitoring.Models.Teacher_courses>*@
@using PagedList;
@using PagedList.Mvc;
@using CMS_Monitoring.Helpers;
@model PagedList.IPagedList<CMS_Monitoring.Models.Teacher_courses>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout2.cshtml";
}
<h2>Index</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Required meta tags -->
<script type="text/javascript">
setTimeout(function () {
$('#successMessage').fadeOut('slow');
}, 12000); // <-- time i
</script>
<p>
@Html.ActionLink("Create New", "Create", "Departments", new { @class = "btn btn-info" })
</p>
@if (TempData["UpdatedMessage"] != null)
{
<p class="alert alert-success" id="successMessage">@TempData["UpdatedMessage"]</p>
}
<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm())
{
<hr />
<p>
Find by Department name: @Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
<br /><br /><br /><br />
if (TempData["DeleteDepartment"] != null)
{
<p class="alert alert-success" id="successMessage">@TempData["DeleteDepartment"]</p>
}
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model[0].course.Course_Name)
</th>
<th>
@Html.DisplayNameFor(model => model[0].regs.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model[0].semesterName.Semester_Title)
</th>
<th>
@Html.DisplayNameFor(model => model[0].is_on_Substitute)
</th>
<th>
@Html.DisplayNameFor(model => model[0].Active)
</th>
<th>
@Html.DisplayNameFor(model => model[0].Course_Assignment_date)
</th>
<th>
@Html.DisplayNameFor(model => model[0].Date_Modified)
</th>
<th>
@Html.DisplayNameFor(model => model[0].Added_By)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.course.Course_Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.regs.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.semesterName.Semester_Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.is_on_Substitute)
</td>
<td>
@Html.DisplayFor(modelItem => item.Active)
</td>
<td>
@Html.DisplayFor(modelItem => item.Course_Assignment_date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Date_Modified)
</td>
<td>
@Html.DisplayFor(modelItem => item.Added_By)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</table>
}
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

but i need to have one row for each teacher with comma separated courses how to pass this to view and bind can someone show complete process i have group it in controller but do not know how to pass to view and use it .see my view result here 

https://ibb.co/QkMxPf6