Hi,
Create a Model which holds the scope variable for both the table and pass the model as parameter.
Then pass the value from view to controller and retrive all the value in controller and insert the record in database.
Using the below article i have created an example.
I have added another table and maped with the entity datamodel.
SQL
CREATE TABLE [dbo].[CustomersDetail]
(
[Id] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
[CustomerId] [int] NOT NULL,
[Age] [int] NULL
)
Model
public class Details
{
public int CustomerId { get; set; }
public string Name { get; set; }
public string Country { get; set; }
public int Age { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetCustomers()
{
CustomersEntities entities = new CustomersEntities();
return Json(entities.Customers);
}
[HttpPost]
public JsonResult InsertCustomer(Details details)
{
using (CustomersEntities entities = new CustomersEntities())
{
Customer customer = new Customer();
customer.Name = details.Name;
customer.Country = details.Country;
entities.Customers.Add(customer);
entities.SaveChanges();
}
using (CustomersEntities entities = new CustomersEntities())
{
CustomersDetail customersDetail = new CustomersDetail();
customersDetail.CustomerId = new CustomersEntities().Customers.Max(x => x.CustomerId);
customersDetail.Age = details.Age;
entities.CustomersDetails.Add(customersDetail);
entities.SaveChanges();
}
return Json(new CustomersEntities().Customers);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
<tr>
<th style="width:100px">Customer Id</th>
<th style="width:150px">Name</th>
<th style="width:150px">Country</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td><span>{{m.CustomerId}}</span></td>
<td>
<span ng-hide="m.EditMode">{{m.Name}}</span>
<input type="text" ng-model="m.Name" ng-show="m.EditMode" />
</td>
<td>
<span ng-hide="m.EditMode">{{m.Country}}</span>
<input type="text" ng-model="m.Country" ng-show="m.EditMode" />
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 150px">
Name<br />
<input type="text" ng-model="Name" style="width:140px" />
</td>
<td style="width: 150px">
Country<br />
<input type="text" ng-model="Country" style="width:140px" />
</td>
<td style="width: 150px">
Age<br />
<input type="text" ng-model="Age" style="width:140px" />
</td>
<td style="width: 200px">
<br />
<input type="button" value="Add" ng-click="Add()" />
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
//Getting records from database.
var post = $http({
method: "POST",
url: "/Home/GetCustomers",
dataType: 'json',
headers: { "Content-Type": "application/json" }
});
post.success(function (data, status) {
//The received response is saved in Customers array.
$scope.Customers = data;
});
//Adding new record to database.
$scope.Add = function () {
if (typeof ($scope.Name) == "undefined" || typeof ($scope.Country) == "undefined") {
return;
}
var post = $http({
method: "POST",
url: "/Home/InsertCustomer",
data: "{name: '" + $scope.Name + "', country: '" + $scope.Country + "', age: " + $scope.Age + "}",
dataType: 'json',
headers: { "Content-Type": "application/json" }
});
post.success(function (data, status) {
//The newly inserted record is inserted into the Customers array.
$scope.Customers.push(data)
});
$scope.Name = "";
$scope.Country = "";
$scope.Age= "";
};
});
</script>
</body>
</html>
