Develop Reference

How to do calculation where a value has to be entered in a row for each row of table using Razor Pages and JavaScript?

I have a table for product data and the user can enter the amount of a product to buy in each row.
I would like to compute the total price per product in each row and then the total price of the whole purchase below the table.
This is my table:
<table id="productTable">
<thead>
<tr>
<th>Amount</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Price)
</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Products)
{
<tr>
<td>
<input type="number" id="quantityInput" onchange="calcSubTotal()" min="0" value="0" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td id="priceLabel">
#Html.DisplayFor(modelItem => item.Price)
</td>
<td id="labelSubTotal"></td>
</tr>
}
</tbody>
The items are coming from the model (IList). I want to multiply the entered value of the input (type number) and the price of the corressponding row using JavaScript.
In JavaScript I am using getElementById to access the UI-Elements. How I can access the row of the table where the focus of the HTML-Input is?
My JavaScript:
<script type="text/javascript">
function calcSubTotal() {
var numberInput = document.getElementById('quantityInput');
var val = numberInput.value;
var amount = parseFloat(val);
var priceLabel = document.getElementById('priceLabel');
var priceValue = priceLabel.innerText;
var price = parseFloat(priceValue);
var totalPrice = amount * price;
var subTotalLabel = document.getElementById('labelSubTotal');
subTotalLabel.innerText = totalPrice.toString();
}
</script>

It may work if only have one record.But you have several raws of record.Each id of Price and Total are the same.You need to distinguish the id like below:
<table id="productTable">
//..
<tbody>
#{
int i = 0; //add this..
}
#foreach (var item in Model.Products)
{
<tr>
<td>
//change the onchange function...
<input type="number" id="quantityInput" onchange="calcSubTotal(this,#i)" min="0" value="0" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td id="priceLabel_#i"> //change here...
#Html.DisplayFor(modelItem => item.Price)
</td>
<td id="labelSubTotal_#i"></td> //change here...
</tr>
i++; //add this....
}
</tbody>
</table>
#section Scripts
{
<script type="text/javascript">
function calcSubTotal(element,index) {
var numberInput = $(element).val();
var amount = parseFloat(numberInput);
var priceLabel = document.getElementById('priceLabel_'+index);
var priceValue = priceLabel.innerText;
var price = parseFloat(priceValue);
var totalPrice = amount * price;
var subTotalLabel = document.getElementById('labelSubTotal_'+index);
subTotalLabel.innerText = totalPrice.toString();
}
</script>
}
Result:

Show/Hide divs in JQuery for items in a ForLoop

I am attempting to change my DisplayFor to an EditorFor when the checkbox is clicked, I'm not sure if theres a better way that I could've done this change but if you have any suggestions I'm open to them. But anyways, with the way I did it, it is only doing the JQuery for the first part in my ForLoop and I am not sure how to make it to apply to all the parts in the list. As right now it is displaying both the displayFor and the editorFor.
I have rows that are generated like this
#for (int i = 0; i < item.IHP.Count; i++)
{
Part part = db.Parts.Find(Model.Parts[i].ID);
#Html.HiddenFor(x => x.Parts[i].ID)
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
#Html.DisplayFor(x => x.Parts[i].PartName)
#Html.HiddenFor(x => x.Parts[i].PartName)
</td>
<td style="font-weight:bold">
#Html.DisplayFor(x => x.Parts[i].QtyInItem)
#Html.HiddenFor(x => x.Parts[i].QtyInItem)
</td>
<td>
<input type="checkbox" id="all#(part.ID)" class="part-class" data-partId="#(part.ID)" checked>
</td>
<td>
<div class="AllTxt">
#Html.DisplayFor(x => x.Parts[i].QtyInItem)
</div>
<div class="editQty">
#Html.EditorFor(x => x.Parts[i].Qty)
</div>
</td>
#foreach (var actionType in partActionTypes)
{
<td>
#Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType, new { name = "partRadio" })
</td>
}
</tr>
My Jquery code looks like this
<script>
$(document).ready(function () {
//iterate through checkboxs
$(" input[type='checkbox']").each(function () {
//if checkbox is checked
if ($(this).is(':checked')) {
//show alltext div
$(this).closest('.tr_clone').find(".AllTxt").show();
//hide other div
$(this).closest('.tr_clone').find(".editQty").hide();
} else {
$(this).closest('.tr_clone').find(".editQty").show();
$(this).closest('.tr_clone').find(".AllTxt").hide();
}
});
});
$(document).ready(function () {
$('.tr_clone input.part-class').change(function () {
let Id = $(this).attr('id');
let partId = $(this).attr('data-partId');
//getting closest tr
var selector = $(this).closest('.tr_clone');
if ($(this).prop("checked") == true){
// remove cloned row
$('#' + Id + 'clone').remove();
selector.find(".AllTxt").show();
selector.find(".editQty").hide();
}
else {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('td');
$tr.after($clone);
$($clone).find(".part-class").hide();
$clone.find('input[type="radio"]').attr("name", (i, n) => n + 'clone');
$clone.attr('id', (Id) + "clone");
selector.find(".AllTxt").hide();
selector.find(".editQty").show();
}
});
});
</script>
But it only does this for the the first part in the ForLoop. How can I make it so that it applies it to every part in the for loop?

You have given id to your div instead use class here and whenever any checkbox is checked use $(this).closest('.tr_clone') and using this we can hide or show div of required tr only .
Demo Code ( I have removed some code and added dummy data to it ) :
$(document).ready(function() {
//iterate through checkboxs
$(" input[type='checkbox']").each(function() {
//if checkox is checked
if ($(this).is(':checked')) {
//show alltext div
$(this).closest('.tr_clone').find(".AllTxt").hide();
//hide other div
$(this).closest('.tr_clone').find(".editQty").show();
} else {
$(this).closest('.tr_clone').find(".editQty").hide();
$(this).closest('.tr_clone').find(".AllTxt").show();
}
});
$('.tr_clone input.part-class').change(function() {
let Id = $(this).attr('id');
let partId = $(this).attr('data-partId');
//getting closest tr
var selector = $(this).closest('.tr_clone');
//if checkbox is checked
if ($(this).prop("checked") == true) {
///find divand show or hide
selector.find(".AllTxt").show();
selector.find(".editQty").hide();
} else {
selector.find(".AllTxt").hide();
selector.find(".editQty").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
PartName
</td>
<td style="font-weight:bold">
QtyInItem
</td>
<td>
<input type="checkbox" id="1" class="part-class" data-partId="1" checked>
</td>
<td>
<!---added class instead of id-->
<div class="AllTxt">
SomethingAll
</div>
<div class="editQty">
SomethingQty
</div>
</td>
</tr>
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
PartName
</td>
<td style="font-weight:bold">
QtyInItem
</td>
<td>
<input type="checkbox" id="2" class="part-class" data-partId="2">
</td>
<td>
<div class="AllTxt">
SomethingAll
</div>
<div class="editQty">
SomethingQty
</div>
</td>
</tr>
</table>

how to get a value from textbox and pass it from actionlink to controller

I'm working on an ASP.NET MVC application and i need to pass TextBox value from view to controller this TextBox is in table and i need get the input value.
#foreach (var item in Model)
{
<tr class="odd gradeX">
<td>
#Html.DisplayFor(modelItem => item.Product.ProductName)
</td>
<td>
#Html.DisplayFor(modelItem => item.User.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Product.Reference)
</td>
<td>
#Html.TextBoxFor(modelItem => item.QuantityWanted, new { style = "width:60%", type = "number", min = "0", step = "1", max = item.Quantity })
#Html.ActionLink("Add", "Add", new { idProduct = item.ProductID, idUser = item.UserID, quantityWanted= item.QuantityWanted })
</td>
</tr>
}
I used javascript and jquery but i didn't get anything and quantityWanted always returns null or 0 value.

I think you want code like this:
#foreach (var item in Model)
{
<tr class="odd gradeX">
<td>
#Html.DisplayFor(modelItem => item.Product.ProductName)
</td>
<td>
#Html.DisplayFor(modelItem => item.User.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Product.Reference)
</td>
<td>
<input type="number" id="Quantity#item.ProductID" data-idUser = "#item.UserID" style="width:60%" min="0" step="1" max="#item.Quantity"/>
<button click="AddItem(#item.ProductID)">Click to add</button>
</td>
</tr>
}
<script>
function AddItem(id){
var quantity = $('Quantity' + id).val();
window.location = "/Add/Add?idProduct" + id + "&idUser=" + $('Quantity' + id).data("idUser") + "&quantityWanted=" + quantity;
}
</script>

Unable to remove rows from table

I am having the table with following data in it
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>
I would like to delete the row based on the particular data given in table.
But I don't have any idea on how to delete the rows based on the particular data

Try this:
var table = document.querySelector('table');
var filterInput = document.querySelector('#filter');
filterInput.onkeyup = function () {
var val = this.value;
var td = table.getElementsByTagName('td');
var rows = [];
[].slice.call(td).forEach(function (el, i) {
if (el.textContent === val) {
rows.push(el);
}
});
rows.forEach(function(el) {
el.parentNode.style.display = 'none';
});
};
<input type="text" id="filter" placeholder="Hide row containing...">
<table>
<tr>
<td>cat</td>
<td>dog</td>
</tr>
<tr>
<td>hen</td>
<td>cock</td>
</tr>
</table>

Find the required element and then use style property to hide it. In the example, I went onto hide the table data element corresponding to the data dog.
var tds = $("td");
for(var i =0 ; i< tds.length ; i++)
{
var tdval = tds[i].innerHTML;
if(tdval.trim()=="dog")
{
document.getElementsByTagName("td")[i].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>

Edit inline in table in index view

I use the following code to display the table rows
for every row there is edit and delete button ,what i want to do is
when I click on edit for specific row change the row from display only
to editable row (instead of navigating to other page for edit),how should I do that?
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.name)
</th>
<th>
#Html.DisplayNameFor(model => model.checkBox1)
</th>
<th></th>
</tr>
<tbody id="data-table">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</tbody>
This is how the table look like
Ive try to change the code to something like this but I got following errors:
<tbody id="data-table">
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
if (Model[i].Id == ViewBag.SelectedID)
{
<td>
#Html.EditorFor(model=> model[i].name)
</td>
<td>
#Html.EditorFor(m=> m[i].checkBox1)
</td>
<td>
<button type="submit" name="submit" value="save">Save</button>
<button type="submit" name="submit" value="cancel">Cancel</button>
</td>
}
}
else
{
<td>
#Html.DisplayFor(m => m[i].name)
</td>
<td>
#Html.DisplayFor(m=> m[i].checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }) |
#Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</td>
}
</tr>
}
The error is in statments:
#Html.EditorFor(m => m[i].name) and
#Html.EditorFor(m=> m[i]checkBox1)
try specifing the arguments explicitly,any idea?

Try with the following code
Below function make row editable
var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
nCurrentEdit = $(this).attr("id");
var oTR = $(this).parents("tr").first();
var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
oTR.find("td:nth-child(1)").html(sText);
oTR.find(":disabled").prop("disabled", false);
if (oTR.find("#btnsubmit").length == 0)
oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");
oTR.find("td:last a").hide();
event.preventDefault();
});
Following function update the record and convert the row normal from editable mode.
$('#data-table').on('click', '#btnUpdate', function () {
var postData = {
id : nCurrentEdit,
name: $("#name").val(),
checkBox1: $("#checkBox1").val(),
checkBox2: $("#checkBox2").val(),
checkBox3: $("#checkBox3").val()
};
$.post('#Url.Action("AjaxEdit", "Roles")', postData, null);
var sNewText = $(this).parents("tr").first().find("td:first input").val();
$(this).parents("tr").first().find("td:first").append(sNewText);
$(this).parents("tr").first().find("td:first input").remove();
$(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);
$(this).parent().find("a").show();
$(this).hide();
});

You could maybe use jEditable http://www.appelsiini.net/projects/jeditable and intagrate it with your table.
Maybe you can use DataTables too with jEditable if it's fits your project, something like http://datatables.net/release-datatables/examples/server_side/editable.html