以编程方式将 HTML 页面内容添加到 ASPX 页面

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

4.80/5 (15投票s)

2013年7月3日

CPOL

2分钟阅读

97460

578

是否想过如何通过代码将 HTML 文件内容添加到 aspx 页面？看看实现方法吧。

下载演示

引言

本文解释了将 HTML 文件内容动态包含到 ASPX 页面的代码。您可以下载代码并检查其工作原理。

背景

我经常在编码论坛中看到成员提出这种类型的需求。最后，我尝试实现这一点。曾经，同样的事情出现在我的一个项目中，因此它也达到了目的。这就是为什么我要与大家分享。它可能会在某些时候对您有所帮助。

使用代码

步骤 1：添加所需控件

FileUpload 控件用于选择 HTML 文件。

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

Button 用于在 onclick 时上传文件。

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

Literal 控件用于显示 HTML 文件内容。

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

Label 用于显示任何错误/异常。

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

步骤 2：按钮上传代码

我将解释这个概念。您可以下载整个代码来参考。

逻辑

上传并保存文件。
使用 File.OpenText 方法[^] 打开它。然后读取到文件末尾。
使用 Regex 类[^](RegularExpression) 仅获取 HTML 文件的 body 部分内容。
将此内容分配给 Literal 控件的 Text 属性。

深入研究第三步（Regex）

假设我们想要包含到 ASPX 页面的 Hello World 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>

现在我们只需要找到 body 标签内的内容（这里是 division）。

为此，我们需要删除除 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>

为了实现这一点，我们需要两个 Regular Expressions。

第一个 ( [\s\S]*<body[^<]* ) 用于匹配 division 开始之前的字符串。

第二个 ( </body[\s\S]* ) 用于匹配 division 结束标签之后的字符串。

让我逐一解释。

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

这将匹配直到 body 开始标签结束的所有数据。

在这里，第一部分 [\s\S]* 将匹配 body 开始标签之前的所有字符。
整个 Regex 将匹配直到 body 开始标签结束的所有字符。

所以，它将匹配（显示为~~删除线~~)...

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

当我们得到匹配的字符串时，我们只需要使用 Regex.Replace 方法 (String, String)[^] 将其设为空白。

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

现在，在此代码行之后，我们将拥有 HTML 文本 (strHTML)，如下所示。

<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]* :-

这个 Regex 将匹配从 body 结束标签开始到末尾的每个字符。

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

现在，我们将遵循相同的过程，用空白替换匹配的字符串。

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

在此行之后，HTML 文本 (strHTML) 将包含以下文本。

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

最后一步

最后一步是将上面的 division 分配给 Literal 控件的 Text。

ltHTMLBody.Text = strHTML;

历史

2013 年 7 月 3 日 - 提交第一个版本以供批准。
2014 年 12 月 29 日 - 添加项目以供下载。