This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(73.60000000000001, 25%, 17%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAY%3C/text%3E%3C/svg%3E)
Hi,
What I want to do is to create this html dynamically with stringbuilder and show it as pdf. There are Order and OrderDetail as classes. Can you help me with this?
Html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container-sm" style="max-width: 1200px;">
<div class="row">
<div class="col-sm">
<img src="img/logo.png">
</div>
<div class="col-sm">
<div class="col">
<p>Delivery address
<br>
Jambroe </p>
</div>
</div>
<div class="col-sm">
<div class="col">
<p>
Rebel by Nature Wholesale BV
Overschie 23
1032 FV Amsterdam
Netherlands
T. 010-3324532
******@itsperfect.io
www.itsperfect.io
</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-auto">
<h3>ORDER CONFIRMATION</h3>
</div>
</div>
<div class="row" style="border: 1px solid;">
<div class="col-sm">
<div class="col-sm" style="font-weight: bold;">Order number:</div>
<div class="col-sm" style="font-weight: bold;">Date: </div>
</div>
<div class="col-sm">
<p>58</p>
<p>10-10-2023</p>
</div>
<div class="col-sm-3">
<p style="font-weight: bold;">Delivery Date: </p>
09.10.2023
</div>
<div class="col-sm-3">
<p style="font-weight: bold;">Payment terms: </p>
5% payment discount (485,91 EUR) if payment received within 10 days
Payment within 30 days
</div>
</div>
<br>
<div class="row">
<div class="col-md-auto">
<h5>Bomber</h5>
</div>
</div>
<div class="row" style="border: 1px solid;">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">S</th>
<th scope="col">M</th>
<th scope="col">L</th>
<th scope="col">XL</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Grey</th>
<td>300</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>12</td>
<td>60,00</td>
<td>720,00</td>
</tr>
</tbody>
</table>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-auto">
<h5>Bomber 2</h5>
</div>
</div>
<div class="row" style="border: 1px solid;">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">32</th>
<th scope="col">30</th>
<th scope="col">34</th>
<th scope="col">36</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Grey</th>
<td>300</td>
<td>4</td>
<td>6</td>
<td>3</td>
<td>5</td>
<td>12</td>
<td>60,00</td>
<td>720,00</td>
</tr>
</tbody>
</table>
</div>
<hr>
</div>
<div class="d-flex justify-content-end mobile">
<div class="col col-sm-6">
<p style="font-weight: bold;">168 pieces - Goods total </p>
<p>Shipping Costs : </p>
<p>Postage costs : </p>
<p style="font-weight: bold;">Total : </p>
</div>
<div class="col col-sm-2">
<p>9.718,97 EUR </p>
<p>0.00 EUR</p>
<p>2,50 EUR</p>
<p>9.720,70 EUR</p>
</div>
</div>
<hr>
</div>
</body>
</html>
Controller
private string CreatePdf(OrderHistoryDetail orderHistoryDetail)
{
StringBuilder builder = new StringBuilder();
builder.Append("<!DOCTYPE html>\r\n<html lang=\"tr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Document</title>\r\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\r\n integrity=\"sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9\" crossorigin=\"anonymous\"> \r\n</head>");
builder.Append("<div class=\"container-sm\" style=\"max-width: 1200px;\">");
builder.Append(" <div class=\"row\">\r\n <div class=\"col-sm\">\r\n<img src=\"img/logo.png\">\r\n</div>\r\n <div class=\"col-sm\">\r\n<div class=\"col\">\r\n<p>Delivery address <br> Jambroe </p>\r\n</div>\r\n\r\n </div>\r\n\r\n<div class=\"col-sm\">\r\n<div class=\"col\">\r\n<p>Rebel by Nature Wholesale BV\r\n Overschie 23\r\n1032 FV Amsterdam\r\nNetherlands\r\nT. 010-3324532\r\n******@itsperfect.io\r\n www.itsperfect.io\r\n</p>\r\n</div>\r\n\r\n</div>\r\n</div>\r\n<br>");
builder.Append(" <div class=\"row\">\r\n<div class=\"col-md-auto\">\r\n<h3>ORDER CONFIRMATION</h3>\r\n</div>\r\n </div>");
builder.Append(" <div class=\"row\" style=\"border: 1px solid;\">\r\n\r\n <div class=\"col-sm\">\r\n <div class=\"col-sm\" style=\"font-weight: bold;\">Order number:</div>\r\n <div class=\"col-sm\" style=\"font-weight: bold;\">Date: </div>\r\n </div>\r\n <div class=\"col-sm\">\r\n <p>58</p>\r\n <p>10-10-2023</p>\r\n </div>\r\n <div class=\"col-sm-3\">\r\n <p style=\"font-weight: bold;\">Delivery Date: </p>\r\n 09.10.2023\r\n </div>\r\n\r\n <div class=\"col-sm-3\">\r\n <p style=\"font-weight: bold;\">Payment terms: </p>\r\n 5% payment discount (485,91 EUR) if payment received within 10 days\r\n Payment within 30 days\r\n </div>\r\n </div>\r\n <br>");
for (int i = 0; i < orderHistoryDetail.orderDetail.Count; i++)
{
builder.Append($"<div class=\"row\">\r\n <div class=\"col-md-auto\">\r\n <h5>{orderHistoryDetail.orderDetail[i].ArticelName}</h5>\r\n </div>\r\n</div>\r\n");
builder.Append("<div class=\"row\" style=\"border: 1px solid;\">\r\n<div class=\"col-sm-12\">\r\n <table class=\"table\">\r\n<thead>\r\n");
builder.Append($"<tr>\r\n<th scope=\"col\" colspan=\"2\"></th>\r\n");
builder.Append($"<th scope =\"col\">{item.Size}</th>\r\n </tr>\r\n</thead>\r\n");
builder.Append($"<th scope=\"col\">{orderHistoryDetail.orderDetail[i].Size}</th>\r\n");
}
builder.Append("\r\n</tr>\r\n");
builder.Append("</table>\r\n\r\n</div>\r\n<hr>\r\n</div>");
builder.Append(" <div class=\"d-flex justify-content-end mobile\">\r\n <div class=\"col col-sm-2\">\r\n <p style=\"font-weight: bold;\">168 pieces - Goods total </p>\r\n <p>Shipping Costs : </p>\r\n <p>Postage costs : </p>\r\n <p style=\"font-weight: bold;\">Total : </p>\r\n </div>\r\n <div class=\"col col-sm-2\">\r\n <p>9.718,97 EUR </p>\r\n <p>0.00 EUR</p>\r\n <p>2,50 EUR</p>\r\n <p>9.720,70 EUR</p>\r\n </div>\r\n </div>\r\n <hr>");
builder.Append("</div>\r\n</body>\r\n\r\n</html>");
string html = builder.ToString();
return html;
}
The html output I want will be like the picture.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Hi @Ali Yılmaz,I think you could refer to this thread.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
there is no builtin support for this. you will need to pick a Html to Pdf library. there are free and paid versions depending on you needs.
the most full featured use webkit to parse the html. for example see:
https://github.com/HakanL/WkHtmlToPdf-DotNet
others have their own parsers. itextSharp is popular and has paid and unpaid versions:
https://itextpdf.com/products/convert-html-css-to-pdf-pdfhtml
google for more libraries/
Hi,
I came across one last thing. Here, after grouping by color, I want it to not create a row in the table again. I would be glad if you could help here.
What I want to do is create html dynamically with stringbuilder. Then show it in pdf. So, after creating html dynamically, the rest is easy.
We have no idea what grouping you are referring to and the links are for 3rd party libraries.
If you want alternating row colors then you can determine if the row count, i, is even or odd using the modulus operator. Then apply a background color to the row depending on the results.
if( (i+1) % 2 == 1 )
{
//odd row
}
else
{
//even row
}
The same kind of logic can be applied to grouping. Rather than checking row count, check grouping counts.