'Can't save data from Html Asp.net Core to Mysql Using
I am learning frontend and I face this problem to save data from Html to Mysql in Asp.Net Core: I have Order Model OrderDetails Model and I made ViewModel Html table coded to add Rows dinamicly And i get project , supplier and Item by viewdata as select items
All above it was done But can not save the record!!
<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">
<!-- container -->
<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-info m-1 block">
<div class="text-center col-md-8">
<h1> Purchace Order <span id="countpro"></span></h1>
</div>
</div>*@
<!-- Order Section -->
@*<form asp-action="Create">*@
<div asp-validation-summary="ModelOnly" class="text-danger"></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="Status" class="control-label"></label>
<input asp-for="Status" id="status" class="form-control" />
<span asp-validation-for="Status" 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="Subject" class="control-label"></label>
<input asp-for="Subject" id="subject" placeholder="Enter Order Description ...." class="form-control" />
<span asp-validation-for="Subject" class="text-danger"></span>
</div>
</div>
<!-- End Order Section -->
<!-- Item Section -->
<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="addButton">
<i class="fas fa-plus"></i></button>
</div>
</div>
<!-- End Item Section -->
<!-- Table -->
<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>
<!-- End Table -->
<!-- Total Section -->
@* <div class="row bg-teal m-1 block" id="divPrint">*@
<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 type="submit" value=" + Save Purchace Order" id="saveBtn" style="margin:10px 10px;" class="btn btn-primary" />
</div>
</div>
<!-- End Total Section -->
<hr />
<!-- End Createor Section -->
<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" 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" class="form-control" />
<span asp-validation-for="TimeStamp" class="text-danger"></span>
</div> </div>
</div>
<!-- End Createor Section -->
@* </form>*@
</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>
// $('#saveBtn').click(function() {
// var data = $('input').serialize();
// $.post(url, data, function(data) {
// console.log(data);
// });
//});
$(function () {
$("#saveBtn").click(function () {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "CreatePos/Create",
data: "{'poNo':'" + $("#poNO").val() +
"', 'poDate':'" + $("#poDate").val() +
"', 'status':'" + $("#status").val() +
"', 'project':'" + $("#project").val() +
"', 'supplier':'" + $("#supplier").val() +
"', 'Subject':'" + $("#Subject").val() +
"', 'item':'" + $("#item").val() +
"', 'unit':'" + $("#unit").val() +
"', 'qty':'" + $("#qty").val() +
"', 'total':'" + $("#total").val() +
"', 'subTotal':'" + $("#subTotal").val() +
"', 'vat':'" + $("#vat").val() +
"', 'grandTotal':'" + $("#grandTotal").val() + "'}",
async: false,
success: function (response) {
$("#poNO").val("");
$("#poDate").val("");
$("#status").val("");
$("#project").val("");
$("#supplier").val("");
$("#Subject").val("");
$("#item").val("");
$("#unit").val("");
$("#qty").val("");
$("#total").val("");
$("#subTotal").val("");
$("#vat").val("");
$("#grandTotal").val()
alert("record has been saved in database");
},
error: function () {
console.log("there is some error");
}
});
});
});
</script>
}
And her is the Script File
var value = document.getElementById('item');
var getItem = value.options[value.selectedIndex].text;
var unitValue = document.getElementById('unit');
var getUnit = unitValue.options[unitValue.selectedIndex].text;
var qty = document.getElementById('qty').value;
var price = document.getElementById('price').value;
var total = document.getElementById('total').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length);
var x = newRow.rowIndex - 1;
var editBtn =`<button class="btn btn-info" id="editRow">
<i class="fas fa-edit"></i>
</button>` ;
var deleteBtn =`<button class="btn btn-danger" onclick="deleteRow(this)">
<i class="fas fa-trash"></i>
</button>` ;
//defination of row cells
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
var cell7 = newRow.insertCell(6);
var cell8 = newRow.insertCell(7);
// Push row Values into tabel Body
cell1.innerHTML = x++;
cell2.innerHTML = getItem;
cell3.innerHTML = getUnit;
cell4.innerHTML = qty;
cell5.innerHTML = price;
cell6.innerHTML = total;
cell7.innerHTML = editBtn;
cell8.innerHTML = deleteBtn;
}
function getTotal() {
if (price.value != '') {
let result = price.value * qty.value;
total.value = result;
total.style.background = '#040';
let vatPercentage = 0.15;
let subtotal = document.getElementById('subTotal');
let vat = document.getElementById('vat');
let grandTotal = document.getElementById('grandTotal');
subtotal.value = total.value;
vat.value = subtotal.value * vatPercentage;
grandTotal.value = +vat.value + +subtotal.value;
}
else {
total.value = '';
total.style.background = '#a00d02';
}
}
Finally This is the controller
POST: CreatePos/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("OrderId,OrderNO,OrderDate,Subject,Status,CreatedBy,TimeStamp,ProjectId,SupplierId,ItemId,UnitId,Qty,Price,Total,SubTotal,Vat,GrandTotal")] CreatePoModel createPoModel)
{
if (ModelState.IsValid)
{
_context.Add(createPoModel);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
ViewData["ProjectId"] = new SelectList(_context.Projects, "ProjectId", "ProjectName", createPoModel.ProjectId);
ViewData["SupplierId"] = new SelectList(_context.Suppliers, "SupplierId", "SupplierName", createPoModel.SupplierId);
ViewData["ItemId"] = new SelectList(_context.PoItems, "ItemId", "ItemName", createPoModel.ItemId);
ViewData["UnitId"] = new SelectList(_context.Units, "UnitId", "UnitCode", createPoModel.UnitId);
return View(createPoModel);
}
Please Consider that I am beginner still learning: (
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|