I have a foreach loop like that.I want to get item id when pressed "delete" button.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name - Sirname</th>
<th>Date - Time</th>
<th>Message</th>
<th>id</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td id="itemId">#item.id</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
}
</tbody>
</table>
my Qjuery is like that;
$("button").click(function () {
var id = $("#itemId").html();
$("#sonuc").html(id);
});
});
and my result must be in it;
<p id="sonuc"> </p>
But everytime it shows only first item's id of table. So how can i get value of each element in loop with Jquery?
You can use var id = $(this).parent().prev().text();
Demo
$("button").click(function() {
var id = $(this).parent().prev().text();
$("#sonuc").html(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name - Sirname</th>
<th>Date - Time</th>
<th>Message</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td>#item.id1</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td>#item.id2</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
<p id="sonuc"> </p>
Id must be unique for each element and if you want to get value of Item Id and use razor after pressing delete button you can set value of Item Id on delete button as Id or data attribute so
you can try
<td id="itemId_#item.id">#item.id</td>
<button id="#item.Id" class="btn btn-danger">Delete</button>
instead of
<td id="itemId">#item.id</td>
<button class="btn btn-danger">Delete</button>
$("button").click(function () {
var id = this.id; // value of itemId
});
});
Related
I have a view which shows the list of files from a folder and the file count may differ for every user
my view is as follows
<div class="container" style="padding-top:10px; height:100%; width:100%;padding:0;margin:0;">
<table class="table table-bordered table-striped">
<thead>
<tr style="text-align:center;">
<th>File Name</th>
<th>Download</th>
</tr>
</thead>
<tbody>
#foreach (handbook.Data.EmpDoc files in Model)
{
<tr style="text-align:center;">
<td>
<input type="checkbox" id="chk(#files.Filename)" />
</td>
<td>#files.Filename</td>
<td class="text-nowrap">#Html.ActionLink("Download", "DownloadFile", new { fileName = files.Filename, id = files.EmployeeId })</td>
</tr>
}
</tbody>
</table>
</div>
and this is the script i am using to check if the check box is checked
<script>
// this is the scrpt for checkbox
$(document).on("click", "[type='checkbox']", function (e) {
if (this.checked) {
$(this).attr("value", "1");
} else {
$(this).attr("value", "0");
}
});
</script>
I am able to generate id for each file like chkDocs or chkpayslip but when i click in it, it sends value =0 to the controller
please help
I have a table with a for each loop that displays a number of products:
<table id="myTable" class="table table-bordered">
<thead class="thead-green">
<tr>
<th>Product Name</th>
<th>Product Model</th>
<th>Description</th>
<th>Price</th>
<th>Add Service</th>
</tr>
</thead>
<tbody>
#if (Products.Any())
{
#foreach (var product in Products)
{
<tr>
<td>#product.Name</td>
<td>#product.Model</td>
<td>#product.Description</td>
<td>#product.Price</td>
<td><button style="background-color:#0275d8;" class="btn btn-primary btn-medium" #onclick="#( () => add(product))">Add</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
I would like to add a Search bar at the top of it and be able to search the items inside the table
i Have a table with all my items:
<div class="container">
<div class="row bg-light">
<table class="table table-bordered">
<thead class="thead-green">
<tr>
<th>Update</th>
<th>SQLite ID</th>
<th>Variable Name</th>
<th>Value</th>
<th>Description</th>
<th>Delete Variable</th>
</tr>
</thead>
<tbody>
#if (Products.Any())
{
#foreach (var product in Products)
{
<tr #onclick="(() => SetProductForUpdate(product))">
<td><button style="background-color:green;" class="btn btn-primary btn-medium" onClick="document.getElementById('UpdateSystemValues').scrollIntoView();">Select</button></td>
<td>#product.Id</td>
<td>#product.Name</td>
<td>#product.Price</td>
<td>#product.Description</td>
<td><button class="btn btn-danger" #onclick="(() => DeleteProduct(product))">Delete</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
</div>
</div>
I need the Select button to add the item to a new table. Each time I select an item, a new row should be created including the selected item.
I have the following table:
<form method="post" asp-action="Index" asp-controller="Record">
<table class="table table-hover">
<thead>
<tr>
<th scope="col"><input type="checkbox" id="chkAll"></th>
<th scope="col">Created</th>
<th scope="col">User Reference</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var rec in Model.Data)
{
<tr>
<td style="display: none">
#Html.TextBoxFor(m => rec.Id)
</td>
<td>
#Html.CheckBoxFor(m => rec.IsChecked)
</td>
<td>#rec.Created</td>
<td>#rec.UserReference</td>
<td>#rec.Type</td>
<td>#rec.Status</td>
<td>
<input name="submit" type="submit" id="process" value="submit" />
</td>
</tr>
}
</tbody>
</table>
</form>
The issue I have is when I press submit I'm expecting to pass the content of the table into my controller, however when I submit the form the model on my controller is null:
[HttpPost]
public async Task<IActionResult> Index(List<UserData> data)
When I submit the form I expect to have a list of id's and checkbox values either true / false, can someone shed some light into why I'm not able to see this within the post method of the controller?
Found the solution of the following thread, seems switching foreach to for resolved the issue.
Below is my razor code for my table of users and the current add/edit layout
<table class="smalltable" cellpadding="0" cellspacing="0" id="tblUsers">
<thead>
<tr>
<th> </th>
<th>First Name</th>
<th>Last Name</th>
<th>Dept</th>
<th>Assyst Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>#{ Html.BeginForm("AddEditUser", "Home"); }
<input type="submit" value="Add" id="btnSave" name="cmd" class="plain-button" />
</td>
<td>#Html.Editor("Forename")</td>
<td>#Html.Editor("Surname")</td>
<td>#Html.DropDownList("lstDepts")</td>
<td>#Html.Editor("AssystName")
#{ Html.EndForm(); }</td>
</tr>
#foreach (var User in Model)
{
<tr>
<td>#Html.ActionLink("Edit", "AddEditUser", new { id = User.ID }, new { name = "cmd", value = "Edit" })</td>
<td>
#User.Forename
</td>
<td>
#User.Surname
</td>
<td>
#User.Dept
</td>
<td>
#User.AssystName
</td>
</tr>
}
</tbody>
</table>
What i want to achieve is when a edit is pressed, the row that the edit link was on turns into edit boxes, i how to load up the add form with the edit users details (i could use hidden id and set it with querystring) but i wanted to edit in place really
anyone know how to do this or can point me in the right place?
THanks