Develop Reference

Blazor - button to Select items from a table and insert them in another 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.

Razor C# - Create Table with Pages

I was wondering if it is possible to create a table with pages in C# razor? I want to make a page for every 5 workitems so that the table doesn't get too long.
My table looks like so:
<table class="Table">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Item Type</th>
</tr>
</thead>
<tbody>
#foreach(var workItem in workItemList)
{
<tr #onclick="#(() => WorkItemSelected(workItem))">
<td>#workItem.Id</td>
<td>#workItem.Title</td>
<td>#workItem.ItemType</td>
</tr>
}
</tbody>
</table>

Get element value in Razor with Jquery

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
});
});

How to use a razor declared variable outside of razor?

I have a foreach displaying product descriptions and product prices. i want to be able to sum all of the prices and display them in a data cell. How can i do this?
<table class="table table-striped">
<tr>
<th>Description</th>
<th>Price</th>
</tr>
#foreach (var product in Model)
{
<tr>
<td>#product.Description</td>
<td>#product.Price</td>
</tr>
}
#foreach (var product in Model)
{
var sum = product.Price++;
}
<tr>
<td colspan="2">Total Price: </td>
</tr>
</table>
i want to be able to show the value of sum outside the foreach

You can declare a variable inside a code block and use it in the foreach like so:
<table class="table table-striped">
<tr>
<th>Description</th>
<th>Price</th>
</tr>
#foreach (var product in Model)
{
<tr>
<td>#product.Description</td>
<td>#product.Price</td>
</tr>
}
#{
var sum = 0;
foreach (var product in Model)
{
sum += product.Price;
}
}
<tr>
<td colspan="2">Total Price: #sum</td>
</tr>
</table>
An alternative could be using System.Linq.
<tr>
<td colspan="2">Total Price: #Model.Sum(product => product.Price)</td>
</tr>

Creating a table programmatically

I have been searching for quite some time to create the following table through code-behind using C#. I am finding difficulty in adding a <tr> to <thead> and <tr> to <tbody>. This is how the table should look like:
<table id="mytable" border="1" cellpadding="10" cellspacing="0" >
<caption>myCaption</caption>
<thead>
<tr>
<td> </td>
<th scope="col">myHeader1</th>
<th scope="col">myHeader2</th>
<th scope="col">myHeader3</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>1</td>
</tr>
</tbody>
</table>
Any help is appreciated.

Create a strongly typed view with a list of whatever you're binding, and use the #foreach loop:
#model List<MyClass>
<table id="mytable" border="1" cellpadding="10" cellspacing="0" >
<caption>myCaption</caption>
<thead>
<tr>
<td> </td>
<th scope="col">myHeader1</th>
<th scope="col">myHeader2</th>
<th scope="col">myHeader3</th>
</tr>
</thead>
<tbody>
#foreach(var m in Model)
{
<tr>
<td>#m.MyProp1</td>
<td>#m.MyProp2</td>
<td>#m.MyProp3</td>
</tr>
}
</tbody>

I have done similar thing using C# MVC. Here is a sample code. Hope this will help to get an idea.
#{int count = Model.HeadingsList.Count;}
<table>
<thead>
<tr>
#foreach (string heading in Model.HeadingsList)
{
<th>#heading</th>
}
</tr>
</thead>
<tbody>
#foreach (string row in Model.rowsList)
{
string[] cellValues = Array.ConvertAll(row.Split(','), p => p.Trim());
if (count != cellValues.Count()) { return; }
<tr>
#for (int i = 0; i < #count; i++)
{
<td>#cellValues[i]</td>
}
</tr>
}
</tbody>
</table>
I had a list of rows like below.
Array[0]['cell1','cell2','cell3'...]
Array[1]['cell1','cell2','cell3'...]