Hi mahesh213,
You need to verify your $http service that are used to populate the form.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Namespaces
using System.Configuration;
using System.Data.SqlClient;
Controller
Home
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
Report
public class ReportController : Controller
{
// GET: /Report/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
List<object> employees = new List<object>();
string sql = "SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees ORDER BY EmployeeID ASC";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
employees.Add(new
{
EmployeeId = sdr["EmployeeID"],
FirstName = sdr["FirstName"],
LastName = sdr["LastName"],
City = sdr["City"],
Country = sdr["Country"]
});
}
}
conn.Close();
}
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
}
Report1
public class Report1Controller : Controller
{
// GET: /Report1/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
List<object> employees = new List<object>();
string sql = "SELECT TOP 4 EmployeeID,FirstName,LastName,City,Country FROM Employees ORDER BY EmployeeID DESC";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
employees.Add(new
{
EmployeeId = sdr["EmployeeID"],
FirstName = sdr["FirstName"],
LastName = sdr["LastName"],
City = sdr["City"],
Country = sdr["Country"]
});
}
}
conn.Close();
}
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
}
View
Home
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyControll", function ($scope, $http) {
$scope.employees = [
{ Id: 1, ControllerName: "Report", Url: "/report/Index/" },
{ Id: 2, ControllerName: "Report1", Url: "/report1/Index/"}];
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyControll">
<h4>An Unordered List:</h4>
<div ng-repeat="employee in employees">
<ul>
<li><a href="{{employee.Url}}">{{employee.ControllerName}}</a></li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
Report
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $http, $window) {
$http({
method: "get",
url: "/Report/GetEmployees/"
}).then(function (response) {
$scope.Employees = response.data;
});
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in Employees">
<td>{{ employee.EmployeeId }}</td>
<td>{{ employee.FirstName }}</td>
<td>{{ employee.LastName }}</td>
<td>{{ employee.City }}</td>
<td>{{ employee.Country }}</td>
</tr>
</tbody>
</table>
<br />
<%:Html.ActionLink("Back","Index","Home") %>
</div>
</body>
</html>
Report1
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $http, $window) {
$http({
method: "get",
url: "/Report1/GetEmployees/"
}).then(function (response) {
$scope.Employees = response.data;
});
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in Employees">
<td>{{ employee.EmployeeId }}</td>
<td>{{ employee.FirstName }}</td>
<td>{{ employee.LastName }}</td>
<td>{{ employee.City }}</td>
<td>{{ employee.Country }}</td>
</tr>
</tbody>
</table>
<br />
<%:Html.ActionLink("Back","Index","Home") %>
</div>
</body>
</html>
Screeenshot
