Click here to Skip to main content
11,583,859 members (63,709 online)
Click here to Skip to main content

Add HTML Page Contents to ASPX Page Programmatically

, 28 Dec 2014 CPOL 34.1K 248 19
Rate this:
Please Sign up or sign in to vote.
Ever wondered how to add HTML file contents to the aspx page by code. Take a look at the implementation.

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

  1. FileUpload Control to select the HTML File.
    Upload the file:
    <asp:FileUpload ID="fileHTMLToBeIncluded" runat="server" /> 
  2. Button to Upload the file onclick.
    <asp:Button ID="btnUploadFile" runat="server" 
      Text="Upload HTML File" OnClick="btnUploadFile_Click" /> 
  3. Literal Control to show the HTML File contents.
    <asp:Literal ID="ltHTMLBody" runat="server"></asp:Literal> 
  4. Label to show any Errors/Exceptions.
    <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
  1. Upload and save the File. 
  2. Open it using File.OpenText Method[^]. And then read to the end of File.
  3. Use Regex Class[^](RegularExpression) to get only the body part contents of HTML File.
  4. 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>
    <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>
    <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>
        <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 Regex.Replace Method (String, String)[^].

    // 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.

    <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.

    <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.

    <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)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
NOW I am a Conference Speaker. Please invite me to your College, Company, Event or Conference !!!

Proud Indian | Microsoft MVP | CodeProject MVP | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cricketer | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015
  3. Code Project MVP 2014, 2015
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

You may also be interested in...

Comments and Discussions

 
QuestionJavascript in file Pin
roberto galbiati28-Dec-14 22:40
memberroberto galbiati28-Dec-14 22:40 
AnswerRe: Javascript in file Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:15
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:15 
GeneralRe: Javascript in file Pin
roberto galbiati28-Dec-14 23:20
memberroberto galbiati28-Dec-14 23:20 
GeneralRe: Javascript in file Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:21
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:21 
GeneralMy vote of 5 Pin
VICK28-Dec-14 21:19
professional VICK28-Dec-14 21:19 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:14
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)28-Dec-14 23:14 
QuestionGood one. Pin
Ch Smrutiranjan24-Dec-14 1:48
memberCh Smrutiranjan24-Dec-14 1:48 
AnswerRe: Good one. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Dec-14 2:50
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Dec-14 2:50 
GeneralUnable to download the project :( Pin
Sujeevan Kumar24-Dec-14 0:05
memberSujeevan Kumar24-Dec-14 0:05 
GeneralRe: Unable to download the project :( Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Dec-14 0:33
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Dec-14 0:33 
GeneralRe: Unable to download the project :( Pin
Sujeevan Kumar15-Jan-15 19:19
memberSujeevan Kumar15-Jan-15 19:19 
GeneralRe: Unable to download the project :( Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)15-Jan-15 19:40
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)15-Jan-15 19:40 
GeneralMy vote of 5 Pin
Sibeesh KV13-Nov-14 3:15
professionalSibeesh KV13-Nov-14 3:15 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:28
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:28 
GeneralRe: My vote of 5 Pin
Sibeesh KV13-Nov-14 3:36
professionalSibeesh KV13-Nov-14 3:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 29 Dec 2014
Article Copyright 2013 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid