Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetReport()
{
List<Item> items = new List<Item>();
items.Add(new Item { Id = 1, Name = "aaa" });
items.Add(new Item { Id = 2, Name = "bbb" });
items.Add(new Item { Id = 3, Name = "ccc" });
var JsonResult = Json(items, JsonRequestBehavior.AllowGet);
return JsonResult;
}
[HttpPost]
public JsonResult getAll(int Id)
{
List<Report> reportList = null;
if (Id > 0)
{
reportList = GetAllReports().Where(x => x.Id == Id).ToList();
}
else
{
reportList = GetAllReports();
}
var JsonResult = Json(reportList, JsonRequestBehavior.AllowGet);
return JsonResult;
}
public List<Report> GetAllReports()
{
List<Report> reports = new List<Report>();
reports.Add(new Report { RId = 1, Id = 1, Item = "Item1" });
reports.Add(new Report { RId = 2, Id = 1, Item = "Item2" });
reports.Add(new Report { RId = 3, Id = 2, Item = "Item3" });
return reports;
}
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
}
public class Report
{
public int RId { get; set; }
public int Id { get; set; }
public string Item { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<style type="text/css">
.modalPopup
{
position: fixed;
top: 0;
left: 0;
background-color: #B8B8B8;
z-index: 99;
opacity: 0.9;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
min-height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', '$window', '$timeout', function ($scope, $http, $window, $timeout) {
$scope.ShowLoader = false;
GetItems();
function GetItems() {
$scope.Items = [];
$http({
method: 'Get',
url: '/Home/GetReport/'
}).success(function (data, status, headers, config) {
$scope.Items = data;
$scope.Items.splice(0, 0, { Id: 0, Name: 'All' });
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.IsVisible = false;
$scope.GetAllItems = function () {
if ($scope.Item != undefined) {
var Id1 = $scope.Item;
//Show loader image.
$scope.ShowLoader = true;
$http({
method: 'POST',
url: '/Home/getAll/',
params: { Id: Id1 }
}).success(function (data, status, headers, config) {
//Hide loader image & process successful data.
$scope.ShowLoader = false;
if (data.length > 0) {
$scope.items = data;
$scope.IsVisible = true;
} else {
$scope.items = [];
$scope.IsVisible = false;
}
}).error(function (data, status, headers, config) {
$scope.items = 'Unexpected Error';
//Hide loader image.
$scope.ShowLoader = false;
});
} else {
$scope.items = [];
$scope.IsVisible = false;
}
}
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="modalPopup" align="center" ng-show="ShowLoader">
<br /><br />
Loading. Please wait.<br /><br />
<img src="../../Images/progress.gif" alt="Loading. Please wait." />
</div>
<div class="form-horizontal">
<div class="form-group">
<label for="ID" class="control-label col-xs-2">
Item</label>
<div class="col-md-2">
<select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
<option value="">-- Select Item --</option>
</select>
</div>
</div>
</div>
<div>
<button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
<span class="glyphicon glyphicon-ok"></span>Submit
</button>
</div>
<div class="container" ng-show="IsVisible" id="printarea">
<table class="table table-bordered">
<tr class="success">
<th>Id</th>
<th>Item</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.RId}}</td>
<td>{{item.Item}}</td>
</tr>
</table>
</div>
</body>
</html>
Screenshot
