Hi mahesh213,
Refer below sample code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetCategory()
{
List<Category> categories = new List<Category>();
categories.Add(new Category { CategoryId = 1, CategoryName = "AA" });
categories.Add(new Category { CategoryId = 2, CategoryName = "BB" });
return Json(categories, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult GetProduct()
{
List<Product> products = new List<Product>();
products.Add(new Product { ProductId = 1, ProductName = "VV" });
products.Add(new Product { ProductId = 2, ProductName = "MM" });
return Json(products);
}
public JsonResult getAll()
{
List<OrderDetails> orderDetails = new List<OrderDetails>();
orderDetails.Add(new OrderDetails { Id = 1, Name = "mahesh", ProductId = 1, ProductName = "VV", CategoryId = 1, CategoryName = "AA" });
orderDetails.Add(new OrderDetails { Id = 2, Name = "mahesh 1", ProductId = 2, ProductName = "MM", CategoryId = 2, CategoryName = "BB" });
return Json(orderDetails, JsonRequestBehavior.AllowGet);
}
public JsonResult getEmployeeByNo(int id)
{
List<Orders> orders = new List<Orders>();
orders.Add(new Orders { Id = 1, Name = "mahesh", ProductId = 1, CategoryId = 1 });
orders.Add(new Orders { Id = 2, Name = "mahesh 1", ProductId = 2, CategoryId = 2 });
var result = orders.Where(x => x.Id == id);
return Json(result, JsonRequestBehavior.AllowGet);
}
public class Category
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
public class OrderDetails
{
public int Id { get; set; }
public string Name { get; set; }
public int CategoryId { get; set; }
public string CategoryName { get; set; }
public int ProductId { get; set; }
public string ProductName { get; set; }
}
public class Orders
{
public int Id { get; set; }
public string Name { get; set; }
public int CategoryId { get; set; }
public int ProductId { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller("myCntrl", ['$scope', '$http', 'myService', function ($scope, $http, myService) {
$scope.mahesh = false;
GetCategory();
//GetProduct();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/Home/GetCategory'
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function GetProduct() {
$scope.products = [];
$http({
method: 'Post',
url: '/Home/GetProduct'
}).success(function (data, status, headers, config) {
$scope.products = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
GetAllStates();
//To Get All Recordss
function GetAllStates() {
var getData = myService.getstates();
getData.then(function (emp) {
$scope.states = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
$scope.editState = function (state) {
GetCategory();
GetProduct();
GetAllStates();
$scope.mahesh = true;
var getData = myService.getState(state.Id);
getData.then(function (emp) {
$scope.employee = emp.data;
$scope.Id = state.Id;
$scope.Name = state.Name;
//$scope.CategoryName = state.CategoryName;
$scope.CategoryName = state.CategoryId;
//$scope.ProductName = state.ProductName;
$scope.ProductName = state.ProductId;
$scope.Action = "Edit";
},
function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
$scope.apply();
}
} ]);
app.service("myService", function ($http) {
//get All countries
this.getstates = function () {
return $http.get("/Home/getAll");
};
this.getState = function (Id) {
var response = $http({
method: "post",
url: "/Home/getEmployeeByNo",
params: {
id: JSON.stringify(Id)
}
});
return response;
}
});
</script>
</head>
<body ng-controller="myCntrl">
<div class="container">
<div>
<div id="wrapper" class="clearfix" ng-show="mahesh">
<form name="userForm" novalidate>
<h4 class="modal-title" style="text-align: center;">{{Action}} State Details</h4>
<div class="form-horizontal">
<div class="form-row">
<div class="col-md-4">
<label for="Name">Name</label>
<input type="text" ng-model="Name" />
</div>
<div>
<div class="col-md-4">
<label for="CategoryName">Category</label>
<select class="form-control" id="CategoryName" select2="" ng-model="CategoryName"
ng-change="GetProducts()" containercssclass="all" ng-options="c.CategoryId as c.CategoryName for c in categories"
ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</div>
<div class="col-md-4">
<label for="ProductName">Product</label>
<select class="form-control" id="ProductName" select2="" ng-model="ProductName" containercssclass="all"
ng-options="c.ProductId as c.ProductName for c in products" ng-disabled="disabled">
<option value="">Select Product</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<hr style="width: 550px;" />
<div id="dvContainer">
<div>
<div class="table-responsive " style="overflow-x: auto;">
<table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped"
style="margin-left: 20px; margin-right: 20px;">
<tr class="success">
<th><b>Id</b></th>
<th><b>Name</b></th>
<th><b>Category</b></th>
<th><b>Product</b></th>
</tr>
<tr dir-paginate="state in states|orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
<td>{{state.Name}}</td>
<td>{{state.CategoryName}}</td>
<td>{{state.ProductName }}</td>
<td><button type="button" class="btn btn-info btn-sm" ng-click="editState(state)" readonly>Edit</button></td>
</tr>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
