Web and Mobile Apps Codeware: html

Showing posts with label html. Show all posts

Monday, July 28, 2014

Dynamically creating html controls like textbox, labels using JavaScript

HI in this post i will show how to create html controls dynamically using JavaScript:

Below is the sample code :

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function load() {

var t = document.createElement("table"),
tb = document.createElement("tbody"),
tr = document.createElement("tr"),
td = document.createElement("td");

t.style.width = "100%";
t.style.borderCollapse = 'collapse';

var itemLabel = document.createElement("Label");
itemLabel.innerHTML = "Enter Name";
itemLabel.htmlFor = "txtName";
td.appendChild(itemLabel);
tr.appendChild(td);
tb.appendChild(tr);
t.appendChild(tb);

document.getElementById("divContent").appendChild(t);

var t1 = document.createElement("table"),
tb1 = document.createElement("tbody"),
tr1 = document.createElement("tr"),
td1 = document.createElement("td");

t1.style.width = "100%";
t1.style.borderCollapse = 'collapse';

var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Name");
element.setAttribute("style", "width:200px");
element.setAttribute("id", "txtName");

td1.appendChild(element);
tr1.appendChild(td1);
tb1.appendChild(tr1);
t1.appendChild(tb1);

document.getElementById("divContent").appendChild(t1);

}
</script>
</head>
<body onload="load()">
<form id="form1" runat="server">
<div id="divContent"></div>
</form>
</body>
</html>

Output:

Monday, March 31, 2014

Create a Responsive Website Using HTML5 and CSS3

Tutorial : Creating a responsive website using HTML5 and CSS3.

Thursday, December 5, 2013

Generate PDF from a html string using ItextSharp in asp.net (c#)

In this post i will show how to create a pdf file from a html string using itextsharp in asp.net.

Below is the code to do this (There may be redundant code in the given sample below. So you can edit the below code as per your needs)

//creating html:

public void ViewReportPDF(Int32 EmpID)
{
SqlCommand cmd = new SqlCommand("USP_GET_EMP_DATA");
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@empid", EMPID);
DataSet ds = GetDataSet(cmd);

int count = 0;
string s1 = " <table border='1' width='100%'>";

string s2 = "";

for (int j = 0; j <= ds.Tables.Count - 1; j++)
{
for (int i = 0; i <= ds.Tables[j].Rows.Count - 1; i++)
{
for (int k = 0; k <= ds.Tables[j].Columns.Count - 1; k++)
{
if (count == 2)
{
count = 0;
}

if (count == 0)
{
s2 = s2 + "<tr>";
}

s2 = s2 +
"<td>" + ds.Tables[j].Columns[k].ColumnName + "</td>" +
"<td>" + ds.Tables[j].Rows[i][k] + "</td>";

count++;

if (count == 2)
{
s2 = s2 + "</tr>";
}
}
}
}

string s3 = "</table>";

string htmlText1 = s1 + s2 + s3;
HTMLToPdf(htmlText1);
}

//creating pdf using itextsharp and saving it in the application folder:

public void HTMLToPdf(string HTML)
{
Document document = new Document(PageSize.A4);
PdfWriter.GetInstance(document, new FileStream(Request.PhysicalApplicationPath + "\\EMP.pdf", FileMode.Create));
document.Open();
iTextSharp.text.html.simpleparser.StyleSheet styles = new iTextSharp.text.html.simpleparser.StyleSheet();
iTextSharp.text.html.simpleparser.HTMLWorker hw = new iTextSharp.text.html.simpleparser.HTMLWorker(document);
hw.Parse(new StringReader(HTML));
document.Close();
string ss = Request.PhysicalApplicationPath.ToString() + "\\EMP.pdf";
ShowPdf(ss);
}

//showing pdf from folder where it was saved.

private void ShowPdf(string s)
{
string fileName = Path.GetFileNameWithoutExtension(s);
Response.ContentType = "application/pdf";
Response.AppendHeader("Content-Disposition", "attachment;filename=" + "EMP" + ".pdf");
Response.TransmitFile(Request.PhysicalApplicationPath.ToString() + "\\" + fileName + ".pdf");
HttpContext.Current.ApplicationInstance.CompleteRequest();

}

Output:

The output of pdf would be in below structure as given below:

Friday, August 23, 2013

hi in this post i will show how to print a particular <div> section using JavaScript in asp.net.

Example:

<script type="text/javascript">
function ClickToPrint() {
docPrint = window.open("", "Print");
docPrint.document.open();
docPrint.document.write('<html><head><title>::PRINT SAMPLE::</title>');
docPrint.document.write('</head><body onLoad="self.print()">');
docPrint.document.write('<table width="900px" border=0><tr><td width=100%><center><font face="windings">');
docPrint.document.write(document.getElementById("PrintDiv").innerHTML);
docPrint.document.write('</font></center></td></tr></table></body></html>');
docPrint.document.close();
}

</script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<div id="PrintDiv">
Hello World ! This is Asp.net.
</div>
<div id="DoNotPrintDiv">
Thanks for visiting this website !!
</div>
<input id="Button1" onclick="ClickToPrint();" type="button" value="Print" class="button" />
</body>
</html>