I am trying to make an invoicing application. Now, where I make users add new rows to invoice, I am providing a dropdownlist where they can select a product and then using jquery getting all the other information like price, discount etc from database. This is working fine. Now keeping rest of the information as it is, I have to provide ADD button to add more rows of products and finally insert all of the info to db. I have been partially able to do it using jquery in multiple ways such as 'clone' or 'append' methods. It results in creating new rows perfectly. I change the IDs of the elements successfully too. Now, since the generated output is DOM and not actual HTML markup, I cannot get around to actually use the newly generated controls IDs or values to make further changes. Also how will I get the values of all the new rows and pass it to controller for insertion to database. I am really confused. I know it's lack of complete understanding of the concepts but if anyone can shed some light, it will be great. Thanks.
`
Jquery method I am using to append a partial view
function AddRows(e) {
$.ajax({
async: true,
type: 'GET',
dataType: 'html',
url: '/CreateInvoices/Creator',
data: { incr: e },
success: function (data) {
$("#datarow").append(data);
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
Handling 'products' change function
$('.Prods').change(function () {
$.get("/CreateInvoices/GetProductInfo",
{ ProductId: $("#prodid").val() },
function (data) {
$("#price").empty();
$.each(data, function (index, row) {
$("#price").val(row.PricePerUnit);
discid = row.DiscountId;
});
alert($('#price')[0].id);
$.get("/CreateInvoices/GetDiscountInfo",
{ DiscountId: discid },
function (data) {
$("#disc").empty();
$.each(data, function (index, row) {
$("#disc").val(row.DiscountNo);
});
});
});
});
});
Calling partial view
<table id="datarow">
@Html.Partial("_Inv")
</table>
My partial view
<tr>
<td>
@Html.DropDownList("ProductId", null, "-- Select Product --", htmlAttributes: new { @id = "prodid" + @ViewBag.y, @class = "Prods" })
</td>
<td>@Html.TextBox("Price", "", htmlAttributes: new { @id = "price" + @ViewBag.y, @class = "my-form-control" })</td>
<td>@Html.TextBox("Qty", "", htmlAttributes: new { @id = "qty" + @ViewBag.y, @class = "my-form-control" })</td>
<td>@Html.TextBox("Discount", "", htmlAttributes: new { @id = "disc" + @ViewBag.y, @class = "my-form-control" })</td>
<td><input type="text" class="my-form-control" /></td>
<td>
<input id="btnAdd" type="button" onclick="AddRows(@ViewBag.y)" value="+" />
@if (ViewBag.y is null || ViewBag.y <= 0)
{
//
}
else
{
<input id="btnRem1" type="button" value="-" onclick="RemoveTextBox(this)" />
}
</td>
</tr>`
