Clash Royale CLAN TAG

How to populate data on nav-tab in partial View in MVC?

I have partial View where I have 2 nav-tab. On Each tab, I want to populate data based on Country.

Currently, I am getting following error:

Insufficient stack to continue executing the program safely. This can
happen from having too many functions on the call stack or function on
the stack using too much stack space.

Controller

public ActionResult Index()
{
ClsHome model = new ClsHome();

return View(model);
}

public PartialViewResult EmployeeBasedCountry(int CountryId)
{
ClsHome clshome=new ClsHome();
clshome.Country = CountryId;

clshome.countries = CountryFilter(CountryId);
return PartialView("~/Views/Home/_pEmp.cshtml", clshome);
}


Index View

@model EmpWebsite.Models.Home.ClsHome

<div class="col-md-5">
@Html.Partial("_pEmp")
</div>


Partial View

@model EmpWebsite.Models.Home.ClsHome
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#Tab1">India</a></li>
<li><a data-toggle="tab" href="#Tab2" style="width:auto">USA</a></li>
</ul>


<div class="tab-content">
<div id="Tab1" class="tab-pane fade">
@Html.Action("EmployeeBasedCountry", new { @CountryId = "1" })
<div class="panel">
<table class="table-striped">
<tr class="heading">
<th>
EmpId
</th>
<th>
EmpName
</th>

</tr>

@foreach (var item in Model)
{
<tr>
<td>
@item.EmpId
</td>
<td>
<a>@item.EmpName</a>
</td>


</tr>
}

</table>
</div>
</div>
<div id="Tab2" class="tab-pane fade">
@Html.Action("EmployeeBasedCountry", new { @CountryId = "2" })
<div class="panel">
<table class="table-striped">
<tr class="heading">
<th>
EmpId
</th>
<th>
EmpName
</th>

</tr>

@foreach (var item in Model)
{
<tr>
<td>
@item.EmpId
</td>
<td>
<a>@item.EmpName</a>
</td>


</tr>
}

</table>
</div>
</div>


</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.