Hi,
I have a dropdown and after i clicked "ADD" button, it will be added into the table using javascript. And i clicked "SAVE" button to save all the item that has been added into database. Before this, the process is successfully worked, but it suddently didn't work and show error saying it is null. It saved into database but it display error after redirect to the next page.
https://pasteboard.co/Jvg7twW.png
https://pasteboard.co/Jvg7BkN.png
so here is my code
View
<div class="modal-body pb-0 pt-0">
<div class="form-inline">
<label for="Material" class="mr-sm-2">Material:</label>
<select id="ddlMaterial">
<option value="0">Select</option>
@foreach (var item in ViewBag.material)
{
<option value='@item.ID'>@item.Material</option>
}
</select>
@Html.HiddenFor(m => m.req_material)
<label for="st" class="mr-sm-2">Quantity:</label>
<select id="ddlQuantity">
<option value="0">Select</option>
@{
for (int i = 1; i <= 100; i++)
{
<option value="@i">@i</option>
}
}
</select>
@Html.HiddenFor(m => m.req_quantity)
<div class="form-group">
<div class="col-md-offset-2 col-md-auto">
<input type="button" value="Add Material" class="btn btn-primary btn-sm" id="btnAddRow"/>
</div>
</div>
</div>
<br/>
<div class="table" id="table_id">
<table id="tblMaterials" class="table table-striped table-bordered" style="width:50%">
<thead>
<tr>
<th class="text-center">Material</th>
<th class="text-center">Quantity</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<input type="submit" id="btnSave" value="Save" class="btn btn-success" />
Javascript
<script>
$(function () {
$("#btnAddRow").click(function () {
//Getting value from to populate
var material = document.getElementById("ddlMaterial");
var quantity = document.getElementById("ddlQuantity");
var material2 = material.options[material.selectedIndex].text;
var quantity2 = quantity.options[quantity.selectedIndex].value;
//Prepare TR to add in Table
var tr;
tr = $('<tr/>');
tr.append("<td class='text-center'>" + material2 + "</td>");
tr.append("<td class='text-center'>" + quantity2 + "</td>");
tr.append("<td class='text-center'><input type='button' name='btnDelete' value='Remove' class='deleteMaterial btn btn-danger' /></td>");
$('#tblMaterials').append(tr);
});
$(document).on("click", ".deleteMaterial", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
});
$(function () {
$('#btnSave').on('click', function () {
var material = {};
material.req_name = $('#req_name').val();
material.badge_num = $('#badge_num').val();
material.line = $('#line').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",
url: '@Url.Action("AddDetail", "Home")',
data: JSON.stringify(material),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
}
});
});
});
</script>
Controller
[HttpPost]
public ActionResult AddDetail(MaterialDetail Imodel)
{
for (int i = 0; i < Imodel.MaterialDetails.Count; i++)
{
Material_Item item = new Material_Item();
item.Requester_id = id2;
item.req_quantity = Imodel.MaterialDetails[i].Quantity;
item.req_material = Imodel.MaterialDetails[i].MaterialName;
db.Material_Item.Add(item);
MaterialList list = db.MaterialLists.Where(y => y.Material == item.req_material).FirstOrDefault();
if (list != null)
{
list.Mat_Quantity = list.Mat_Quantity - item.req_quantity;
}
db.SaveChanges();
}
Model(MaterialDetail)
public class MaterialDetail
{
public string req_name { get; set; }
public string badge_num { get; set; }
public string line { get; set; }
public string remark { get; set; }
public List<Material> MaterialDetails { get; set; }
public string req_material { get; set; }
}
public class Material
{
public string MaterialName { get; set; }
public int Quantity { get; set; }
}
