I need to parse HTML file with HTML Agility Pack. Here is div with class attribute = divTableBodyText and table inside it. I need to get table's content. I created class for data but don't know how get data.
<html>
<body>
<div class="divTableBodyText">
<table class="tableBodyText fdff_L" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<span class="fontSize textBold">Выберите тариф.</span> Разница цен в пределах одного
типа тарифа может возникнуть из-за условий выполнения рейса, связанных с колличеством
пересадок и доступностью мест. Цены указаны для взрослого пассажира с учетом Сборов
/ Налогов.
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<div class="FFInfoPanel">
</div>
<table class="fdff_tableFF" cellspacing="0">
<tbody>
<tr>
<th>
</th>
<th>
Тип тарифа
</th>
<th width="55%">
Описание тарифа
</th>
<th>
Минимальная цена
</th>
<th>
Другие авиарейсы
</th>
</tr>
<tr class="">
<td style="background-color: rgb(255, 255, 255); border-right: medium none; padding: 0px 4px 0px 0px;">
</td>
<td class="textBold" width="15%">
Special-Kazakhstan
</td>
<td class="wrap" id="FN_0" width="55%">
Специальный тариф экономического класса с ограничениями <a href="javascript:fareFamilyDescriptionPopUp.redirectToAnExternalPopUp('http://www.airastana.com/int/ru/Fare-Family-Special-Kazakhstan.aspx');">
Дополнительная информация</a>
</td>
<td style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" class="white"
id="FRB_1_0" _isdisabled="false" width="15%">
<input id="RB0" name="FamilyButton" value="0|1" onclick="javascript:FDFF.selectRecommendationSet('0', true,'0', 'FRB_1_0',false);"
checked="checked" type="radio">
47 917 KZT
</td>
<td class="white" id="FRB_2_0" _isdisabled="" width="15%">
</td>
</tr>
<tr class="bgrd">
<td style="background-color: rgb(255, 255, 255); border-right: medium none; padding: 0px 4px 0px 0px;">
</td>
<td class="textBold" width="15%">
Flexible-Kazakhstan
</td>
<td class="wrap" id="FN_1" width="55%">
Специальный тариф экономического класса с возможностью бесплатного перебронирования
до отправления. <a href="javascript:fareFamilyDescriptionPopUp.redirectToAnExternalPopUp('http://www.airastana.com/int/ru/Fare-Family-Flexible-Kazakhstan.aspx');">
Дополнительная информация</a>
</td>
<td class="white" id="FRB_1_1" _isdisabled="false" width="15%">
<input id="RB1" name="FamilyButton" value="1|1" onclick="javascript:FDFF.selectRecommendationSet('1', true,'1', 'FRB_1_1',false);"
type="radio">
52 397 KZT
</td>
<td class="white" id="FRB_2_1" _isdisabled="" width="15%">
</td>
</tr>
<tr class="">
<td style="background-color: rgb(255, 255, 255); border-right: medium none; padding: 0px 4px 0px 0px;">
</td>
<td class="textBold" width="15%">
Full flexible
</td>
<td class="wrap" id="FN_2" width="55%">
Нормальный тариф экономического класса без ограничений <a href="javascript:fareFamilyDescriptionPopUp.redirectToAnExternalPopUp('http://www.airastana.com/int/ru/Fare-Family-Full-Flexible.aspx');">
Дополнительная информация</a>
</td>
<td class="white" id="FRB_1_2" _isdisabled="false" width="15%">
<input id="RB2" name="FamilyButton" value="2|1" onclick="javascript:FDFF.selectRecommendationSet('2', true,'2', 'FRB_1_2',false);"
type="radio">
56 267 KZT
</td>
<td class="white" id="FRB_2_2" _isdisabled="" width="15%">
</td>
</tr>
<tr class="bgrd">
<td style="background-color: rgb(255, 255, 255); border-right: medium none; padding: 0px 4px 0px 0px;">
</td>
<td class="textBold" width="15%">
Business-Kazakhstan
</td>
<td class="wrap" id="FN_3" width="55%">
Нормальный тариф бизнес класса с некоторыми ограничениями <a href="javascript:fareFamilyDescriptionPopUp.redirectToAnExternalPopUp('http://www.airastana.com/int/ru/Fare-Family-Business-Kazakhstan.aspx');">
Дополнительная информация</a>
</td>
<td class="white" id="FRB_1_3" _isdisabled="false" width="15%">
<input id="RB3" name="FamilyButton" value="3|1" onclick="javascript:FDFF.selectRecommendationSet('3', true,'3', 'FRB_1_3',false);"
type="radio">
89 557 KZT
</td>
<td class="white" id="FRB_2_3" _isdisabled="false" width="15%">
<input name="FamilyButton" value="4|2" onclick="javascript:FDFF.selectRecommendationSet('4', true,'3', 'FRB_2_3',false);"
type="radio">
93 951 KZT
</td>
</tr>
<tr class="">
<td style="background-color: rgb(255, 255, 255); border-right: medium none; padding: 0px 4px 0px 0px;">
</td>
<td class="textBold" width="15%">
Business
</td>
<td class="wrap" id="FN_4" width="55%">
Нормальный тариф бизнес класса без ограничений. Почувствуйте настоящий комфорт!
<a href="javascript:fareFamilyDescriptionPopUp.redirectToAnExternalPopUp('http://www.airastana.com/int/ru/Fare-Family-Business.aspx');">
Дополнительная информация</a>
</td>
<td class="white" id="FRB_1_4" _isdisabled="false" width="15%">
<input id="RB4" name="FamilyButton" value="5|1" onclick="javascript:FDFF.selectRecommendationSet('5', true,'4', 'FRB_1_4',false);"
type="radio">
98 345 KZT
</td>
<td class="white" id="FRB_2_4" _isdisabled="" width="15%">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
you can try somethink like this maybe it would help
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(//your html document);
foreach (HtmlNode div in doc.DocumentNode.SelectNodes("//div[#class='divTableBodyText']")){
foreach (HtmlNode table in div.DocumentNode.SelectNodes("table")) {
foreach (HtmlNode tbody in div.DocumentNode.SelectNodes("tbody")) {
foreach (HtmlNode row in tbody.SelectNodes("tr")) {
foreach (HtmlNode cell in row.SelectNodes("td")) {
Console.WriteLine(cell.InnerText);
}
}
}
}
}
Related
I have the following HTML:
<html>
<head>
<style>
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
width: 100%;
}
.styled-table thead tr {
background-color: #004298;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #004298;
}
.styled-table tbody tr.active-row {
font-weight: bold;
color: #004298;
}
</style>
</head>
<body>
<table class='styled-table'>
<thead>
<tr class='active-row'>
<th>Allowed access control list</th>
</tr>
</thead>
<tr class='active-row'>
<td>
<table class='styled-table'>
<tr>
<td>172.16.40.250 - Blue Coat SG-VA Series>show allowed-access</td>
</tr>
<tr>
<td>192.168.1.69 255.255.255.255</td>
</tr>
<tr>
<td>192.168.1.71 255.255.255.255</td>
</tr>
</table>
</td>
</tr>
</table>
<p>
<table class='styled-table'>
<thead>
<tr class='active-row'>
<th>Proxy Client and Unified Agent settings</th>
</tr>
</thead>
<tr class='active-row'>
<td>
<table class='styled-table'>
<tr>
<td colspan='2'>172.16.40.250 - Blue Coat SG-VA Series>show clients</td>
</tr>
<tr>
<td colspan='2'>Client Manager configuration</td>
</tr>
<tr>
<td><strong> Activation </strong></td>
<td> disabled</td>
</tr>
<tr>
<td><strong> Host </strong></td>
<td> from client request</td>
</tr>
<tr>
<td><strong> Install Port </strong></td>
<td> 8084</td>
</tr>
<tr>
<td><strong> Keyring </strong></td>
<td> default</td>
</tr>
<tr>
<td><strong> Manager Version </strong></td>
<td> 1</td>
</tr>
<tr>
<td><strong> PxC Software Upgrade URL </strong></td>
<td> </td>
</tr>
<tr>
<td><strong> PxC Archive Version </strong></td>
<td> 3.4.3.2</td>
</tr>
<tr>
<td><strong> PxC MSI file size </strong></td>
<td> 10951680 bytes</td>
</tr>
<tr>
<td><strong> PxC BSX file size </strong></td>
<td> 9668837 bytes</td>
</tr>
<tr>
<td><strong> UA Software Upgrade URL </strong></td>
<td> </td>
</tr>
<tr>
<td><strong> UA Archive Version </strong></td>
<td> 4.7.1.188819</td>
</tr>
<tr>
<td><strong> UA32 MSI file size </strong></td>
<td> 4939776 bytes</td>
</tr>
<tr>
<td><strong> UA64 MSI file size </strong></td>
<td> 6496256 bytes</td>
</tr>
<tr>
<td><strong> UA OSX ZIP file size </strong></td>
<td> 11663933 bytes</td>
</tr>
<tr>
<td><strong> Update Interval </strong></td>
<td> 120 minutes</td>
</tr>
<tr>
<td><strong> Uninstall Password </strong></td>
<td> Disabled</td>
</tr>
<tr>
<td colspan='2'>Client Manager Web-filter configuration</td>
</tr>
<tr>
<td><strong> Activation </strong></td>
<td> disabled</td>
</tr>
<tr>
<td><strong> Safe Search </strong></td>
<td> disabled</td>
</tr>
<tr>
<td><strong> HTTPS Filtering </strong></td>
<td> enabled</td>
</tr>
<tr>
<td><strong> Default Action </strong></td>
<td> allow</td>
</tr>
<tr>
<td><strong> Failure Mode </strong></td>
<td> closed</td>
</tr>
<tr>
<td colspan='2'> Log Settings </td>
</tr>
<tr>
<td><strong> Activation </strong></td>
<td> enabled</td>
</tr>
<tr>
<td><strong> Log </strong></td>
<td> all</td>
</tr>
<tr>
<td><strong> Early upload </strong></td>
<td> 50 megabytes</td>
</tr>
<tr>
<td><strong> Periodic upload </strong></td>
<td> 24 hrs 0 minutes</td>
</tr>
<tr>
<td colspan='2'> Primary FTP Server </td>
</tr>
<tr>
<td><strong> Host </strong></td>
<td> </td>
</tr>
<tr>
<td><strong> Port </strong></td>
<td> 21</td>
</tr>
<tr>
<td><strong> Path </strong></td>
<td> </td>
</tr>
<tr>
<td colspan='2'> Alternate FTP Server </td>
</tr>
<tr>
<td><strong> Host </strong></td>
<td> </td>
</tr>
<tr>
<td><strong> Port </strong></td>
<td> 21</td>
</tr>
<tr>
<td><strong> Path </strong></td>
<td> </td>
</tr>
<tr>
<td colspan='2'> List of Selected Categories and Actions</td>
</tr>
<tr>
<td colspan='2'>Locations</td>
</tr>
<tr>
<td><strong> Webfilter </strong></td>
<td> Enabled</td>
</tr>
<tr>
<td colspan='2'> Locations List</td>
</tr>
</table>
</td>
</tr>
</table>
<p>
</body>
</html>
I call the following method in my C# code:
public void createPdf(string html, string dest)
{
HtmlConverter.ConvertToPdf(html, new FileStream(dest, FileMode.Create));
}
The converted PDF ignores most of the CSS directives. I tried this on iText's online converter and get the same results.
The HTML looks like this:
The converted PDF looks like this:
Any ideas why this is happening and what I can do to fix? Thanks!
I am facing an error in generating a proper PDF Document. the code i have, can generate a pdf document, it can download the document, but the issue is i cannot view the view the document. This is the Page I am trying to export to pdf.
Here is my code so far:
ASPX:
<asp:Button ID="btnDownload" CssClass="btn" runat="server" Text="Download Invoice" OnClick="btnDownload_Click" />
<asp:Panel ID="pnl" runat="server">
<div id="page-wrap">
<textarea id="header" style="height: 30px">PAYMENT DETAILS</textarea>
<div id="identity">
<textarea style="background-color: #F7F7F7;" readonly="readonly" id="address">My Name
My Street Address
Phone: 111-111-111</textarea>
<div id="logo">
<div id="logoctr">
</div>
<div id="logohelp">
<input id="imageloc" readonly="readonly" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo.png" alt="logo" />
</div>
</div>
<div style="clear: both"></div>
<div id="customer">
<textarea id="tbCustomer" readonly="readonly" runat="server"></textarea>
<table id="meta">
<tr>
<td class="meta-head">Payment ID</td>
<td>
<textarea readonly="readonly" runat="server" id="tbPID"></textarea></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td>
<textarea id="date" readonly="readonly" runat="server"></textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">
$
<asp:Label ID="lblTotal" runat="server" Text="Total"></asp:Label>
</div>
</td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Property Title</th>
<th>Description</th>
<th>Status</th>
<th>Invoiced By</th>
<th>Total Payment</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr">
<textarea readonly="readonly" id="tbTitle" runat="server"></textarea>
</div>
</td>
<td class="description">
<div contenteditable="true" id="tbDetail" class="blank" runat="server">
</div>
</td>
<td>
<textarea id="tbStatus" runat="server" readonly="readonly">PAID</textarea></td>
<td>
<textarea class="qty" readonly="readonly" id="tbInvoicedBy" runat="server"></textarea></td>
<td><span class="price">$
<asp:Label ID="tbTotal1" runat="server" Text="Total"></asp:Label></span></td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Vaccant</td>
<td class="total-value">
<div id="subtotal">$<asp:Label ID="lblVaccant" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Maintainance</td>
<td class="total-value">
<div id="total">$<asp:Label ID="lblMaintainance" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Property Insurance</td>
<td class="total-value">
<div id="Insurance">$<asp:Label ID="lblInsurance" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Dewa Bill</td>
<td class="total-value">
<div id="dewa">$<asp:Label ID="lblDewa" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Furnishing Cost</td>
<td class="total-value">
<div id="FurnishingCost">$<asp:Label ID="lblFurnishing" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Cleaning Fees</td>
<td class="total-value">
<div id="CleaningFees">$<asp:Label ID="lblCleaning" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">House Keeping</td>
<td class="total-value">
<div id="HouseKeeping">$<asp:Label ID="lblHouseKeeping" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Next Rent Due</td>
<td class="total-value">
<div id="paid">$<asp:Label ID="lblNextRent" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Rental Comission</td>
<td class="total-value">
<div id="RentalComission">$<asp:Label ID="lblRentalComission" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Credit Card Fees</td>
<td class="total-value">
<div id="CreditCardFees">$<asp:Label ID="lblCreditCardFees" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Pest Control</td>
<td class="total-value">
<div id="PestControl">$<asp:Label ID="lblPestControl" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Chillar Utilities</td>
<td class="total-value">
<div id="ChillarUtilities">$<asp:Label ID="lblChillarUtilities" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line">Du, etisilate wifi</td>
<td class="total-value">
<div id="DuEtisilatewifi">$<asp:Label ID="lblDuEtisilateWifi" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"></td>
<td colspan="2" class="total-line balance">Total Payment</td>
<td class="total-value balance">
<div class="due">$<asp:Label ID="lblTotal2" runat="server" Text=""></asp:Label></div>
</td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
<textarea readonly="readonly">These payment details are final and non negotiable.</textarea>
</div>
</div>
</asp:Panel>
ASPX.CS
public void ExportToPDF()
{
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment;filename=Panel.pdf");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
pnl.RenderControl(hw);
StringReader sr = new StringReader(sw.ToString());
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 100f, 0f);
HTMLWorker htmlparser = new HTMLWorker(pdfDoc);
PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
pdfDoc.Open();
htmlparser.Parse(sr);
pdfDoc.Close();
sw.Close();
htmlparser.Close();
Response.Write(pdfDoc);
Response.End();
}
also it says the HTMLWorker class is obsolete.
I have an HTML table that is generated for printing purposes. It has a Repeater that populates from a DataSet built from SQL; so the total row count is unknown.
The issue is when the page is printed, table rows that are supposed to be together are separated between the end of the previous page and the beginning of the next page. I need to insert a Page-Break to keep the table rows together. With most efforts made found from Google Searches, the table row for the "Standard" keeps getting pushed to the next page. Other methods just create 10+ blank pages first then the table with "Standard" on the next pages.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border-collapse: collapse;
}
.alignL {
text-align: left;
}
.alignC {
text-align: center;
}
.alignR {
text-align: right;
}
.border1 {
border-color: black;
border-style: groove;
border-width: 2px;
white-space: nowrap;
}
.border1L {
border-color: black;
border-style: groove;
border-width: 2px;
border-right: none;
height: 35px;
font-size: 12pt;
}
.border1R {
background-image: url(../_images/LgtGrey.png);
border-color: black;
border-style: groove;
border-width: 2px;
font-size: 12pt;
border-left: none;
}
.border2 {
border-color: black;
border-style: groove;
border-width: 2px;
border-bottom: none;
width: 60px;
}
.border3 {
border-color: black;
border-style: groove;
border-width: 2px;
border-top: none;
width: 60px;
}
.borderBottom {
border-bottom-color: black;
border-bottom-style: groove;
border-bottom-width: 2px;
}
.center {
margin-right: auto;
margin-left: auto;
width: 11in;
}
</style>
<style media="print" type="text/css">
#page {
size: landscape;
}
#media print {
thead {
display: table-header-group;
}
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="page">
<div class="center">
<table class="alignC" style="width: 90%">
<thead>
<tr>
<th> </th>
</tr>
<tr>
<th colspan="16" class="alignC">
<h3 class="alignC">Technical Evaluation Worksheet</h3>
</th>
</tr>
<tr>
<th> </th>
</tr>
<tr>
<th> </th>
<th colspan="2" class="border1L alignR">
<asp:Label ID="Label1" runat="server" Text="Model: " Font-Bold="true" /></th>
<th colspan="2" class="border1R alignC">
<asp:Label ID="lblModel" runat="server" /></th>
<th> </th>
<th colspan="2" class="border1L alignR">
<asp:Label ID="Label2" runat="server" Text="Serial #: " Font-Bold="true" /></th>
<th colspan="2" class="border1R alignC">
<asp:Label ID="lblSN" runat="server" /></th>
<th> </th>
<th colspan="2" class="border1L alignR">
<asp:Label ID="Label3" runat="server" Text="Program: " Font-Bold="true" /></th>
<th colspan="2" class="border1R alignC">
<asp:Label ID="lblProgram" runat="server" /></th>
</tr>
<tr>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="alignC">
<td></td>
<td colspan="4" class="border1">(FQA)</td>
<td></td>
<td colspan="4" class="border1">(MTF)</td>
<td></td>
<td colspan="4" class="border1">(FA)</td>
</tr>
<tr>
<td> </td>
<td class="border2 alignC">Record<br />
Error</td>
<td class="border2 alignC">Circle X</td>
<td class="border2 alignC">Red X</td>
<td class="border2 alignC">Diagonal</td>
<td> </td>
<td class="border2 alignC">Record<br />
Error</td>
<td class="border2 alignC">Circle X</td>
<td class="border2 alignC">Red X</td>
<td class="border2 alignC">Diagonal</td>
<td> </td>
<td class="border2 alignC">Record<br />
Error</td>
<td class="border2 alignC">Circle X</td>
<td class="border2 alignC">Red X</td>
<td class="border2 alignC">Diagonal</td>
<td rowspan="3" class="border2 alignC"><b>Quality<br />
Score</b></td>
</tr>
<tr>
<td valign="bottom" class="border1 alignR">Deduction</td>
<td valign="bottom" class="border3 alignC">-1%</td>
<td valign="bottom" class="border3 alignC">-2%</td>
<td valign="bottom" class="border3 alignC">-4%</td>
<td valign="bottom" class="border3 alignC">0%</td>
<td> </td>
<td valign="bottom" class="border3 alignC">-1%</td>
<td valign="bottom" class="border3 alignC">-2%</td>
<td valign="bottom" class="border3 alignC">-4%</td>
<td valign="bottom" class="border3 alignC">0%</td>
<td> </td>
<td valign="bottom" class="border3 alignC">-1%</td>
<td valign="bottom" class="border3 alignC">-2%</td>
<td valign="bottom" class="border3 alignC">-4%</td>
<td valign="bottom" class="border3 alignC">0%</td>
</tr>
<tr class="alignC">
<td class="border1 alignR"># of Incidents</td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFQA1" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFQA2" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFQA3" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFQA4" runat="server" /></td>
<td> </td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblMTF1" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblMTF2" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblMTF3" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblMTF4" runat="server" /></td>
<td> </td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFA1" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFA2" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFA3" runat="server" /></td>
<td class="border1" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFA4" runat="server" /></td>
</tr>
<tr class="alignC">
<td class="border1 alignR">Total</td>
<td class="border1">
<asp:Label ID="lblTFQA1" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFQA2" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFQA3" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFQA4" runat="server" Text="0%" /></td>
<td> </td>
<td class="border1">
<asp:Label ID="lblTMTF1" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTMTF2" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTMTF3" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTMTF4" runat="server" Text="0%" /></td>
<td> </td>
<td class="border1">
<asp:Label ID="lblTFA1" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFA2" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFA3" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTFA4" runat="server" Text="0%" /></td>
<td class="border1">
<asp:Label ID="lblTotal" runat="server" Font-Bold="true" /></td>
</tr>
<tr>
<td> </td>
</tr>
<asp:Repeater ID="Repeater" runat="server">
<ItemTemplate>
<tr>
<td class="borderBottom alignR"><b>Auditor:</b></td>
<td colspan="5" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblAuditor" runat="server" Text='<%# Eval("Auditor") %>' /></td>
<td class="borderBottom alignR"><b>CTR:</b></td>
<td colspan="5" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblCTR" runat="server" Text='<%# Eval("Mitigator") %>' /></td>
<td class="borderBottom alignR"><b>Date:</b></td>
<td colspan="3" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblDate" runat="server" Text='<%# Eval("Date", "{0:dd-MMM-yy}") %>' /></td>
</tr>
<tr>
<td class="borderBottom alignR" style="min-height: 30px"><b>Finding:</b></td>
<td colspan="15" class="borderBottom alignL" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblFinding" runat="server" Text='<%# Eval("Finding") %>' /></td>
</tr>
<tr>
<td class="borderBottom alignR"><b>Status:</b></td>
<td colspan="5" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblStatus" runat="server" Text='<%# Eval("FS") %>' /></td>
<td class="borderBottom alignR" colspan="2"><b>Location:</b></td>
<td colspan="8" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblLocation" runat="server" Text='<%# Eval("Location") %>' /></td>
</tr>
<tr>
<td class="borderBottom alignR"><b>Standard:</b></td>
<td colspan="15" class="borderBottom alignC" style="background-image: url(../_images/LgtGrey.png)">
<asp:Label ID="lblStandard" runat="server" Text='<%# Eval("Standard") %>' /></td>
</tr>
<tr>
<td> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
</asp:Content>
I am looking to convert a C# ASP.NET MVC 3 web application to a MVC 5. During this process I wish to create a more responsive table through the use of bootstrap. Would it be better to use the bootstrap grid system with using tags or would it be better to utilize a table? Is there a method to increase the number of columns in the grid system to a number greater than 12?
Note:
The new application will utilize bootstrap 3.2.0, jquery 1.11.1, mvc 5.2.0n razor 3.2.0.
The application must work correctly on IE8 (staying on jquery 1.X branch for this reason).
Below is an example table from the current application that I am unsure how to format to have a similar look in a responsive interface.
<table class="Assignmenttable">
<tbody>
<tr class="td">
<th id="Assignment_Title" colspan="4" style="width:20%"> </th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style="width:30%"> First</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style=" width:30%"> Second</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="4" style="width:11%"> Complete</th>
</tr>
<tr class="td">
<th rowspan="3" colspan="1" style="font-size: medium">Assignment</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Woot</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 1</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 2</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 3</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 4</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 5</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 6</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="4" rowspan="2" style="font-size: medium; min-width:12%">Task 7</th>
</tr>
<tr class="td">
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
</tr>
<tr class="td">
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th> P1 </th>
<th colspan=""> P2</th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
</tr>
<!-- This row is for each assignment entry-->
<tr class="td" style="height: 60px; max-height: 100px">
<td id="td" class="td" style="width: 350px">
Project 2
</td>
<td id="LongDelay" align="center">
<input id="item_Shipped" name="item.task1" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task1" type="hidden" value="false">
</td>
<td id="ProjectDate">11-Apr-13</td>
<td id="ProjectDate">17-Aug-13</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
05-Apr-14
</td>
<td id="ProjectDate">
04-Aug-14
</td>
<td id="LongDelay" align="center">
<input id="item_taskComplete" name="item.task" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task" type="hidden" value="false">
</td>
<td id="ProjectDate">18-Apr-14</td>
<td id="ProjectDate">06-Aug-14</td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
21-Feb-14
</td>
<td id="ProjectDate">
15-Apr-14
</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="SlightDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">28-Mar-14</td>
<td title="" id="ProjectDate">11-Apr-14</td>
<td id="LongDelay" align="center">
<input id="item_task6" name="item.task6" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task6" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">15-Apr-14</td>
<td title="" id="ProjectDate">28-Aug-14</td>
<td colspan="3"></td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input id="item_taskAccepted" name="item.taskAccepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskAccepted" type="hidden" value="false">
</td>
<td id="LongDelay" align="center">
<input id="item_task2Accepted" name="item.task2Accepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task2Accepted" type="hidden" value="false">
</td>
<td id="ProjectDate">30-Apr-14 </td>
<td id="ProjectDate">07-Aug-14</td>
</tr>
<tr style="height: 4px">
<th id="blank" class="blank" colspan="29"></th>
</tr>
</tbody>
</table>
Thanks in advance for any advice!
You can look into Bootstrap Tables.
Between choosing to use Tables or Grid, it entirely depends on what you're trying to show. Without proper examples, it's hard to really suggest which one is better to use.
If you want use Bootstrap's table for your code, it's as easy as just putting a .table class for your <table> element. Then, for it to properly scale you need to remove the inline styles attached to your <th>, <tr>, and <td> elements. Even the colspans.
i am trying to traverse an html document:
<body class="style_0">
<div>
<div class="style_1">Pending Test List</div>
<table style=" width: 100%;" id="AUTOGENBOOKMARK_4365445353431356880">
<col>
<col>
<tbody>
<tr>
<td style="vertical-align: baseline;">
<div class="style_4">Pending Test List</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_5">SOME AGENCY Laboratories, Inc.</div>
</td>
</tr>
</tbody>
</table>
<table class="style_6" style=" width: 4.531in;" id="AUTOGENBOOKMARK_5083738604442918131">
<col style=" width: 1in;">
<col class="style_7" style=" width: 0.75in;">
<col class="style_8" style=" width: 0.6in;">
<col style=" width: 0.75in;">
<col style=" width: 2.375in;">
<tbody>
<tr class="style_9" style=" height: 0.5in;">
<td style="vertical-align: middle;">
<div class="style_10">Report Range:</div>
</td>
<td style="vertical-align: middle;">
<div class="style_11">01/01/2012</div>
</td>
<td style="vertical-align: middle;">
<div class="style_12">through</div>
</td>
<td style="vertical-align: middle;">
<div class="style_13">01/31/2012</div>
</td>
<td style="vertical-align: middle;">
<div class="style_14">(by Date Entered)</div>
</td>
</tr>
</tbody>
</table>
<table class="style_15" style=" width: 100%;" id="AUTOGENBOOKMARK_7602283385844673591" iid="/526
(QuRs78576248:0)">
<col style=" width: 0.75in;">
<col style=" width: 1.25in;">
<col style=" width: 1in;">
<col style=" width: 1.5in;">
<col style=" width: 1.5in;">
<col style=" width: 1.5in;">
<col>
<thead>
<tr>
<td colspan="4" style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
</tr>
<tr>
<td style="vertical-align: baseline;">
<div class="style_16">Entered</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Spec. ID</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Batch/Pos.</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Test</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Client ID</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Client Name</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_16">Agency</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">1/30/12</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_19">ZZ324sdf</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">51446 / 75</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">HOLD_DE</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">234234</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">smith, john</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">PPPM-6P - SOME AGENCY</div>
</td>
</tr>
<tr>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">1/31/12</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_19">SFD3434</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">51668 / 17</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">HOLD_DE</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">FOY, EL</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">FOY, ALEX</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">someagency & Associates LLC</div>
</td>
</tr>
<tr>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">1/31/12</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_19">SFD3434</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">51668 / 25</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">HOLD_DE</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">JAMISON, PA</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">JAMISON, ROY</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">someagency & Associates LLC</div>
</td>
</tr>
<tr>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">1/31/12</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_19">SFD3434</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_18">51669 / 34</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">HOLD_DE</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">NEWMAN, SO</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">NEWMAN, ALEX</div>
</td>
<td class="style_17" style="vertical-align: baseline;">
<div class="style_20">someagency & Associates LLC</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="vertical-align: baseline;">
<div class="style_21">Total Tests:</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_22">4</div>
</td>
<td style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
<td style="vertical-align: baseline;"></td>
</tr>
</tfoot>
</table>
<table style=" width: 100%;" id="AUTOGENBOOKMARK_8507236727661888074">
<col>
<col>
<col>
<tbody>
<tr>
<td style="vertical-align: baseline;">
<div class="style_2">
<br>Feb 13, 2012 9:37 AM</div>
</td>
<td style="vertical-align: baseline;">
<div class="style_3">
<br>
<div style="text-align:center;">Page 1</div>
</div>
</td>
<td style="vertical-align: baseline;"></td>
</tr>
</tbody>
</table>
</div>
</body>
for this data:
so far i have this:
foreach (var row in htmlSnippet.DocumentNode.SelectNodes("//table[#class = 'style_15']/tbody/tr"))
{
foreach (var cell in row.SelectNodes("div[#class='*']"))
{
textBox1.Text = cell.InnerHtml.ToString();
}
}
however i am not returning anything!
this line is working:
//table[#class = 'style_15']/tbody/tr
but this does not return anthing:
("div[#class='*']"))
please let me know what i am doing wrong! i need help returning every piece of data as shown in the image (except for the field names)
The * is typically used for matching any element or attribute name, not any value. If you want to match all div elements having a class attribute with any value, just use #class.
foreach (var row in htmlSnippet.DocumentNode.SelectNodes("//table[#class = 'style_15']/tbody/tr/td"))
{
foreach (var cell in row.SelectNodes("div[#class]"))
{
textBox1.Text = cell.InnerHtml.ToString();
}
}
You probably want simply div[#class]—a div element that has a class attribute.
Oh, it's also worth noting that the HTML/XML sample you provided is not well-formed. I had to remove all the col elements, and close the br elements. Maybe, for C#, that's an issue... I know it is for XSL in general... not sure about XPath.
I don't have time to code up a C# example, but here's a simple XSL:
<xsl:template match="/">
<so>
<xsl:apply-templates select="//table[#class = 'style_15']/tbody/tr"/>
</so>
</xsl:template>
<xsl:template match="div[#class]">
<xsl:copy-of select="."/>
</xsl:template>
I get this output:
<so>
<div class="style_18">1/30/12</div>
<div class="style_19">ZZ324sdf</div>
<div class="style_18">51446 / 75</div>
<div class="style_20">HOLD_DE</div>
<div class="style_20">234234</div>
<div class="style_20">smith, john</div>
<div class="style_20">PPPM-6P - SOME AGENCY</div>
<div class="style_18">1/31/12</div>
<div class="style_19">SFD3434</div>
<div class="style_18">51668 / 17</div>
<div class="style_20">HOLD_DE</div>
<div class="style_20">FOY, EL</div>
<div class="style_20">FOY, ALEX</div>
<div class="style_20">someagency & Associates LLC</div>
<div class="style_18">1/31/12</div>
<div class="style_19">SFD3434</div>
<div class="style_18">51668 / 25</div>
<div class="style_20">HOLD_DE</div>
<div class="style_20">JAMISON, PA</div>
<div class="style_20">JAMISON, ROY</div>
<div class="style_20">someagency & Associates LLC</div>
<div class="style_18">1/31/12</div>
<div class="style_19">SFD3434</div>
<div class="style_18">51669 / 34</div>
<div class="style_20">HOLD_DE</div>
<div class="style_20">NEWMAN, SO</div>
<div class="style_20">NEWMAN, ALEX</div>
<div class="style_20">someagency & Associates LLC</div>
</so>
This is just an intermediate output to show that the XPath is working correctly.
Hope this helps.