MVC 5, show data by group in Index page - asp.net

Question

I'm new in MVC5.
I have 2 table, tblClient & tblBranch.
The Data Structure are:
tblClient
ID | Name
---------
1 | BCS
2 | LBBI
3 | CARB
tblBranch
ID | cID | BranchName
---------------------
1 | 1 | Savar
2 | 1 | Nobinogor
3 | 2 | Sawrapara
4 | 1 | Mirpur
5 | 3 | Motijheel
6 | 2 | Dhanmondi
7 | 1 | Kazipara
Now I need to show data in index page as like:
BCS
sL | Branch
-----------
1 | Savar
2 | Nobinogor
3 | Mirpur
4 | Kazipara
LBBI
sL | Branch
-----------
1 | Sawrapara
2 | Dhanmondi
CARB
sL | Branch
-----------
1 | Motijheel
How can I do this ?

Answer 1

Write a model class for your index view.
public class MyModel
{
public string GroupName;
public List<string> GroupItems;
}
Specify your model for your view:
#model IEnumurable<MyProject.MyModel>
#foreach (var item in Model)
{
<h2>#item.GroupName</h2>
<ol>
#foreach (var it in item.GroupItems)
{
<li>#it</li>
}
</ol>
}
And finally in the index action of your controller fill the model and pass it to the view:
public ActionResult Index()
{
var model = new List<MyModel>();
var item = new MyModel();
item.GroupName = "Hello World";
item.GroupItems = new List<string>() { "item1", "item2" };
model.Add(item);
return View(model);
}

Answer 2

You can wrap every tblClient in new Object:
tblClient has name and contains List of tblBranch
public Class Client
{
public string clientName {get;set;}
public List<Branch> branches {get;set;}
}
public Class Branch
{
public string branchName
}
and retriere List<Client> and show them to the UI

Answer 3

There is no need in doing something unusual. Especially, groupping by.
You can simply iterate through items and output it.
In ASP.NET Razor:
Dictionary<int, string> clients = // get dictionary from DB like {{1, "BCS"}, {2, "LBBI"} ...}};
List<BranchEntity> branches = // get list of Branch entities just like in DB;
// You can pass these values as ViewBag or together as a Model
#{
foreach (var client in clients)
{
var branchesForClients = branches.Where(x => x.cID == client.Key).ToArray();
<h3>#client.Value</h3>
<table>
for (int i = 0; i < branchesForClients.Length; i++)
{
<tr>
<td>#(i + 1)</td>
<td>#branchesForClients[i].BranchName</td>
</tr>
}
</table>
}
}
Here is an entity:
public class BranchEntity
{
public int Id { get; set; }
public int cId { get; set; }
public string BranchName { get; set; }
}