Hi nabilabolo,
You have to use jQuery Ajax to send the form data with table row to controller.
Create another class that will hold all the record.
Refer below code.
Model
ItemModel
public class ItemModel
{
//// FOR MATERIALLIST TABLE/////
public string Material { get; set; }
public Nullable<int> Mat_Quantity { get; set; }
public int ID { get; set; }
//// FOR REQUSTER TABLE/////
public string Requester_id { get; set; }
public string req_name { get; set; }
public string address { get; set; }
public string phone { get; set; }
public string remark { get; set; }
//// FOR MATERIAL_LIST TABLE////
public int item_id { get; set; }
public string req_material { get; set; }
public Nullable<int> req_quantity { get; set; }
}
MaterialDetail
public class MaterialDetail
{
public string req_name { get; set; }
public string address { get; set; }
public string phone { get; set; }
public string remark { get; set; }
public List<Material> MaterialDetails { get; set; }
}
public class Material
{
public string MaterialName { get; set; }
public int Quantity { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ViewBag.material = GetMaterial();
return View(new ItemModel());
}
[HttpPost]
public ActionResult AddDetail(MaterialDetail Imodel)
{
// Code for saving
for (int i = 0; i < Imodel.MaterialDetails.Count; i++)
{
int req_quantity = Imodel.MaterialDetails[i].Quantity;
string req_material = Imodel.MaterialDetails[i].MaterialName;
}
return null;
}
private static List<Materials> GetMaterial()
{
List<Materials> materials = new List<Materials>();
materials.Add(new Materials { ID = 1, Material = "2B Pencils", Mat_Quantity = 15 });
materials.Add(new Materials { ID = 2, Material = "A4 Size Paper (White paper)", Mat_Quantity = 13 });
return materials;
}
public class Materials
{
public int ID { get; set; }
public string Material { get; set; }
public int Mat_Quantity { get; set; }
}
}
View
@model _622442_Form_TableRow_AngularJS_MVC.Models.ItemModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<script type="text/javascript">
$(function () {
$('#btnSave').on('click', function () {
var material = {};
material.req_name = $('#req_name').val();
material.address = $('#address').val();
material.phone = $('#phone').val();
material.remark = $('#remark').val();
var materials = new Array();
$("#tblMaterials TBODY TR:has(td)").each(function () {
var row = $(this);
var material = {};
material.MaterialName = row.find("TD").eq(0).html().trim();
material.Quantity = row.find("TD").eq(1).html().trim();
materials.push(material);
});
material.MaterialDetails = materials;
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Home/AddDetail",
data: JSON.stringify(material),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
}
});
});
});
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $filter, $document) {
$scope.Materials = [];
$scope.materialValue = "0";
$scope.quantity = "0";
$scope.Add = function () {
var material = {};
if ($scope.material != "Select" && $scope.material != "") {
material.Material = $scope.material;
material.Quantity = $scope.quantity != undefined ? $scope.quantity : 0;
var materialExist = $filter('filter')($scope.Materials, { Material: $scope.material }, true);
if (materialExist.length > 0) {
for (var i = 0; i < $scope.Materials.length; i++) {
if ($scope.Materials[i].Material == $scope.material) {
if ($scope.quantity != undefined) {
$scope.Materials[i].Quantity = parseInt($scope.Materials[i].Quantity) + parseInt($scope.quantity);
}
break;
}
}
} else {
$scope.Materials.push(material);
}
}
};
$scope.material = '';
$scope.setMaterialName = function () {
var ddl = angular.element(document.getElementById('ddlMaterial'));
$scope.material = ddl[0].options[ddl[0].options.selectedIndex].text;
var qty = ddl[0].value;
var ddlddlQuantities = angular.element(document.getElementById('ddlQuantity'));
ddlddlQuantities.empty();
for (var i = 1; i <= qty; i++) {
var option = document.createElement("OPTION");
option.innerHTML = i;
option.value = i;
ddlddlQuantities[0].options.add(option);
}
};
});
</script>
</head>
<body>
<div>
@*@using (Html.BeginForm("AddDetail", "Home", FormMethod.Post))
{*@
<div class="row mt-1 mb-4">
<div class="col-lg-12">
<div class="card shadow pt-0 pb-0">
<div class="modal-body pb-0 pt-0" style="max-height: 400px">
<label for="name" class="mr-sm-2">Name:</label>
<span>@Html.EditorFor(model => model.req_name, new { htmlAttributes = new { @class = "form-control mr-sm-2", style = "width:800px" } })</span>
<br />
<label for="email" class="mr-sm-2">Address:</label>
<span>@Html.EditorFor(model => model.address, new { htmlAttributes = new { @class = "form-control mr-sm-2", style = "width:800px" } })</span>
<br />
<label for="phone" class="mr-sm-2"> Phone no :</label>
<span>@Html.EditorFor(model => model.phone, new { htmlAttributes = new { @class = "form-control mr-sm-2", style = "width:800px" } })</span>
<br />
</div>
</div>
</div>
</div>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table">
<tr>
<td>Material</td>
<td>
<select id="ddlMaterial" ng-model="materialValue" ng-change="setMaterialName()">
<option value="0">Select</option>
@foreach (var item in ViewBag.material)
{
<option value='@item.Mat_Quantity'>
@item.Material
</option>
}
</select>
</td>
<td>Quantity</td>
<td>
<select id="ddlQuantity" ng-model="quantity">
<option value="0">Select</option>
@{
for (int i = 1; i <= 100; i++)
{
<option value="@i">
@i
</option>
}
}
</select>
</td>
<td><input type="button" value="Add Material" ng-click="Add()" /></td>
</tr>
</table>
<br />
<table id="tblMaterials" class="table">
<tr>
<th>Material</th>
<th>Quantity</th>
</tr>
<tbody ng-repeat="m in Materials">
<tr>
<td>{{m.Material}}</td>
<td>{{m.Quantity}}</td>
</tr>
</tbody>
</table>
</div>
<br />
<label for="name" class="mr-sm-2">Remark:</label>
<span>@Html.EditorFor(model => model.remark, new { htmlAttributes = new { @class = "form-control mr-sm-2", style = "width:300px" } })</span>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input id="btnSave" type="submit" name="send" value="Save" class="btn btn-primary" />
</div>
</div>
@*}*@
</div>
</body>
</html>
Screenshot
Values in Controller
