I Have Made Purchas Order Form in my project and I coded to generate rows dynamically , But After Added the required rows the saved from view to controller dose not working .
this is my View Code:
<pre>@model PioneerSystems.Models.PO.CreatePoModel
@{
ViewData["Title"] = "Create New Order";
Layout = "~/Views/Shared/_Project_Layout.cshtml";
}
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="~/css/style.css">
<!--
<div class="container" >
<div style="align-items:self-end">
<input type="button" onclick="enabled()" value=" New Purchace Order" style="margin:10px 10px;" id="newOrder" class="btn btn-info" />
</div>
@**@
<!--
@**@
@**@ <div class="row bg-secondary m-1 block">
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderNO" class="control-label"></label>
<input asp-for="OrderNO" id="poNO" class="form-control" />
<span asp-validation-for="OrderNO" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderDate" class="control-label"></label>
<input asp-for="OrderDate" id="poDate" class="form-control" />
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderStatus" class="control-label"></label>
<input asp-for="OrderStatus" id="status" class="form-control" />
<span asp-validation-for="OrderStatus" class="text-danger"></span>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" id="project" class ="form-control" asp-items="ViewBag.ProjectId"></select>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="SupplierId" class="control-label"></label>
<select asp-for="SupplierId" id="supplier" class ="form-control" asp-items="ViewBag.SupplierId"></select>
</div></div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" id="subject" placeholder="Enter Order Description ...." class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<!--
<!--
<div class="row bg-primary m-1 block">
<div class="col-md-5 col-sm-12">
<div class="form-group">
<label asp-for="ItemId" class="control-label"></label>
<select asp-for="ItemId" id="item" asp-placeholder="Select Item ...." class ="form-control" asp-items="ViewBag.ItemId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="UnitId" class="control-label"></label>
<select asp-for="UnitId" id="unit" class ="form-control" asp-items="ViewBag.UnitId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Qty" class="control-label"></label>
<input asp-for="Qty" id="qty" class="form-control" onkeyup="getTotal()" onchange="getTotal()"/>
<span asp-validation-for="Qty" class="text-danger"></span>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" id="price" class="form-control" onkeyup="getTotal()" onchange="getTotal()" />
<span asp-validation-for="Price" class="text-danger"></span>
</div> </div>
<div class="col-md-2 col-sm-12">
<div class="form-group">
<label asp-for="Total" class="control-label"></label>
<input asp-for="Total" id="total" class="form-control bg-danger text-center" disabled value="0" />
<span asp-validation-for="Total" class="text-danger"></span>
</div></div>
<div class="col-md-2 col-sm-12">
<label class="control-label">Add</label>
<button class="btn btn-success " onclick="addRow()" id="addRow">
</button>
</div>
</div>
<!--
<!--
<table class="table " style="width:100%;" id="tablPro">
<thead>
<tr>
<th>#</th>
<th style="width:30%;">Product/Service</th>
<th style="width:10%;">Unit</th>
<th style="width:10%;">Qty</th>
<th style="width:10%;">Price</th>
<th style="width:15%;">Total</th>
<th style="width:5%;"></th>
<th style="width:5%;"></th>
</tr>
</thead>
<tbody id="tablePro">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!--
<!--
@**@
<div class="totalcontainer">
<div class="col-md-3 col-sm-12">
<label asp-for="SubTotal" style="color:Black;" class="control-label"></label>
<input asp-for="SubTotal" id="subTotal" class="form-control" />
<span asp-validation-for="SubTotal" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="Vat" style="color:Black;" class="control-label"></label>
<input asp-for="Vat" id="vat" class="form-control" />
<span asp-validation-for="Vat" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="GrandTotal" style="color:Black;" class="control-label"></label>
<input asp-for="GrandTotal" id="grandTotal" class="form-control" />
<span asp-validation-for="GrandTotal" class="text-danger"></span>
</div>
<div class="text-center">
<input id="saveOrder" type="button" value="Save Purchace Order" style="margin:10px 10px;" class="btn btn-primary" />
</div>
</div>
<!--
<hr />
<!--
<div class="row block">
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="CreatedBy" style="color:Black;" class="control-label"></label>
<input asp-for="CreatedBy" id="createdBy" class="form-control" />
<span asp-validation-for="CreatedBy" class="text-danger"></span>
</div> </div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="TimeStamp" style="color:Black;" class="control-label"></label>
<input asp-for="TimeStamp" id="createdTime" class="form-control" />
<span asp-validation-for="TimeStamp" class="text-danger"></span>
</div> </div>
</div>
<!--
@**@
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/js/addRow.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="~/lib/font-awesome/js/all.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/js/json2/json2.js"></script>
<script type="text/javascript">
$("#saveOrder").click(function (e) {
e.preventDefault();
var orderArr = [];
orderArr.length = 0;
$('#tablePro tr').each(function (row, tr) {
orderArr.push({
item: $(tr).find('td:eq(0)').text(),
unit: $(tr).find('td:eq(2)').text(),
qty: $(tr).find('td:eq(3)').text(),
price: $(tr).find('td:eq(4)').text(),
total: $(tr).find('td:eq(5)').text()
});
});
//var model=$("#Myform").serialize();
var model = {
orderArr: orderArr
};
debugger;
$.ajax({
url:"/CreatePos/SaveOrder",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: MODEL,
dataType:'json',
success: function (data) {
alert('Document Saved.');
}
});
});
$.when(saveOrder(data)).then(function (response) {
console.log(response);
}).fail(function (err) {
console.log(err);
});
});
</script>
}
this is my controller:
public ActionResult SaveOrder(int project, int supplier, int orderNO, CreatePoModel[] createPoModel)
{
string result = "Error! Order Is Not Complete!";
{
var OrderId = Guid.NewGuid();
CreatePoModel model = new CreatePoModel();
model.OrderNO = orderNO;
model.ProjectId = project;
model.SupplierId = supplier;
model.OrderDate = DateTime.Now;
_context.CreatePoModels.Add(model);
foreach (var item in createPoModel)
{
OrderDetail O = new OrderDetail();
O.PODetailsId = item.PODetailsId;
O.ItemId = item.ItemId;
O.UnitId = item.UnitId;
O.Qty = item.Qty;
O.Price = item.Price;
O.Total = item.Total;
O.OrderId = item.OrderId;
_context.OrderDetails.Add(O);
}
_context.SaveChanges();
result = "Success! Order Is Complete!";
}
return Json(result);
}
What I have tried:
Reading many documents, Watching Videos but due I am still learning I could not find my mistake.