Passing view data to controller. Asp net. core 6 MVC - asp.net

I have a view code in my view, how do I get the data from the table in my controller from the view?
I have rows in a table, I need to pass the employee IDs of the selected rows to the controller. For the selected row, I have my css class "Selected".
View code:
#model IEnumerable<WebProductionAccounting.Domain.Entities.Employee>
#{
ViewBag.Tittle = "List of employees";
Layout = "_Layout";
}
<div сlass ="btn-group">
<button type="button" class="button_hola" id ="btn-eml-add">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16">
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
</svg>
New employee
</button>
</div>
<br />
<!--Table Emloyees-->
<table class="table">
<thead>
<tr id ="tr-hover">
<th scope="col" class ="visually-hidden">Id</th>
<th scope="col">№</th>
<th scope="col">Lastname</th>
<th scope="col">Firstname</th>
<th scope="col">Middlename</th>
<th scope="col">PersonnelNumber</th>
<th scope="col">Position</th>
<th>DateOfEmployment</th>
</tr>
</thead>
<tbody class="table-group-divider">
#{var employees = Model.ToList();}
#for (int i = 0; i < employees.Count; i++)
{
var number_row = i + 1;
<tr>
<td class ="visually-hidden">#employees[i].Id</td>
<td>#number_row</td>
<td>#employees[i].Lastname</td>
<td>#employees[i].Firstname</td>
<td>#employees[i].Middlename</td>
<td>#employees[i].PersonnelNumber</td>
<td>#employees[i].Position</td>
<td>#employees[i].DateOfEmployment</td>
</tr>
}
</tbody>
</table>
Controller code:
[HttpGet]
public async Task<IActionResult> GetEmployee(int id)
{
var response = await _employeeService.GetEmployee(id);
if(response.StatusCode == Domain.Enum.StatusCode.OK)
{
return View(response.Data);
}
return RedirectToAction("Error");
}
JS:
var trs = document.querySelectorAll("tbody tr");
for (var i = 0; i < trs.length; i++) {
MakeRowHover(trs[i]);
SelectRow(trs[i]);
}
function SelectRow(row) {
//row click
row.addEventListener('click', function () {
if (!this.classList.contains('tr-selected')) {
this.classList.add('tr-selected');
} else {
this.classList.remove('tr-selected');
}
});
}
I read the documentation, but to be honest, I did not find a specific example for my case.

Related

looping SVG dasharray inconsistent in Safari - workarounds?

I'm going for a seamless loop using a combination of apath-dasharray and pathdashoffset
I have a path length of 16.568147659301758 which is reported by both safari and chrome yet the animations between browsers loop differently.
Even when pathLength="1" is set on the <path> (now supported by modern safari). I still get inconsistency.
Is there any way to abstract or get around the divergence in behaviour?
I'm sure many graphing libraries have had to solve for this in some way.
codepen with pathLength="1" here
codepen using defined 16.568147659301758 here
// not needed
// just to see
//
// 16.568147659301758
var path = document.querySelector("svg path");
var total = path.getTotalLength();
console.log(total);
#keyframes ldmv{100%{stroke-dashoffset: 16.568147659301758}}
.mkldr{
stroke-dasharray: 2.5 13.06814765930175 ;
animation: ldmv 3s linear infinite;}
/* uncomment below if using pathLength="1" on the <path */
/*
#keyframes ldmv{100%{stroke-dashoffset: 1}}
.mkldr{
stroke-dasharray: .1 .9;
animation: ldmv 3s linear infinite;}
*/
<svg width="256" height="256"
class="mkldr"
viewbox="0 0 6 5"
stroke="currentcolor"
fill="none"
stroke-linecap="butt"
stroke-width=".6">
<!-- no pathLength="1" below -->
<path
id="mkldr"
d="m .5 2
a 1 1 0 0 1 2 0 l 0 1
a 1 1 0 0 0 2 0 l 0 -1
a 1 1 0 0 0 -2 0 l 0 1
a 1 1 0 0 1 -2 0 z" />
<use
xlink:href="#mkldr"
transform="
scale(1,-1)
translate(1, -5)"/>

How to convert a cudf.core.dataframe.DataFrame into a pandas.DataFrame?

I have a cudf dataframe
type(pred)
> cudf.core.dataframe.DataFrame
print(pred)
> action
1778378 0
1778379 1
1778381 1
1778383 0
1778384 0
... ...
2390444 0
2390446 0
2390478 0
2390481 0
2390489 1
that I would like to convert to a pandas.DataFrame(). Though
pd.DataFrame(pred)
> 0
0 action
And just found the answer:
pred.to_pandas()

How to fix rows order with pheatmap?

I have generate a heatmap with pheatmap and for some reasons, I want that the rows appear in a predefined order.
I see in previous posts that the solution is to set the paramater cluster_row to FALSE, and to order the matrix in the order we want, like this in my case:
Otu0085 Otu0086 Otu0087 Otu0088 Otu0091
AB200 0 0 0 0 0
2 91 0 2 1 0
20CF360 0 1 0 1 0
19CF359 0 0 0 2 0
11VP12 0 0 0 0 155
11VP04 4 1 0 0 345
However, when I do:
pheatmap(shared,cluster_rows = F)
My rows are sorted alphabetically, like this:
10CF278a
11
11AA07
11CF278b
11VP03
11VP04
11VP05
11VP06
11VP08
11VP09
ANy suggestions would be welcome
Thank's by advance

How to draw svg path for ring using css?

I want to draw a ring in an svg using css.
I have the path I want using a polygon, however I want the same using a ring:
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
Hey I am not sure if you can draw a circle in CSS using SVG functions but a simple example in SVG would be
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Or with just pure CSS
<div style="width: 80px;height:80px;background-color: red; border-radius: 50px">
Solved
Trick is to use four arcs and define the intersection to be used as clip path poly
Like below:
clip-path: path(
"m 10 0 a 10 10 0 0 1 0 20 m 0 -2 a 0.8 0.8 0 0 0 0 -16
m 0 -2 a 10 10 0 0 0 0 20 m 0 -2 a 0.8 0.8 0 0 1 0 -16"
);
/* Note for 20x20 :: performing scaling if required */

Matching a color in SVG with feColorMatrix

I created a drop shadow in SVG using SourceAlpha for the shadow, so its plain black. Using feColorMatrix I reduced the opacity a bit, but still it wasn't looking as I wanted - I want the color of the shadow to match a specific color value. So I took a more in depth look at feColorMatrix.
Now I don't use SourceAlpha as source for the shadow, but SourceGraphic. As my vector image is plain white aka rgba(255, 255, 255, 1), I can calculate the color of the shadow like that:
<feColorMatrix in="the-shadow" result="color-out" type="matrix"
values="0.0157 0 0 0 0
0 0.3059 0 0 0
0 0 0.7765 0 0
0 0 0 1 0 "/>
The outcome should be a dark blue shadow aka rgba(4, 78, 198, 1).
Actually this is working and I believe the calculations are all correct, but when creating a shadow with CSS3 using the same color, there is a noticeable difference: The SVG filter seems to render the color a bit too light. Is there any way to fix that?
feColorMatrix like most filters operates in the linearRGB colour space. If you want an sRGB colour, Try setting color-interpolation-filters="sRGB" as an attribute on the feColorMatrix.
<svg width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 640 480" height="100%"
xmlns="http://www.w3.org/2000/svg">
<filter id="cm">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0.0157 0 0 0 0
0 0.3059 0 0 0
0 0 0.7765 0 0
0 0 0 1 0 "/>
</filter>
<filter id="cmRGB">
<feColorMatrix color-interpolation-filters="sRGB" in="SourceGraphic" type="matrix"
values="0.0157 0 0 0 0
0 0.3059 0 0 0
0 0 0.7765 0 0
0 0 0 1 0 "/>
</filter>
<rect width="100%" height="50%" fill="white" filter="url(#cm)"/>
<rect y="50%" width="100%" height="100%" fill="white" filter="url(#cmRGB)"/>
</svg>
It sure looks different to me on Firefox.
Whilst my answer repeats the same idea, what I have to add is too much for a comment.
I don't know for sure, what is linearRGB in the standard, but I expect it to be, erm, linear. I.e. white color transformed with (darken-twice)
R | ½ 0 0 0 0
G | 0 ½ 0 0 0
B | 0 0 ½ 0 0
A | 0 0 0 1 0
should result in the same color as rgb(50%, 50%, 50%), shouldn't it?
As well as black color transformed with (ligthen-twice)
R | ½ 0 0 0 ½
G | 0 ½ 0 0 ½
B | 0 0 ½ 0 ½
A | 0 0 0 1 0
expected to be the same 50% gray.
But what I actually see as a result is much lighter than expected, color picker shows #BCBCBC instead of #808080. On the other hand, color-interpolation-filters="sRGB" makes the result correct (checked a macbook and a win10 ASUS notebook with default settings).
https://jsfiddle.net/7wvy57fq/2/

Resources