I have a string (HTML) being posted to server side and then it is validated using HTMLAgility pack. In the HTML there is an unclosed colgroup tag.
After sanitizing, the closing colgroup tag appears but right between closing "tbody" and "table" tag
BEFORE:
<table width="3265" class="mce-item-table" style="width: 2452pt; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">
<colgroup><col width="80" style="width: 60pt;">
<col width="245" style="width: 184pt;" span="13"> <!-- MISSING COLGROUP tag-->
<tbody><tr height="20" style="height: 15pt;">
<td width="80" height="20" style="width: 60pt; height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">31109173</span></td>
<td width="245" style="width: 184pt; font-family: Arial; font-size: 9pt;">31109173</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 09,2017 9:54 AM</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 08,2017 5:21 PM</td>
</tr>
<tr height="20" style="height: 15pt;">
<td height="20" style="height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">30933775</span></td>
<td style="font-family: Arial; font-size: 9pt;">30933775</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">May 09,2017 9:50 AM</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">Apr 28,2017 6:22 PM</td>
</tr>
</tbody></table>
AFTER:
<table width="3265" class="mce-item-table" style="width: 2452pt; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">
<colgroup><col width="80" style="width: 60pt;">
<col width="245" style="width: 184pt;" span="13">
<tbody><tr height="20" style="height: 15pt;">
<td width="80" height="20" style="width: 60pt; height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">31109173</span></td>
<td width="245" style="width: 184pt; font-family: Arial; font-size: 9pt;">31109173</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 09,2017 9:54 AM</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 08,2017 5:21 PM</td>
</tr>
<tr height="20" style="height: 15pt;">
<td height="20" style="height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">30933775</span></td>
<td style="font-family: Arial; font-size: 9pt;">30933775</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">May 09,2017 9:50 AM</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">Apr 28,2017 6:22 PM</td>
</tr>
</tbody></colgroup></table>
<!-- ^^ </colgroup> has appeared above-->
I tried setting "OptionFixNestedTags" flag to true. I still get the same result.
I tried various options from HTMLAgility pack and setting them true. This didn't work.
OptionFixNestedTags = true;
OptionAutoCloseOnEnd = true;
There is a nice Nuget package which sanitizes the html. The problem which I faced was tackled here -> HtmlSanitizer
Hope this helps.
Related
I'm new to this field.
I have a table in an Excel file (xlsx). Using C#, I save it as html:
`worksheet.SaveToHtml("the html file path destination");`
Then I read the html file:
`String htmlCode = File.ReadAllText("the html file path", Encoding.Default);`
Then I just put it to the email body like this:
mail.Body = "<BR/><font size=2 ...." + htmlCode + ".... </body>";
The table is supposed to look this way:
But when the email is opened in Outlook, it looks like this:
The columns are significantly smaller in width.
How to fix this? I don't want to directly code the html in the C#.
UPDATE
This is how the html using WorkSheet.SaveToHtml looks like. I need to find what to change/add to make this table look right in Outlook.
<html>
<head>
<style type="text/css">table{border-collapse:collapse;table-layout:fixed;border-spacing:0;empty-cells:show}
.X0{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X1{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-right-style:solid;border-right-width:2;border-right-color:000000;border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X2{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X3{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-style:solid;border-bottom-width:2;border-bottom-color:000000;border-top-color:000000;border-top-style:solid;border-top-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X4{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X5{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X6{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(255,255,255);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;vertical-align:center;text-align:general;word-wrap:break-word;height:21;}
.X7{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(255,255,255);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;vertical-align:center;text-align:right;word-wrap:break-word;height:21;}</style>
</head>
<body>
<table cellspacing="0">
<Col width="167" />
<Col width="109" />
<Col width="104" />
<Col width="91" />
<Col width="85" />
<Col width="65" />
<tr>
<td class="X0">
<div style="width:163px !Important;width:167px;" />
</td>
<td COLSPAN="2" class="X1">11 11 11</td>
<td ROWSPAN="2" class="X3">11 11</td>
<td COLSPAN="2" class="X1">11 11</td>
</tr>
<tr>
<td class="X4">
<div style="width:163px !Important;width:167px;" />
</td>
<td class="X5">11</td>
<td class="X5">11</td>
<td class="X5">11</td>
<td class="X5">11</td>
</tr>
<tr>
<td class="X6">a aa</td>
<td class="X7">b</td>
<td class="X7">b</td>
<td class="X7">b</td>
<td class="X7">b</td>
<td class="X7">b</td>
</tr>
<tr>
<td class="X6">c cc ccc</td>
<td class="X7">d</td>
<td class="X7">d</td>
<td class="X7">d</td>
<td class="X7">d</td>
<td class="X7">d</td>
</tr>
<tr>
<td class="X6">e ee eee</td>
<td class="X7">f</td>
<td class="X7">f</td>
<td class="X7">f</td>
<td class="X7">1f</td>
<td class="X7">f</td>
</tr>
</table>
</body>
</html>
Thanks for all the comments.
I finally got the desired table in Outlook using Save As in Excel. Save as type Web Page (htm, html). Both htm and html work.
But by default the table align was center. I just need to change it to left and everything's perfect.
Here's the html table that renders correctly in both Outlook and WLM (I haven't tested it in other email)
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 14">
<link rel=File-List href="tabel_transaksi_saham_copy_files/filelist.xml">
<style id="tabel_transaksi_saham_copy_879_Styles">
<!--table {
mso-displayed-decimal-separator: "\.";
mso-displayed-thousand-separator: "\,";
}
.xl15879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: black;
font-size: 11.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: general;
vertical-align: bottom;
mso-background-source: auto;
mso-pattern: auto;
white-space: nowrap;
}
.xl63879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border: 1.0pt solid windowtext;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
.xl64879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border-top: none;
border-right: 1.0pt solid windowtext;
border-bottom: 1.0pt solid windowtext;
border-left: 1.0pt solid windowtext;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
.xl65879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border-top: none;
border-right: 1.0pt solid windowtext;
border-bottom: 1.0pt solid windowtext;
border-left: none;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
.xl66879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: general;
vertical-align: middle;
border-top: none;
border-right: 1.0pt solid windowtext;
border-bottom: 1.0pt solid windowtext;
border-left: 1.0pt solid windowtext;
mso-background-source: auto;
mso-pattern: auto;
white-space: normal;
}
.xl67879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border-top: 1.0pt solid windowtext;
border-right: none;
border-bottom: 1.0pt solid windowtext;
border-left: 1.0pt solid windowtext;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
.xl68879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border-top: 1.0pt solid windowtext;
border-right: 1.0pt solid windowtext;
border-bottom: 1.0pt solid windowtext;
border-left: none;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
.xl69879 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: #002060;
font-size: 11.0pt;
font-weight: 700;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
border-top: 1.0pt solid windowtext;
border-right: 1.0pt solid windowtext;
border-bottom: none;
border-left: 1.0pt solid windowtext;
background: #DAEEF3;
mso-pattern: black none;
white-space: normal;
}
-->
</style>
</head>
<body>
<!--[if !excel]> <![endif]-->
<!--The following information was generated by Microsoft Excel's Publish as Web
Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->
<div id="tabel_transaksi_saham_copy_879" align=left x:publishsource="Excel">
<table border=0 cellpadding=0 cellspacing=0 width=615 style='border-collapse:
collapse;table-layout:fixed;width:462pt'>
<col width=166 style='mso-width-source:userset;mso-width-alt:6070;width:125pt'>
<col width=108 style='mso-width-source:userset;mso-width-alt:3949;width:81pt'>
<col width=103 style='mso-width-source:userset;mso-width-alt:3766;width:77pt'>
<col width=90 style='mso-width-source:userset;mso-width-alt:3291;width:68pt'>
<col width=84 style='mso-width-source:userset;mso-width-alt:3072;width:63pt'>
<col width=64 style='width:48pt'>
<tr height=21 style='height:15.75pt'>
<td height=21 class=xl63879 width=166 style='height:15.75pt;width:125pt'> </td>
<td colspan=2 class=xl67879 width=211 style='border-right:1.0pt solid black;
border-left:none;width:158pt'>11</td>
<td rowspan=2 class=xl69879 width=90 style='border-bottom:1.0pt solid black;
width:68pt'>11</td>
<td colspan=2 class=xl67879 width=148 style='border-right:1.0pt solid black;
border-left:none;width:158pt'>11</td>
</tr>
<tr height=21 style='height:15.75pt'>
<td height=21 class=xl64879 width=166 style='height:15.75pt;width:125pt'> </td>
<td class=xl65879 width=108 style='width:81pt'>11</td>
<td class=xl65879 width=103 style='width:77pt'>11</td>
<td class=xl65879 width=84 style='width:63pt'>11</td>
<td class=xl65879 width=64 style='width:48pt'>11</td>
</tr>
<tr height=21 style='height:15.75pt'>
<td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
width:125pt'>11</td>
<td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
<td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
<td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
<td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
<td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
</tr>
<tr height=21 style='mso-height-source:userset;height:15.75pt'>
<td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
width:125pt'>11</td>
<td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
<td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
<td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
<td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
<td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
</tr>
<tr height=21 style='height:15.75pt'>
<td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
width:125pt'>11</td>
<td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
<td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
<td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
<td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
<td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
</tr>
<![if supportMisalignedColumns]>
<tr height=0 style='display:none'>
<td width=166 style='width:125pt'></td>
<td width=108 style='width:81pt'></td>
<td width=103 style='width:77pt'></td>
<td width=90 style='width:68pt'></td>
<td width=84 style='width:63pt'></td>
<td width=64 style='width:48pt'></td>
</tr>
<![endif]>
</table>
</div>
<!----------------------------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>
</html>
I tried looking for similar questions but couldn't find any. My aspx file looks something like this
<div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
Now whenever there are too many columns, the width gets fixed to 100% even though I don't have a max-width property. And the text in the cell ends up in multiple lines. I want it to horizontally overflow out of the div instead.
Edit: Looks like adding this ended up fixing it.
td {
white-space: nowrap;
}
Simple html snippet to demonstrate -
div {
width: 10%;
overflow: auto;
}
<div>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
EDIT -
Your updated code would look like -
<div align="center" style="height: 350px; overflow: auto; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
i am making a project in which i am stuck on the selected index changed event of ajax tool kit combo box. what i wanted is that when i select the student name in combobox(studentname) i get the values of other columns from a database into the textboxes with out using any button...i have done it in c# windows form but can't done it in asp.net.
my code is `
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
namespace Final_Project
{
public partial class Teacher_Mangement_page : System.Web.UI.Page
{
SqlConnection con = new SqlConnection();
string teachername;
protected void Page_Load(object sender, EventArgs e)
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["studentdatastring"].ConnectionString;
teachername = "teacher1";//Session["name"].ToString();
if (!IsPostBack)
{
cb();
MultiView1.ActiveViewIndex = 0;
}
}
private void cb()
{
ComboBox1.Items.Clear();
ComboBox2.Items.Clear();
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select studentname,subject from academictable where teachername='"+teachername+"'";
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
ComboBox1.Items.Add(dr["studentname"].ToString());
ComboBox2.Items.Add(dr["subject"].ToString());
}
con.Close();
}
protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select * from academictable where studentname='" + ComboBox1.Text + "' and subject='"+ComboBox2.Text+"' ";
SqlDataReader rd = cmd.ExecuteReader();
while (rd.Read())
{
qt1.Text = rd["quiz1"].ToString();
qt2.Text = rd["quiz2"].ToString();
qt3.Text = rd["quiz3"].ToString();
qt4.Text = rd["quiz4"].ToString();
ast1.Text = rd["assignment1"].ToString();
ast2.Text = rd["assignment2"].ToString();
prot.Text = rd["project"].ToString();
mt.Text = rd["mid"].ToString();
ft.Text = rd["final"].ToString();
}
rd.Close();
con.Close();
}
string subject;
protected void Button3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
subject = ComboBox2.Text;
}
protected void Button5_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
}
}`
and my html code is `
<!DOCTYPE html>
<html>
<head runat="server">
<title>Bootstrap demo</title>
<link href="bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1" />
<style type="text/css">
.style3
{
text-align: center;
}
.style5
{
width: 582px;
text-align: right;
}
.style6
{
text-align: center;
}
.style7
{
width: 468px;
text-align: right;
}
h1
{ color:Aqua;
font-style:italic;
font-family:Broadway;
}
h2
{ color:Highlight;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<center><h1>STUDENT PORTAL</h1></center>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="select_subject" runat="server">
<table class="w-100">
<tr>
<td class="style6" colspan="2">
<h2>SUBJECT SELECTION</h2></td>
</tr>
<tr>
<td class="style7">
<h4>Subject:</h4></td>
<td>
<ajaxToolkit:ComboBox ID="ComboBox2" runat="server"
AutoCompleteMode="SuggestAppend" Width="300px">
</ajaxToolkit:ComboBox>
</td>
</tr>
<tr>
<td class="style6" colspan="2">
<asp:Button ID="Button2" runat="server" Text="Show Attendance" Width="162px" />
<ajaxToolkit:RoundedCornersExtender ID="Button2_RoundedCornersExtender"
runat="server" BehaviorID="Button2_RoundedCornersExtender"
TargetControlID="Button2" />
<asp:Button ID="Button3" runat="server" Text="Show Academic Details"
Width="178px" onclick="Button3_Click" /><ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1"
runat="server" TargetControlID="Button3"/>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Academic_details" runat="server">
<table class="w-100">
<tr>
<td class="text-center" colspan="2">
<h2>ACADEMIC DETAILS</h2></td>
</tr>
<tr>
<td class="style5">
Student Name:</td>
<td>
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
AutoCompleteMode="SuggestAppend"
Width="300px" AutoPostBack="True">
</ajaxToolkit:ComboBox>
</td>
</tr>
<tr>
<td class="style5">
Quiz 1 Marks:</td>
<td>
<asp:TextBox ID="qt1" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Quiz 2 Marks:</td>
<td>
<asp:TextBox ID="qt2" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Quiz 3 Marks:</td>
<td>
<asp:TextBox ID="qt3" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Quiz 4 Marks:</td>
<td>
<asp:TextBox ID="qt4" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Assignment 1 Marks:</td>
<td>
<asp:TextBox ID="ast1" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Assignment 2 Marks:</td>
<td>
<asp:TextBox ID="ast2" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Presentation/Project Marks:</td>
<td>
<asp:TextBox ID="prot" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Sessional Marks:</td>
<td>
<asp:TextBox ID="sest" runat="server" ReadOnly="True" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Mid-Term Marks:</td>
<td>
<asp:TextBox ID="mt" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
Final-Term Marks:</td>
<td>
<asp:TextBox ID="ft" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
<em style="font-weight: bold; font-style: normal; color: rgb(106, 106, 106); font-family: arial, sans-serif; font-size: small; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
Grade Point Average</em><span
style="color: rgb(84, 84, 84); font-family: arial, sans-serif; font-size: small; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>(</span><wbr
style="color: rgb(84, 84, 84); font-family: arial, sans-serif; font-size: small; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><em
style="font-weight: bold; font-style: normal; color: rgb(106, 106, 106); font-family: arial, sans-serif; font-size: small; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">GPA</em><span
style="color: rgb(84, 84, 84); font-family: arial, sans-serif; font-size: small; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">)<span> :</span></span></wbr>
</td>
<td>
<asp:TextBox ID="gpat" runat="server" ReadOnly="True" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3" colspan="2">
<asp:Button ID="Button4" runat="server" Text="Button" Width="162px" />
<ajaxToolkit:RoundedCornersExtender ID="Button4_RoundedCornersExtender"
runat="server" BehaviorID="Button1_RoundedCornersExtender"
TargetControlID="Button4" />
<asp:Button ID="Button5" runat="server" Text="Back" Width="162px"
onclick="Button5_Click" />
<ajaxToolkit:RoundedCornersExtender ID="Button5_RoundedCornersExtender"
runat="server" BehaviorID="Button5_RoundedCornersExtender"
TargetControlID="Button5" />
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
`
A HTML file is generated by Android MobileBiz Pro invoice app. I'm trying to make software for print HTML based invoice via receipt printer
I need to save necessary information of HTML file to string variable as mentioned below. I tried using IndexOf method. but it's not working for me. How can I get this information using visual c#?
string subtotal = 2,976.00;
string total = 2,976.00;
string payment= 2,760.00;
string balance= 216.00;
This is an example of the HTML code:
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
This is a complete HTML code of HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 8pt;
padding: 0 50pt 0 50pt;
}
table td, table th, table.sales th, table td.footer-text {
font-size: 8pt;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
color:chocolate;
text-transform:uppercase;
font-size: inherit;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:0px;
margin-bottom:0px;
color:chocolate;
text-transform:uppercase;
font-size: 1.3em;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
}
table.sales td {
padding: 4px 10px 4px 10px;
}
table.sales th {
padding: 5px 10px 5px 10px;
background-color:#CCC;
}
tr.saleline td {
border-bottom-color:chocolate;
border-bottom-width: 1pt;
border-bottom-style: solid;
vertical-align: top;
}
.signature {
display: none;
}
.horizontal-line {
border: 0;
height: 4pt;
color:chocolate;
background-color: chocolate;
}
.total {
font-weight:bold;
font-size:1.1em;
background-color:#CCC;
}
.block1 {
text-align:left;
vertical-align:bottom
}
.block2 {
text-align:right;
vertical-align:bottom
}
.block3 {
text-align:left;
vertical-align:top;
}
.block4 {
text-align:left;
vertical-align:top;
}
.block5 {
text-align:right;
vertical-align:bottom;
}
.block6 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block7 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block8 {
text-align:left;
vertical-align:bottom;
}
.block9 {
text-align:center;
vertical-align:bottom;
}
.block10 {
text-align:right;
vertical-align:bottom;
}
.block11 {
text-align:left;
padding: 25px 0 15px 0;
}
.extracols {
border-style:solid;
border-color:gray;
}
table.extracols {
border-top-width: 1pt;
border-right-width: 0;
border-bottom-width: 1pt;
border-left-width: 1pt;
border-collapse:collapse;
margin: 0 0 15pt 0;
}
table.extracols th {
padding: 5px 10px 5px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#CCC;
}
table.extracols td {
padding: 4px 10px 4px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#FFF;
}
#footer {
margin-top: 35px;
}
.footer-text {
font-size: inherit;
font-size: 0.97em
}
</style>
</head>
<body style="padding: 20 20 20 20">
<table width="100%">
<tr>
<td style="padding-bottom:20px"><table width="100%">
<tr>
<td style="text-align:left;"></td>
<td class="block2" align="right"><h3>Y.P.Brothers</h3>
No:55/B,<br/>Samagipura,<br/>Sewanagala.
<br/>077-6977139
<br/>mecduino#gmail.com
<br/>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="horizontal-line"/></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td style="padding:10px 0 20px 0;"><table width="100%">
<tr>
<td width="33%" class="block3"><strong>Bill To</strong><br />
ANUSHA SURIYA<br/>
</td>
<td class="block4"><strong></strong><br />
</td>
<td class="block5" align="right"><h1>invoice #1</h1>
<b>Date</b>: Oct 9, 2015
<br/><b>Due Date</b>: Oct 9, 2015
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><table width="100%" class="sales">
<!-- Headers -->
<tr>
<th align="center">Qty</th> <th align="center">Item</th> <th align="right">Price</th> <th align="right">Amount</th>
</tr>
<!-- Rows -->
<tr class="saleline"> <td align="left">12</td> <td align="left">helaligth 35/=</td> <td align="right">35.00</td> <td align="right">420.00</td> </tr>
<tr class="saleline"> <td align="left">12</td> <td align="left">200p CR SR 195/=</td> <td align="right">195.00</td> <td align="right">2,340.00</td> </tr>
<tr class="saleline"> <td align="left">36</td> <td align="left">Sunlight 35g</td> <td align="right">6.00</td> <td align="right">216.00</td> </tr>
<!-- Totals -->
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" style="margin-top:30px">
<tr>
<td width="50%" class="block6"><h2></h2>
</td>
<td width="50%" class="block7" align="right"><h2></h2>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table class="block11" width="100%">
<tr>
<td><table></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="signature">
<table border="0" cellspacing="2" cellpadding="2" align="left">
<tr>
<td style="padding-bottom:30px"></td>
</tr>
<tr>
<td><b>Signed by:</b>
<br/><b>Date:</b>
<br/><b>Signature:</b><br/></td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%" border="0" cellpadding="2">
<tr>
<td align="center"><span class="footer-text">Thank you for your business.</span></td>
</tr>
</table>
</div>
</body>
</html>
You need an html parser, try this one http://htmlagilitypack.codeplex.com/
Load page into HtmlDocument
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument htmlDocument = htmlWeb.Load("url");
Get table with specified Id
HtmlNode table = htmlDocument.DocumentNode.Descendants("table").SingleOrDefault(x => x.Id == "tableId");
Loop through nodes to find values
foreach(HtmlNode child in table.ChildNodes)
{
if (child.NodeType != HtmlNodeType.Text)
{
Console.WriteLine(child.Name);
}
}
More you can check here http://www.codeproject.com/Articles/691119/Html-Agility-Pack-Massive-information-extraction-f
You have to use parseHTML function of jquery and then loop through each element to get the values. Below is the working example (It can be more refined as per your need)
$(document).ready(function () {
var str = '<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>';
var html = $.parseHTML(str);
$.each(html, function (index, element) {
if ($(this).find("td:first").html() == "Subtotal")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first b").html() == "TOTAL")
console.log($(this).find("td:last b").html());
else if ($(this).find("td:first").html() == "Less Payment")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first strong").html() == "Balance Due")
console.log($(this).find("td:last").html());
});
});
I would like to set html body to iframe with this scenario :
<ItemTemplate>
<div class="thumb" align="center" style="height:150px;width:130px">
<asp:Panel ID="Panel2" runat="server" Height="150px" Width="130px">
<table width="40%" align="center">
<tr>
<td>
<iframe style="overflow:hidden;height:140px;width:120px" src="data:text/html;charset=utf-8,escape(<%#Eval("TemplateBody")%>)"></iframe>
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="Panel2"
PopupControlID="Panel1"
DynamicContextKey='<%# Eval("Id") %>'
DynamicControlID="Panel1"
DynamicServiceMethod="GetDynamicContent"
Position="Right">
</ajaxToolkit:PopupControlExtender>
</div>
<table width="145px" align="left" style="border-color:Black;border-style:solid;border-width:1px;height:50px">
<tr>
<td align="center">
<table>
<tr>
<td><asp:CheckBox ID="ChkSelect" runat="server"/></td>
<td> </td>
<td><asp:LinkButton ID="LinkButton2" runat="server" CssClass="quicklink"
Text='<%# Eval("TemplateName").ToString().Length > 12 ? Eval("TemplateName").ToString().Substring(0,12)+"..." :Eval("TemplateName") %>' CommandName="ViewTemplate"
ToolTip ='<%# Eval("TemplateName")%>' CommandArgument='<%# Eval("Id") %>'></asp:LinkButton>
<br/>
<asp:Label ID="Label2" runat="server" CssClass="normaltext"
Text='<%# DataBinder.Eval(Container.DataItem, "CreatedDate", "{0:dd/MM/yyyy}") %>'
ToolTip='<%# Bind("CreatedDate","{0:F}") %>'></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
<asp:Label Visible="false" runat="server" ID="lblNoRecord" Text="No Record Found." ForeColor="Red"></asp:Label>
</ItemTemplate>
i just want to show html preview with fixed height and with. here this tag is in data list control. but html view not rendered.
Is this correct way to assign html content to iframe src attribute ????
Update
here is data comes from data base :
<p>
</p>
<p>
<title></title>
</p>
<table cellpadding='0' cellspacing='0' style='width: 100%;' width='100%'>
<tbody>
<tr>
<td style='vertical-align: top; text-align: center; padding-top: 20px; padding-bottom: 20px;'>
<table cellpadding='0' cellspacing='0' style='width: 700px;'>
<tbody>
<tr>
<td style='height: 30px; vertical-align: middle; text-align: left; border-top-color: #eeeeee; border-top-width: 3px; border-top-style: solid; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%; background-color: #ffffff;'>
<tbody>
<tr>
<td style='width: 60%; vertical-align: middle; text-align: left; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<div>
<span style='vertical-align: middle;'><img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/logo.gif' style='vertical-align: middle;' /></span><span style='vertical-align: middle; font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 20px; color: #000000; margin-left: 5px;'>##UserOrganisation##</span></div>
</td>
<td style='width: 40%; vertical-align: middle; text-align: right; padding-right: 10px; background-color: #ffffff;'>
<div style='font-size: 16px; color: #000000; font-family: 'trebuchet ms', verdana, 'ms sans serif';'>
Call Now: ##UserPhone##</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; border-color: #e7e7e7 #d5d5d5 #cbcbcb #e7e7e7; border-width: 1px; border-style: solid; background-color: #f6f6f6;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 40%; text-align: left; vertical-align: middle; padding: 20px;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 30px; font-weight: bold; color: #323334; line-height: 30px; white-space: normal;'>
RISK-FREE</div>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 20px; font-weight: bold; color: #000000; line-height: 20px; white-space: normal;'>
TRADING OPTIONS</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #757575; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px;'>
<span style='vertical-align: middle; white-space: normal;'><a href='#' target='_blank'><img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/btn_start_now.gif' style='vertical-align: middle; border: 0px;' /></a></span></div>
</td>
<td style='width: 60%; text-align: center; vertical-align: bottom; padding-top: 10px; padding-right: 10px; padding-left: 10px;'>
<div>
<img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/head_img.gif' style='vertical-align: middle;' /></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: middle; text-align: right; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 25%; vertical-align: top; text-align: left; padding: 8px; border-bottom-color: #cbcbcb; border-bottom-width: 1px; border-bottom-style: solid; border-top-color: #e7e7e7; border-top-width: 1px; border-top-style: solid; border-left-color: #e7e7e7; border-left-width: 1px; border-left-style: solid; background-color: #17c1fc;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 18px; font-weight: bold; color: #ffffff; line-height: 18px; white-space: normal;'>
Hghlight Note:</div>
</td>
<td style='width: 75%; vertical-align: top; text-align: left; padding: 8px; border-bottom-color: #cbcbcb; border-bottom-width: 1px; border-bottom-style: solid; border-right-color: #d5d5d5; border-right-width: 1px; border-right-style: solid; border-top-color: #e7e7e7; border-top-width: 1px; border-top-style: solid; background-color: #f7f7f7;'>
<div style='font-family: verdana, 'ms sans-serif'; font-size: 14px; color: #000000; line-height: 14px; white-space: normal;'>
Insert here highlight note.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='vertical-align: top; text-align: left; padding-bottom: 10px;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 65%; vertical-align: top; text-align: left; padding-right: 5px;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 14px; font-weight: bold; color: #2b2b2b; line-height: 14px; white-space: normal;'>
Dear ##FirstName## ##LastName##,</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Thank You,</div>
<div style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Team ##UserOrganisation##</div>
</td>
<td style='width: 35%; vertical-align: top; text-align: left; padding-left: 5px; padding-right: 5px;'>
<div style='white-space: normal;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='text-align: left; vertical-align: top; padding: 8px; background-color: #17c1fc;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 16px; color: #ffffff; font-weight: bold; line-height: 16px; white-space: normal;'>
Other Services</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; font-weight: bold; white-space: normal;'>
Heading-1</div>
<div style='margin-top: 4px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='text-align: right; margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
<a href='#' style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>Read More >></a></div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; font-weight: bold; white-space: normal;'>
Heading-1</div>
<div style='margin-top: 4px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='text-align: right; margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
<a href='#' style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>Read More >></a></div>
</td>
</tr>
<tr>
<td style='vertical-align: middle; text-align: center; height: 10px;'>
<img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/spacer.gif' /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; border-top-color: #eeeeee; border-top-width: 3px; border-top-style: solid; padding: 10px; background-color: #ffffff;'>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px; margin-top: 3px;'>
<span><b>Address: </b>##UserAddress1##, ##UserAddress2##, ##UserCity##-##UserPostalCode##</span></div>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px;'>
<span><b>Phone: </b>##UserPhone## | <b>Fax: </b>##UserFax##</span></div>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px;'>
<span><b>Email: </b><a href='mailto:##UserEmailAddress##' style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif';' target='_blank'>##UserEmailAddress##</a> | <b>Visit us at: </b><a href='#' style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif';' target='_blank'>http://www.yourdomain.com</a></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>
</p>
please help me...
You need to make sure the output of <%#Eval("TemplateBody")%> is html encoded.
You also need to be aware that some browsers don't support Data URIs.
You can check a similar question here