I am developing a webpage to display BOM details. So, I have added EditorFor field in View with Add button. Once I enter the data in Field and click Add, It will display the data to a table. Likewise, I will enter number of data in EditorFor field and It displays all the data in the Table as I expected.
But the thing is, I need all the data which I was entered in the EditorFor field should moves to the controller need to carry all the data in a List.
View:
@model Admin.Models.BOMFields
@{
ViewBag.Title = "BOM_Add_Data";
}
@using (Html.BeginForm("Product_details", "BOM", FormMethod.Post))
{
<table class="table" style="border-top:none;">
<tr style="width: 250px;">
<td>
@Html.LabelFor(model => model.Part_No)
@Html.EditorFor(model => model.Part_No, new { htmlAttributes = new { @class = "form-control", @id = "part_no" } })
</td>
<td>
@Html.LabelFor(model => model.Description)
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", @id = "description" } })
</td>
<td>
@Html.LabelFor(model => model.Quantity)
@Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control", @id = "quantity" } })
</td>
<td>
<button class="btn btn-default" id="add_btn" type="button" onclick="addField(this);" style="margin-top:25%;">Add</button>
</td>
</tr>
</table>
<table class="table" id="tbl" style="border:none;margin-top:2%;">
<tr>
<th>
@Html.DisplayNameFor(model => model.Part_No)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.Quantity)
</th>
</tr>
</table>
<div>
<div class="col-md-offset-8 col-md-10" style="margin-top:2%;">
<input type="submit" value="Submit" class="btn btn-default" />
<input type="reset" value="Cancel" class="btn btn-default" />
</div>
</div>
}
<script>
function addField(argument) {
var myTable = document.getElementById("tbl");
var currentIndex = myTable.rows.length;
var currentRow = myTable.insertRow(-1);
var Part_No_Box = document.createElement("td");
Part_No_Box.setAttribute("name", "Part_No" + currentIndex);
var Descp_Box = document.createElement("td");
Descp_Box.setAttribute("name", "Description" + currentIndex);
var Quan_Box = document.createElement("td");
Quan_Box.setAttribute("name", "Quantity" + currentIndex);
var currentCell = currentRow.insertCell(-1);
currentCell.appendChild(Part_No_Box);
currentCell.innerHTML = document.getElementById("part_no").value;
currentCell.style.border = "1px solid black";
currentCell = currentRow.insertCell(-1);
currentCell.appendChild(Descp_Box);
currentCell.innerHTML = document.getElementById("description").value;
currentCell.style.border = "1px solid black";
currentCell = currentRow.insertCell(-1);
currentCell.appendChild(Quan_Box);
currentCell.innerHTML = document.getElementById("quantity").value;
currentCell.style.border = "1px solid black";
}
</script>Model:
public class BOMFields
{
[DisplayName("Part-No")]
[Required]
public string Part_No { get; set; }
[DisplayName("Description")]
[Required]
public string Description { get; set; }
[DisplayName("Quantity")]
[Required]
public string Quantity { get; set; }
public string Part_No_List { get; set; }
public string Description_List { get; set; }
public string Quantity_List { get; set; }
}BOM Insert:
public class BOM_Insert
{
public List<BOMFields> Table(string cPart_No, string cDescription, string cQuantity)
{
List<BOMFields> ItemQm = new List<BOMFields>();
ItemQm.Add(new BOMFields {Part_No_List = cPart_No,Description_List = cDescription,Quantity_List = cQuantity});
return (ItemQm);
}
}Controller:
public class BOMController : Controller
{
// GET: BOM
public ActionResult BOM_Add_Data()
{
return View();
}
[HttpPost]
public ActionResult Product_details(BOMFields new_data)
{
BOM_Insert dblogin = new BOM_Insert();
var Part_Nos = dblogin.Table(new_data.Part_No, new_data.Description, new_data.Quantity);
BOM_Add_Data();
return View("BOM_Add_Data");
}
}Once I'll add all my data to table It will display like this click here to see the View image
After click submit, the page redirects to controller to send the data from EditorFor to Product_details(). But I'll get only the last data which I was entered in EditorForclick here to see the Data viewed in the list.
How can I get all the the data which I was entered in EditorFor from view and store as a single list in controller. Because, I need to share all the data to the Database once I click the submit button.