I have 3 tables table
1)category table
2)product table
3)itemtable
based upon category values it should display product i want to save productName id to itemtable
finally after clicking of save function it can be saved to itemtable
For me in item table productId value showing zero
category
CategoryID CategoryName
1 shhs
2 euueu
Product
ProductID CategoryID ProductName
1 1 dhhdhd
2 1 dhdhdhd
3 2 333
itemtable
Expetected ouput
Id Name ProductID
1 mahesh 1
2 dddj 2
getting output
Id Name ProductID
1 mahesh 0
2 dddj 0
@{
Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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://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://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Customers = [];
GetCategory();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/autocomplete/GetCategories/',
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetProducts = function () {
var countryId = $scope.Category.CategoryID;
var data = { "CategoryID": countryId };
var config = {
params: data,
headers: { 'Accept': 'application/json' }
};
if (countryId) {
$http.get("/autocomplete/GetProducts/'", config)
.then(function (data, status, headers, config) {
$scope.products = data.data;
}, function (response) {
alert(response.responseText);
});
}
else {
$scope.products = null;
}
}
$scope.Add = function () {
var customer = {};
$scope.Customers.push({
Name: $scope.Name,
Product: $scope.Product.ProductName,
Category: $scope.Category.CategortName,
});
$scope.Name = "";
$scope.Category = "";
$scope.Product = "";
};
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Category;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.Save = function () {
var User = {};
User["customers"] = $scope.Customers;
debugger;
alert(JSON.stringify(User));
$http({
method: "Post",
url: "/autocomplete/SaveOrder",
data: User
}).success(function (data) {
alert(data);
}).error(function (err) {
$scope.Message = err.Message;
})
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>
Category
</th>
<th>
Product
</th>
<th>
Action
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Name}}</td>
<td>
{{m.Category}}
</td>
<td>
{{m.Product}}
</td>
<td>
<input type="button" class="btn btn-danger" ng-click="Remove($index)" value="Remove" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" ng-model="Name" class="input-sm form-control" />
</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td>
<select select2="" ng-model="Product" ng-disabled="!products"
class="input-sm form-control" ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
<td>
<input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
</td>
</tr>
</tfoot>
</table>
<div style="padding:10px 0;">
<input id="submit" type="button" value="Save" name="add" ng-click="Save()" ng-disabled="userForm.$invalid" class="btn btn-success" style="padding:10px 20px" reruired=reruired autofocus=autofocus />
</div>
</div>
</body>
</html>
using Readanddisplayexcelfile.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Readanddisplayexcelfile.Controllers
{
public class AutoCompleteController : Controller
{
private InvoiceEntities db = new InvoiceEntities();
// GET: AutoComplete
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult GetCategories()
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Categories.Select(model => new { model.CategoryID, model.CategortName }).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult GetProducts(int? CategoryID)
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Products.Where(model => model.ProductID == CategoryID).Select(model => new { model.ProductID, model.ProductName }).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult SaveOrder(Itemtable[] item1)
{
string result = "Error! Order Is Not Complete!";
if (item1 != null )
{
foreach (var item in item1)
{
//var orderId = Guid.NewGuid();
Itemtable O = new Itemtable();
//O.RAI_Id = orderId;
O.Name = item.Name;
O.ProductID = item.ProductID;
//O.subitem1 = item.subitem1;
db.Itemtables.Add(O);
}
db.SaveChanges();
result = "Success! Order Is Complete!";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
