We Keep Coding

Order of divs not updated to match order of items in list

I've run into a strange problem and I'm not sure how to work around it. I have a list of items which I render in a list table with the ability to change the sort order of the items displayed.
Each row also has a div:
<button #onclick="Sort">Test</button>
<table>
#foreach (var item in Transactions)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Description
</td>
<td>
<div>
Hello World
</div>
</td>
</tr>
}
</table>
#code {
public void Sort()
{
Transactions = Transactions.OrderByDescending(x => x.GetType().GetProperty("Id").GetValue(x, null)).ToList();
}
}
When I run this, before I press the sort button I change the content of the first div in the first row from Hello world to anything else using element inspector in the browser console and then press the sort button.
The list is now displayed in reverse order as it should, but the first div in the first row still contains the modified content (when now it should be the last row div).
The above is a simplified representation of the problem, in my real app, the div is a component which contains displays a string variable internal to itself and which can change based on a user action within the component (Custom Select dropdown) and of course the same problem occurs.
How can I ensure the div for each row is actually tied to the order of the list items displayed?
** UPDATE **
I added the key attribute to the div but this just seems to reset the value back to what it was instead of preserving it:
<table>
#foreach (var item in listResponse.Transactions)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Description
</td>
<td>
<div #key=item.Id>
Hello World
</div>
</td>
</tr>
}
</table>

The blazor way is the use #key see control-the-preservation-of-elements-and-components
#foreach (var item in Transactions)
{
<tr #key="item">
...
</tr>
}
you can also use css flex order, this directly controls the elements from css and will overide whatever blazor is doing, visually only!
also see codepen example
if you do want to use css I'd use a for loop as we can add the index manually ...
for (int i = 0; i < list.Count; i++) // Loop through List with for
{
<div style="order: #i">1</div>
}
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

HtmlAgilityPack adding nodes to other nodes

I am using HtmlAgilityPack to parse my html. My main goal is add some div elements around table row elements. However there are also some more elements in the table row. I only want to wrap it with div elements when the font's style is a background color of lightgreen.
Here's an example of what my html looks like:
<tr>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">Tove</font></td>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">To</font></td>
</tr>
however my current code:
HtmlNode[] nodes = document.DocumentNode.SelectNodes("//tr[//td[//font[#style='background-color: lightgreen']]]").ToArray();
foreach (HtmlNode node in nodes)
{
node.InnerHtml = node.InnerHtml.Replace( node.InnerHtml,"<div class=\"select-me\">" +node.InnerHtml + "</div>");
}
produces this html:
<tr>
<div class="select-me">
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"><to</font><font style="background-color: white" color="black">></font></td>
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"><to</font><font style="background-color: white" color="black">></font></td>
</div>
</tr>
<tr>
<div class="select-me">
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">Tove</font></td>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">To</font></td>
</div>
</tr>
<tr>
<div class="select-me">
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"></to></font></td>
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"></to></font></td>
</div>
</tr>
the div elements don't surround the tr elements and every tr has a div element, when only a tr element that has font element of background color lightgreen should contain a div element. If you look at the first tr element it has 4 font elements, instead of two. Ideally, my goal is to insert div elements around a tr element when its font's element background is lightgreen. I have looked at other posts, but I am still having trouble.
Correct html should like:
<div class="select-me">
<tr>
<td style="padding-left: 25pt;"><font style="background-color: lightgreen" color="black">hello</font></td>
<td style="padding-left: 25pt;"><font style="background-color: lightgreen" color="black">goodbye</font></td>
</tr>
</div>

for (var i = 0; i < nodes.Length; i++ )
{
var node = nodes[i];
node = HtmlNode.CreateNode(node.OuterHtml.Replace(node.OuterHtml, "<div class=\"select-me\">" + node.OuterHtml + "</div>"));
}

Add html elements in razor view

I am very new to razor I always workder with aspx pages, I am trying to have a login form with 2 text and a submit button and down of it I am trying to add a square menu with gradients and hoover but I got stuck.
this is my Login.cshtml:
#model Magazzino.Models.LoginViewModel
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (TempData["message"] != null)
{
<script type="text/javascript">
alert(#Html.Raw(Json.Encode(TempData["message"])));
</script>
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
<table>
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.TextBoxFor(a => a.Username)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(a => a.Password)</td>
<td>#Html.PasswordFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
</div>
}
<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Contatti", "Contatti")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Informazioni", "Informazioni")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
In this ways google and firefox render the div with the actionlink in a normal way but IE doesn't render the height so I added a layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
#RenderSection("scripts", required: false)
And now IE, Chrome and Firefox are rendering the div with the action without height, I guess it's not the right way to put HTMl elements that are not linked to the form, but How do I put other HTML elements inside a razor page which has got already a form?
Thank you

I think this is mostly css and html problem.
I don't see the closing tag for <div style="background: grey">, I would verify that it is closed properly.
You have two floating divs, I would put an extra tag <div style='clear:both'> before closing the <div style="background: grey"> tag. This will clear the floating after that point.
After 1. and 2., if you don't see the grey background, I would suspect that the inner divs covered the background, if so, I would add some padding in the parent tag, for example <div style="background: grey; padding: 10px;">

HTML view page save as PDF using roatativa

I have following image for the Create_Brochure ActionResult in Brochure Contrller Class
Here the whole URL of that Action
http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false
Once I click I want to save this view page as PDF , to do that I followed this tutorial
So this is the cshtml view page , so it doesn't have a model class
#model IEnumerable<int>
#{
ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
<title>Create a Template</title>
</head>
<body>
<div style="width:100%; padding:10px; float:left;">
<table width=1100 cellpadding=10>
<tr>
<td colspan="2">
<div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
Bank Brochure
</div>
</td>
</tr>
#if (Model.Contains(1))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
<h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
</div>
</td>
</tr>
}
#if (Model.Contains(2))
{
<tr>
<td colspan="2" style="background-color:lightgrey">
<div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
<h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
<p style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</td>
</tr>
}
#if (Model.Contains(3))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
<h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
</div>
</td>
</tr>
}
#if()....
<tr>
<td colspan="2">
<div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
Copyright © 2015 Zoo Group , Solution by kelum.
</div>
</td>
</tr>
</table>
</div>
<br />
<button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$('#btn_sumbit').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("DownloadActionAsPDF", "Brochure")',
dataType: "text",
data: null,
success: function (data) {
},
error: console.log("it did not work"),
});
});
</script>
}
this is controller class method to save to PDF
[HttpPost]
public ActionResult DownloadActionAsPDF()
{
string path = Request.Url.ToString();
//Request.Url.ToString() using to get current page URL
return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
}
but once I click this button it doesn't save to PDF file,

As i already commented that your code is calling the same Method again and again..
You can do the same thing by using ActionAsPdf and point it to the Create_Brochure Action method of yours
Ex:-
public ActionResult DownloadActionAsPDF()
{
return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
}
public ActionResult Create_Brochure()
{
//Your logic....
return View()
}
and in your view page no need of a button or a Ajax call can be done by a anchor tag
View:-
<a href="#Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>

How to click button in table cell

I am trying to click a button which is in a table cell. This cell contains couple of buttons.
Table has 5 rows and 10 collumns. Button cell is the last one.
Tried using xpath tool in firefox but i am getting an exception that the element could not be found.
tried these xpath variations:
Drv.Driver.FindElement(By.XPath("//table[#id='SERVICE_CANCEL']/tbody/tr[" + 4 + "]/td[10]")).Click();
Drv.Driver.FindElement(By.XPath(".//*[#id='SERVICE_CANCEL']/tr[" + 4 + "]/td[10]/div")).Click();
Drv.Driver.FindElement(By.XPath("//[#serid='10002455']/tr[4]")).Click();
none of these works. Also in every row's 10th cell there is a pack of buttons as i said before. Dont have any other ideas how to click it. If u could help i would appreciate it.
Because HTML code is a bit "Huge" so part of it:
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons><A title="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455"></A></DIV></TD></TR>

The button has an id (SERVICE_CANCEL). First you should rectify the HTML because you need quotes like that : <a id="SERVICE_CANCEL"> and then just use :
Drv.Driver.FindElement(By.Id("SERVICE_CANCEL")).Click();
You don't need any xpath when you have an id

Shien, As we cannot use IDs in a table cell value with ID(as these can be generated dynamically or not unique) you need to give the entire xpath.
I have taken your HTML and just updated the last values You can see with ** and following is the selenium code worked for me.
HTML Code:
<html>
<body>
<table border="1" width="200px">
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons>**<input type=button value="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455" onclick="calFunc()"></input>**</DIV></TD></TR>
</table>
<script>
function calFunc()
{
alert("Hello World");
}
</script>
</body>
</html>
Selenium Code in Java:
driver.findElement(By.xpath("//table/tbody/tr[1]/td[6]/div/div/input[#value='shutdown']")).click();

Found the solution after digging even more.
Xpath that i used was:
//a[contains(#id, 'SERVICE_CANCEL') and contains (#serid, '" +tempPaslaugosIDReiksme + "')]"