We Keep Coding

Blazor navigation from within a loop?

So I'm trying to make a Blazor application that displays a customers data. When all the customers are displayed I would like to be able to navigate to an individual customer. I am having trouble making this work. The main concept is in the code below as well I have the expected model.
#for(int i = 0; i < customers.Length-1; i++)
{
<tr>
<td>#customer.Id</td>
<td>#customer.CustomerId</td>
<td>#customer.LastName</td>
<td>#customer.FirstName</td>
<td>#customer.Name1056Form</td>
<td>#customer.TrapezeClientId</td>
<td>#customer.CustomerNote</td>
<td #onclick="NavToCustomer(i)"> Details</td>
</tr>
private void NavToCustomer(int i)
{
int Id = i;
navigation.NavigateTo("/Customer/" + Id);
}
}

<td #onclick="()=>NavToCustomer(#customer.Id)"> Details</td>
private void NavToCustomer(int custID)
{
navigation.NavigateTo("/Customer/" + custID);
}
Explanation: the vanilla #onclick sends its own arguments (you can see what they are by hovering over "#onclick" in your markup). Your event handler doesn't handle MouseEventArgs, so the signatures don't match. You want to send custom info, so you should use the lambda expression instead.
--edit--
On second thought, can you just directly do this?
<td #onclick="()=>navigation.NavigateTo("/Customer/" + customer.Id)"> Details</td>

Refresh html table data using Blazor and C#

I have a situation where I have a for loop that creates my html table from my datamodel which gets the data from SQL server express. I would like to know if it is possible to create a auto refresh method where the table data only gets refreshed and not the full page, if not then maybe a method that OnClick button will retrieve the latest data from datamodel and update the table accordingly.
I'm new to blazor and C# so any help would be appreciated, my current page structure currently looks as follows:
#page "/employees"
#using DataLib;
#inject IEmployeeData _db
#if (employees is null)
{
<p style="color:white;"><em>Loading . . .</em></p>
}
else
{
<table class="table" id="myTable">
<thead>
<tr>
<th>Entry Date</th>
<th>Employee</th>
</tr>
</thead>
<tbody>
#foreach (var employee in employees)
{
<tr>
<td>#employee.EntryDate</td>
<td>#employee.POI</td>
</tr>
}
</tbody>
</table>
}
#code{
private List<EmployeeModel> employees;
protected override async Task OnInitializedAsync()
{
employees = await _db.GetEmployee();
}
}
The above works perfect when I'm loading this page and when I do a manual refresh.
Is there a way that you guys can maybe assist me?
Thanks.

Not sure this is your aim butt you could try;
#inject IEmployeeData _db
#if (employees is null)
{
<p style="color:white;"><em>Loading . . .</em></p>
}
else
{
<table class="table" id="myTable">
<thead>
<tr>
<th>Entry Date</th>
<th>Employee</th>
</tr>
</thead>
<tbody>
#foreach (var employee in employees)
{
<tr>
<td>#employee.EntryDate</td>
<td>#employee.POI</td>
</tr>
}
</tbody>
</table>
<button #onclick="GetEmployees"> Refresh Employee List</button>
}
#code{
private List<EmployeeModel> employees;
protected override async Task OnInitializedAsync()
{
GetEmployees()
}
private async void GetEmployees()
{
employees.Clear();
employees = await _db.GetEmployee();
StateHasChanged();
}
Good luck,

You could create a SignalR hub on your server. Inject the hub into your api controllers, use it to signal clients that updates have occurred to the data from the API.

Mathias Z
I not understand why not this answer is not taken for good, but for me is all that i want, StateHasChanged(); because i still not use JavaScript.
public MyConstructor()
{
_My_collection_.CollectionChanged += Change_EventArgs;
}
void Change_EventArgs(object sender, EventArgs e)
{
StateHasChanged();
}

If your aim is just to refresh the data at regular interval then you can make use of Javascript Interop that is supported by Blazor. The set-up documentation is available in this link.
Like said by Mathias Z in this solution you would need a button for this to work.
I can see you have been writing both C# code and HTML in same file however I personally prefer keeping them separately. Coming back to the solution you can make use to JavaScript and c# to periodically refresh your displayable content.
Below are the changes you need to make to make it work.
Code-Behind
using Microsoft.JSInterop; // import this library
using this you can invoke JavaScript methods.
[Inject]
private IJSRuntime JSRuntime { get; set; }
OnAfterRenderAsync and OnAfterRender are called after a component has finished rendering. Element and component references are populated at this point. Use this stage to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("EmployeeInterop.refreshEmployeeData");
}
// This method will be called on button click.
protected async Task GetEmployees()
{
employees = await _db.GetEmployee();
}
wwwroot
Within this folder we generally keep our web-resources including js libraries. Here, create a javascript file e.g. EmployeeInterop.js and below code.
(function () {
window.EmployeeInterop = {
refreshEmployeeData: () => {
setInterval(() => {
document.getElementById("btnGetEmployeeData").click();
}, 3000);
}
};
})();
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). You can define your own time of refresh.
_Host.cshtml
Register this script file here.
<script src="EmployeeInterop.js"></script>
EmployeeDetail.razor
<button id="btnGetEmployeeData" #onclick="GetEmployees"> Refresh Employee List</button>
Add this below your table tag. In-case you don't want this button to be visible to the end-user then add a style attribute and set it to display:none.

iTextSharp xmlworker - how to set dotted table border from html

Hello all you smart people of StackOverflow.
I was given a task yesterday to convert this scanned image to PDF document.
As I don't have time to learn all tips and tricks of iText, I decided to use xmlWorker and create an HTML template of the document itself.
I was quite successful, the ending result is this:
HOWEVER!
Not everything went smoothly. If you take a closer look at the scanned document, you may notice that in the middle of the document there is a table with dashed border. And this is where my headache starts.
I've been googling for the past 15 hrs trying to find a solution for this, but was not successful. I've tried all kinds of CSS border definitions like:
border-left-style: dashed;
border-style: dashed;
border: dashed;
It seems that these CSS definitions are simply ignored.
So my question is this, is there a proper way to define an HTML table with dashed border so it can be properly converted to PDF document?
I am using latest iTextSharp from Nuget (v. 5.5.12).
Thank you in advance.
Edit:
Ok, so 24 hrs later I think I have an answer.
It is a combination of these two examples:
http://codejaxy.com/q/395523/c-23-html-asp-net-itextsharp-xmlworker-using-itextsharp-xmlworker-to-convert-html-to-pdf-and-write-text-vertically
One cell with different border types
Basically I implemented IPdfPCellEvent interface so I could use a CellEvent on a PdfCell:
public class DottedCell : IPdfPCellEvent
{
private readonly int _border = 0;
public DottedCell(int border)
{
_border = border;
}
public void CellLayout(PdfPCell cell, Rectangle position, PdfContentByte[] canvases)
{
var canvas = canvases[PdfPTable.LINECANVAS];
canvas.SaveState();
canvas.SetLineDash(0, 2, 2);
cell.Border = Rectangle.NO_BORDER;
if ((_border & Rectangle.TOP_BORDER) == Rectangle.TOP_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetTop(1));
canvas.LineTo(position.GetLeft(1), position.GetTop(1));
}
if ((_border & Rectangle.BOTTOM_BORDER) == Rectangle.BOTTOM_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetBottom(1));
canvas.LineTo(position.GetLeft(1), position.GetBottom(1));
}
if ((_border & Rectangle.RIGHT_BORDER) == Rectangle.RIGHT_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetTop(1));
canvas.LineTo(position.GetRight(1), position.GetBottom(1));
}
if ((_border & Rectangle.LEFT_BORDER) == Rectangle.LEFT_BORDER)
{
canvas.MoveTo(position.GetLeft(1), position.GetTop(1));
canvas.LineTo(position.GetLeft(1), position.GetBottom(1));
}
canvas.Stroke();
canvas.RestoreState();
}
}
After that I overrode a iTextSharp.tool.xml.html.table.TableData class:
public class TableDataProcessor : TableData
{
bool HasBorderStyle(IDictionary<string, string> attributeMap, string borderPosition, string borderStyle)
{
var hasStyle = attributeMap.ContainsKey("style");
if (!hasStyle)
{
return false;
}
var borderLeft = attributeMap["style"]
.Split(';')
.FirstOrDefault(o => o.Trim().StartsWith("border-style-" + borderPosition + ":"));
if (borderLeft != null)
{
return borderLeft.Split(':').Any(o => o.Trim().ToLower() == borderStyle);
}
return false;
}
public override IList<IElement> End(IWorkerContext ctx, Tag tag, IList<IElement> currentContent)
{
var cells = base.End(ctx, tag, currentContent);
var attributeMap = tag.Attributes;
if (HasBorderStyle(attributeMap, "left", "dotted"))
{
var pdfPCell = (PdfPCell) cells[0];
pdfPCell.CellEvent = null;
pdfPCell.CellEvent = new DottedCell(Rectangle.LEFT_BORDER);
}
return cells;
}
}
The last step was to add that class to tag processor for a TD element:
var tagProcessorFactory = Tags.GetHtmlTagProcessorFactory();
tagProcessorFactory.AddProcessor(
new TableDataProcessor(),
new[] {HTML.Tag.TD}
);
htmlContext.SetTagFactory(tagProcessorFactory);
And it works:
HTML markup:
<table class="content-wrapper">
<tbody>
<tr>
<td class="pcnt_60 content-left top" valign="top">
<table>
<tr>
<td style='border-left: 0.5px; border-style-left: dotted;'>content goes here</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

How to search in website and retrieve data using loop

Pardon me if my question title is not expressive ,but what I want to say is I have a simple tool that should search in a website and get the result which is 3 kinds of data (name,phone,address) I had written some codes for opening the website inside web browser tool and applied a loop statement to search for 30 numbers and it really works but the problem is it works for only one time and the second problem is in retrieving data from the other page which opens when the search button is clicked ,so suppose that I will start my sequential based number in search as 737000000 it should search for this number and opens the other page which contains the data and put these data in 3 text boxes finally back to previous page and search for 737000001 (adding 1 each time)
My codes are
private void searchBtn_Click(object sender, EventArgs e)
{
for (int i = 0; i < 30; i++)
{
string temp = string.Format("{0:D6}", i);
string formula = textBox1.Text + temp;
// Get all input elements
HtmlElementCollection inputs = webBrowser1.Document.GetElementsByTagName("input");
// Select "txtSearch" input
HtmlElement input = inputs["q"];
if (input != null)
{
string value = input.GetAttribute("VALUE");
if (!string.IsNullOrEmpty(value))
{
// Already searched but no results
}
else
{
// Input search text
string searchText = formula;
input.SetAttribute("VALUE", searchText);
var elements = webBrowser1.Document.GetElementsByTagName("button");
foreach (HtmlElement element in elements)
{
element.InvokeMember("click");
}
}
}
}
the data in the other page when I view the page source appears like
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>name</th>
<th>number</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mat Adam</td>
<td><b class="text-success">737000000</b></td>
<td>New York</td>
</tr> </tbody>
</table>

Generate jQuery functions dynamically mvc 4 razor

Currently, I am passing a list of object from controller to a view, and generate labels by the object's name.
What I am trying to do is to generate a jQuery function that will Dynamically create functions (toggle a form with relative lable id) for each label after being clicked.
The jQuery function is not working, I could not output the corrent jQuery function in the webpage...... Could you give me soem hints?
<table>
#foreach (var item in Model)
{
<tr>
<td>
#Html.Label(item.productName, new { #id = item.productId})
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function () {
#foreach (var item in Model)
{
$(#item.productId).click)(function({
//do something
}));
}
});
</script>
Thanks very much!

your JS syntax is wrong, for starters. What you want to do is to give all those labels a class name (such as product_lbl) or a data attribute (if you don't like semantic class names) such as product-lbl. This way you don't have to do a second loop to add click event handlers. You'll only need one, like so:
$('.product_lbl').on(
'click',
function() { /* Do something for whichever label was clicked */ }
);
OR
$('[product-lbl]').on(
'click',
function() { /* Do something for whichever label was clicked */ }
);