Hi mahesh213,
Check the below example.
Controller
public class HomeController : Controller
{
// GET: /Home/
MasterEntities db = new MasterEntities();
public ActionResult Index()
{
return View();
}
//Category
[HttpGet]
public ActionResult GetCategories()
{
List<Category> coun = new List<Category>();
coun.Add(new Category { CategoryID = 1, CategoryName = "apple" });
coun.Add(new Category { CategoryID = 2, CategoryName = "Lenovo" });
return Json(coun, JsonRequestBehavior.AllowGet);
}
//Product
[HttpGet]
public ActionResult GetProducts()
{
List<Product> coun = new List<Product>();
coun.Add(new Product { ProductId = 1, ProductName = "samsung" });
coun.Add(new Product { ProductId = 2, ProductName = "LPG" });
return Json(coun, JsonRequestBehavior.AllowGet);
}
//Display values on Grid View
public JsonResult getAll()
{
List<Orders> employeeList = new List<Orders>();
employeeList.Add(new Orders { OrderId = 1, OrderName = "mahesh", CategoryID = 1 });
employeeList.Add(new Orders { OrderId = 2, OrderName = "rahul", CategoryID = 2 });
var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
return JsonResult;
}
[HttpPost]
public ActionResult Edit(int orderID)
{
List<Orders> employeeList = new List<Orders>();
employeeList.Add(new Orders { OrderId = 1, OrderName = "mahesh", CategoryID = 1 });
employeeList.Add(new Orders { OrderId = 2, OrderName = "rahul", CategoryID = 2 });
var result = employeeList.Where(x => x.OrderId == orderID);
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 Orders
{
public int OrderId { get; set; }
public string OrderName { get; set; }
public int CategoryID { get; set; }
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="../../dirPagination.js" type="text/javascript"></script>
<script>
var app = angular.module('invoice', ['angularUtils.directives.dirPagination', 'ngAnimate', 'ui.bootstrap']);
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('InvoiceController', ['$scope', '$http', '$window', 'RegistrationService', function ($scope, $http, $window, RegistrationService) {
$scope.invoice = false;
//category
GetCategory();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/Home/GetCategories/',
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
GetProduct();
function GetProduct() {
$scope.products = [];
$http({
method: 'Get',
url: '/Home/GetProducts/',
}).success(function (data, status, headers, config) {
$scope.products = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.invoice = $scope.invoice ? false : true;
}
$scope.IsVisible = true;
GetAllEmployees();
//To Get All Records
function GetAllEmployees() {
var getData = RegistrationService.getEmployees();
getData.then(function (emp) {
$scope.employees = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
$scope.myData = [];
// Add functionality for Items
$scope.add = function () {
loadEmployees();
$scope.myData.push({
id: $scope.myData.length + 1,
Product: $scope.Product.ProductName,
ProductId: $scope.Product.ProductID,
Name: $scope.Name
});
};
//Edit code for Items and Orders
$scope.Edit = function (OrderId) {
$scope.invoice = true;
$.post("/Home/Edit/", { orderID: OrderId }, function (r) {
$scope.OrderId = r[0].OrderId;
$scope.OrderName = r[0].OrderName;
$scope.Category = r[0].CategoryID;
$scope.$apply();
});
}
}]);
app.service("RegistrationService", function ($http) {
//get All Employee
this.getEmployees = function () {
return $http.get("/Home/getAll");
};
});
</script>
</head>
<body>
<div class="container" ng-app="invoice" ng-controller="InvoiceController">
<div class="row">
<table class="table table-condensed">
<tr>
<td>
Order Name
</td>
<td>
<input type="text" id="orderName" class="form-control" name="name" ng-model="OrderName"
ng-class="submitted?'ng-dirty':''" required autofocus />
</td>
<td>
Category
</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category"
containercssclass="all" ng-options="c.CategoryID as c.CategoryName for c in categories"
ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
</tr>
</table>
</div>
<div class="s2vk-container">
<div class="row">
<table class="table table-condensed">
<thead>
<tr>
<th>
SNo
</th>
<th>
Product
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody style="padding-left: 20px; padding-right: 20px;" ng-model="myData1" ng-repeat="invoice in myData track by $index">
<tr>
<td>
{{invoice.id}}
</td>
<td>
{{invoice.Product}}
</td>
<td>
{{invoice.Name}}
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;" ng-show="mahesh">
<td ng-model="Id">
{{$index+1}}
</td>
<td>
<input type="text" ng-model="Name" class="input-sm form-control" />
</td>
<td>
<select select2="" ng-model="Product" name="ProductName" class="input-sm form-control"
ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
<td>
<button type="button" ng-show="mahesh" class="btn btn-success btn-sm" ng-click="add()">
</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="table-responsive ">
<table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped">
<tr>
<th>
Order Id
</th>
<th>
<b>Order Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='OrderName'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"
re></span>
</th>
<th>
<b>Category</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Category'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th>
<b>Actions</b> <span class="glyphicon sort-icon"></span>
</th>
</tr>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
ng-model="search">
<td>
{{employee.OrderId}}
</td>
<td>
{{employee.OrderName}}
</td>
<td>
{{employee.CategoryID}}
</td>
<td>
<button type="button" class="btn btn-info btn-sm" ng-click="Edit(employee.OrderId)"
readonly>
Edit
</button>
</td>
</tr>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
</div>
</body>
</html>
Screenshot
