In my asp.net MVC web application, I'm trying to create a Purchase Order view.
So in this section, I added the table headers that I want to show as the main headers of the form.
<table class="proposedWork" width="100%" style="margin-top:20px">
<thead>
<th class="docAdd">
<button type="button" id="addAnotherItm" class="btn btn-info" href="#">+</button>
</th>
<th>ITEM</th>
<th>QTY</th>
<th>MEASURE BY</th>
<th>UNIT PRICE</th>
<th class="amountColumn">TOTAL</th>
</thead>
and then in the body section, I created
<tbody>
<tr>
<td>
<ul id="PoItmList" style="list-style-type: none">
@if (Model != null && Model.PurchaseOrderItemsViewModelList != null)
{
foreach (EvoPOS.WebUI.Models.PurchaseOrderItemsViewModel list in Model.PurchaseOrderItemsViewModelList)
{
Html.RenderPartial("_ItemList", list);
}
}
</ul>
</td>
</tr>
</tbody>
this is the javascript that when the + button is pressed, loads the partial view.
$(function () {
$("#addAnotherItm").click(function () {
$.get(rootDir + 'PurchaseOrders/AddPoItems', function (template) {
$("#PoItmList").append(template);
});
});
});
This is my partial view code,
<tr>
<td contenteditable="true"> @Html.DropDownList("Item_ID", null, "Select Items", new { @id = "ddlReqTypes" + Model.TempID, @class = "js-dropdown", @data_map = Model.TempID })</td>
<td class="unit" contenteditable="true">
<input type="text" />
</td>
<td contenteditable="true" class="description">
<input type="text" />
</td>
<td class="amount" contenteditable="true">
<input type="text" />
</td>
<td class="amount amountColumn rowTotal" contenteditable="true">
<input type="text" />
</td>
</tr>
<button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Delete</button>
My issue is when button + is pressed, it should load the dropdown and other inputs with the order of table headers.
Can I get help with this?