Add HTML Page Contents to ASPX Page Programmatically

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Rate me:

4.80/5 (18 votes)

28 Dec 2014CPOL2 min read

94.8K

545

Ever wondered how to add HTML file contents to the aspx page by code. Take a look at the implementation.

Download demo

Introduction

This article explains the code to include the HTML file contents dynamically to the ASPX page. You can download the code and check how it is working.

Background

I always see this type of requirements asked by members in the Coding Forums. Finally I tried to achieve this. Once, the same thing came to one of my projects, so it also served the purpose. That's why, I am sharing with all of you. It may help you some day.

Using the code

Step-1: Add Required Controls

FileUpload Control to select the HTML File.

HTML

Upload the file:
<asp:FileUpload ID="fileHTMLToBeIncluded" runat="server" />

Button to Upload the file onclick.

HTML

<asp:Button ID="btnUploadFile" runat="server" 
  Text="Upload HTML File" OnClick="btnUploadFile_Click" />

Literal Control to show the HTML File contents.

HTML

<asp:Literal ID="ltHTMLBody" runat="server"></asp:Literal>

Label to show any Errors/Exceptions.

HTML

<asp:Label ID="lblError" runat="server"></asp:Label>

Step-2: Button Upload Code

I will explain the concept. You can refer the whole code by downloading it.

Logic

Upload and save the File.
Open it using File.OpenText Method[^]. And then read to the end of File.
Use Regex Class[^](RegularExpression) to get only the body part contents of HTML File.
Assign this content to the Literal Control Text Property.

Deeper into the Third Step (Regex)

Suppose the Hello World HTML file we want to include to ASPX page is something like below.

HTML

<html>
    <head>
	<title>
		Demo:- Include HTML in Aspx Page
	</title>
    </head>
<body> 
    <div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
	<label>Hello World!!! From HTML Page.</label>
    </div>
</body>
</html>

Now we just need to find the contents inside the body tags (here the division).

For that, we need to remove texts other than the division.

HTML

<html>
    <head>
	<title>
		Demo:- Include HTML in Aspx Page
	</title>
    </head>
<body> 
    <div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
	<label>Hello World!!! From HTML Page.</label>
    </div>
</body>
</html>

To achieve this, we need two Regular Expressions.

First One ( [\s\S]*<body[^<]* ) to match the string before the division start.

Second One ( </body[\s\S]* ) to match the string after the division end tag.

Let me explain one by one.

[\s\S]*<body[^<]*> :-

This matches the whole data up to the end of body start tag.
Here the first part [\s\S]* will match each and every character before the body start tag.
And the whole Regex will match all the characters up to the end of body start tag.
So, it will match (which is showing as ~~strike through~~)...
HTML
```
<html>
    <head>
	<title>
		Demo:- Include HTML in Aspx Page
	</title>
    </head>
<body>
    <div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
	<label>Hello World!!! From HTML Page.</label>
    </div>
</body>
</html>    
```
As we get the matched string, we just need to make it blank by using <a href="http://msdn.microsoft.com/en-us/library/xwewhkd1.aspx">Regex.Replace Method (String, String)</a>[<a href="http://msdn.microsoft.com/en-us/library/xwewhkd1.aspx" target="_blank" title="New Window">^</a>].

C#
```
// Replace contents upto start tag of body.
start = new Regex(@"[\s\S]*<body[^<]*>", RegexOptions.IgnoreCase);
strHTML = start.Replace(strHTML, string.Empty);
```
Now after this coding line, we will have HTML text (strHTML) as below.

HTML
```
<div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
    <label>Hello World!!! From HTML Page.</label>
</div>
</body>
</html>
```

</body[\s\S]* :-

This Regex will match every character starting from body end tag till the end.

HTML

<div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
        <label>Hello World!!! From HTML Page.</label>
</body>
</html>

Now, we will follow the same procedure to replace the matched string with blank.

// Replace contents from end tag of body.
end = new Regex(@"</body[\s\S]*", RegexOptions.IgnoreCase);
strHTML = end.Replace(strHTML, string.Empty);

After this line, the HTML text (strHTML) will contain the below text.

HTML

<div style="font-family: Verdana; font-size: 20px; color: green; font-weight: bold;">
<label>Hello World!!! From HTML Page.</label>
</div>

Last Step

Last step is to assign the above division to the Literal Control Text.

ltHTMLBody.Text = strHTML;

History

03 July 2013 - First version submitted for approval.
29 Dec 2014 - Project Added for Download.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Architect

India

Awards

DZone Most Valuable Blogger
Microsoft MVP 2014, 2015, 2016, 2017, 2018
Code Project MVP 2014, 2015, 2016
Star Achiever of the Month December 2013
Mindfire Techno Idea Contest 2013 Winner
Star of the Month July 2013

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Add HTML Page Contents to ASPX Page Programmatically

Introduction

Background

Using the code

Step-1: Add Required Controls

Step-2: Button Upload Code

Logic

Deeper into the Third Step (Regex)

History

License

My Website

Programming Community Profiles

Social Profiles

Awards

Comments and Discussions