ASP.NET Web Forms-HTML 页面

单的 ASP.NET 页面看上去就像普通的 HTML 页面。

Hello RUNOOB.COM

在开始学习 ASP.NET 之前，我们先来构建一个简单的 HTML 页面，该页面将在浏览器中显示 "Hello RUNOOB.COM"：

Hello RUNOOB.COM!

用 HTML 编写的 Hello RUNOOB.COM

下面的代码将以 HTML 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.htm" 的文件中，并创建一个到该文件的链接：firstpage.htm。

用 ASP.NET 编写的 Hello RUNOOB.COM

转换 HTML 页面为 ASP.NET 页面最简单的方法是，直接复制一个 HTML 文件，并把新文件的扩展名改成 .aspx 。

下面的代码将以 ASP.NET 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.aspx" 的文件中，并创建一个到该文件的链接：firstpage.aspx。

它是如何工作的？

从根本上讲，ASP.NET 页面与 HTML 是完全相同的。

HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面，服务器可以不进行任何修改，就直接发送页面给浏览器。

ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面，服务器在将结果发回给浏览器之前，需要先处理页面中的可执行代码。

上面的 ASP.NET 页面不包含任何可执行的代码，所以没有执行任何东西。在下面的实例中，我们将添加一些可执行的代码到页面中，以便演示静态 HTML 页面和动态 ASP 页面的不同之处。

经典 ASP

Active Server Pages (ASP) 已经流行很多年了。通过 ASP，可以在 HTML 页面中放置可执行代码。

之前的 ASP 版本（在 ASP.NET 之前）通常被称为经典 ASP。

ASP.NET 不完全兼容经典 ASP，但是只需要经过少量的修改，大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。

如果您想学习更多关于经典 ASP 的知识，请访问我们的 ASP 教程。

用经典 ASP 编写的动态页面

为了演示 ASP 是如何显示包含动态内容的页面，我们将向上面的实例中添加一些可执行的代码（红色字体标识）：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

<% --%> 标签内的代码是在服务器上执行的。

Response.Write 是用来向 HTML 输出流中写东西的 ASP 代码。

Now() 是一个返回服务器当前日期和时间的函数。

如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.asp" 的文件中，并创建一个到该文件的链接：dynpage.asp。

用 ASP .NET 编写的动态页面

下面的代码将以 ASP.NET 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.aspx" 的文件中，并创建一个到该文件的链接：dynpage.aspx。

ASP.NET 对比经典 ASP

上面的实例无法演示 ASP.NET 与经典 ASP 之间任何的不同之处。

正如最后的两个实例中，您看不出 ASP 页面和 ASP.NET 页面两者之间的不同之处。

在下一章中，您将看到服务器控件是如何让 ASP.NET 比经典 ASP 更强大的。

有的服务器控件都必须出现在 <form> 标签中，<form> 标签必须包含 runat="server" 属性。

ASP.NET Web 表单

所有的服务器控件都必须出现在 <form> 标签中，<form> 标签必须包含 runat="server" 属性。runat="server" 属性表明该表单必须在服务器上进行处理。同时也表明了包含在它内部的控件可被服务器脚本访问：

...HTML + server controls

</form>

注释：该表单总是被提交到自身页面。如果您指定了一个 action 属性，它会被忽略。如果您省略了 metion 属性，它将会默认设置 method="post"。同时，如果您没有指定 name 和 id 属性，它们会由 ASP.NET 自动分配。

注释：一个 .aspx 页面只能包含一个 <form runat="server"> 控件！

如果您在一个包含不带有 name、method、action 或 id 属性的表单的 .aspx 页面中选择查看源代码，您会看到 ASP.NET 添加这些属性到表单上了，如下所示：

...some code

</form>

提交表单

表单通常通过点击按钮来提交。ASP.NET 中的 Button 服务器控件的格式如下：

<asp:Button id="id" text="label" OnClick="sub" runat="server" />

id 属性为按钮定义了一个唯一的名称，text 属性为按钮分配了一个标签。onClick 事件句柄规定了一个要执行的已命名的子例程。

在下面的实例中，我们在 .aspx 文件中声明了一个 Button 控件。点击按钮运行改变按钮上文本的子例程：

实例

个人需求，需要将html格式转换成PDF并加上水印图片。于是乎第一次接触这种需求的小菜鸟博主我，在某度搜索引擎上不断地查阅关键字资料、踩坑，终于有了一个相应的解决方案。以下是解决步骤，记录下来方便以后的回顾，以及各位大神们的品鉴。

　　1、在 NuGet 搜索 itextsharp 关键字下载以下截图圈中的两个包，一般下载完后项目会自动引用。

　　2、在项目文件中引入以下命名空间（建议下面提及的代码封装成类库，方便项目间调用，个人取舍）

　　3、Html字符串转pdf文件流，加水印图片以及未加水印重载精简帮助类（由博主踩坑整理，仅完成个人业务需求）

 1     /// <summary>
 2     /// Html字符串转PDF输出帮助类
 3     /// </summary>
 4     public class HtmlToPdfHelper
 5     {
 6         #region HtmlToPDF
 7 
 8         /// <summary>
 9         /// 判断是否有乱码
10         /// </summary>
11         /// <param name="txt"></param>
12         /// <returns></returns>
13         private static bool IsMessyCode(string txt)
14         {
15             var bytes = Encoding.UTF8.GetBytes(txt);
16             for (var i = 0; i < bytes.Length; i++)
17             {
18                 if (i < bytes.Length - 3)
19                     if (bytes[i] == 239 && bytes[i + 1] == 191 && bytes[i + 2] == 189)
20                     {
21                         return true;
22                     }
23             }
24             return false;
25         }
26 
27         /// <summary>
28         /// 将Html字符串 输出到PDF档里
29         /// </summary>
30         /// <param name="htmlText"></param>
31         /// <returns></returns>
32         public static byte[] ConvertHtmlTextToPdf(string htmlText)
33         {
34             return ConvertHtmlTextToPdf(htmlText, "", 0, 0, 0, 0);
35         }
36 
37         /// <summary>
38         /// 将Html字符串 输出到PDF档里,并添加水印
39         /// </summary>
40         /// <param name="htmlText">网页代码</param>
41         /// <param name="picPath">水印路径</param>
42         /// <param name="left">距离左边距离</param>
43         /// <param name="top">距顶部距离</param>
44         /// <param name="width">水印宽度</param>
45         /// <param name="height">水印高度</param>
46         /// <returns></returns>
47         public static byte[] ConvertHtmlTextToPdf(string htmlText, string picPath, int left, int top, int width, int height)
48         {
49             if (string.IsNullOrEmpty(htmlText))
50             {
51                 return null;
52             }
53             //避免当htmlText无任何html tag标签的纯文字时，转PDF时会挂掉，所以一律加上<p>标签
54             htmlText = "<p>" + htmlText + "</p>";
55             MemoryStream outputStream = new MemoryStream();//要把PDF写到哪个串流
56             byte[] data = Encoding.UTF8.GetBytes(htmlText);//字串转成byte[]
57             MemoryStream msInput = new MemoryStream(data);
58             Document doc = new Document();//要写PDF的文件，建构子没填的话预设直式A4
59             PdfWriter writer = PdfWriter.GetInstance(doc, outputStream);
60             //指定文件预设开档时的缩放为100%
61             PdfDestination pdfDest = new PdfDestination(PdfDestination.XYZ, 0, doc.PageSize.Height, 1f);
62             //开启Document文件 
63             doc.Open();
64 
65             //写入水印图片
66             if (!string.IsNullOrEmpty(picPath))
67             {
68                 Image img = Image.GetInstance(picPath);
69                 //设置图片的位置
70                 img.SetAbsolutePosition(width + left, (doc.PageSize.Height - height) - top);
71                 //设置图片的大小
72                 img.ScaleAbsolute(width, height);
73                 doc.Add(img);
74             }
75             try
76             {
77                 //使用XMLWorkerHelper把Html parse到PDF档里
79                 XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, msInput, null, Encoding.UTF8);
80                 //将pdfDest设定的资料写到PDF档
81                 PdfAction action = PdfAction.GotoLocalPage(1, pdfDest, writer);
82                 writer.SetOpenAction(action);
83             }
84             catch (Exception)
85             {
86                 return null;
87             }
88             doc.Close();
89             msInput.Close();
90             outputStream.Close();
91             //回传PDF档案 
92             return outputStream.ToArray();
94         }
95 
96         #endregion
97 
98     }

　　4、获取网页字符串的方法

 1         /// <summary>
 2         /// 获取网站内容，包含了 HTML+CSS+JS
 3         /// </summary>
 4         /// <returns>String返回网页信息</returns>
 5         public static string GetWebContent(string inpath)
 6         {
 7             try
 8             {
 9                 WebClient myWebClient = new WebClient();
10                 //获取或设置用于向Internet资源的请求进行身份验证的网络凭据
11                 myWebClient.Credentials = CredentialCache.DefaultCredentials;
12                 //从指定网站下载数据
13                 Byte[] pageData = myWebClient.DownloadData(inpath);
14                 //如果获取网站页面采用的是GB2312，则使用这句
15                 string pageHtml = Encoding.UTF8.GetString(pageData);
16                 bool isBool = IsMessyCode(pageHtml);//判断使用哪种编码 读取网页信息
17                 if (!isBool)
18                 {
19                     string pageHtml1 = Encoding.UTF8.GetString(pageData);
20                     pageHtml = pageHtml1;
21                 }
22                 else
23                 {
24                     string pageHtml2 = Encoding.Default.GetString(pageData);
25                     pageHtml = pageHtml2;
26                 }
27                 return pageHtml;
28             }
29             catch (WebException webEx)
30             {
31                 return webEx.Message;
32             }
33         }

　　5、MVC设计模式下获取控制器视图Html方法，很XX的一个问题就是只能获取调用此方法的控制器下所有视图，不能跨控制器获取视图，有待优化

 1         /// <summary>
 2         /// 获取MVC视图Html
 3         /// </summary>
 4         /// <param name="context">控制器上下文</param>
 5         /// <param name="viewName">视图名称</param>
 6         /// <param name="param"></param>
 7         /// <returns></returns>
 8         public static string GetViewHtml(ControllerContext context, string viewName)
 9         {
10             if (string.IsNullOrEmpty(viewName))
11                 viewName = context.RouteData.GetRequiredString("action");
12             using (var sw = new StringWriter())
13             {
14                 ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);
15                 var viewContext = new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw);
16                 try
17                 {
18                     viewResult.View.Render(viewContext, sw);
19                 }
20                 catch (Exception ex)
21                 {
22                     throw;
23                 }
24 
25                 return sw.GetStringBuilder().ToString();
26             }
27         }

　　6、将pdf流输出至客户浏览器下载方法

 1         /// <summary>
 2         /// 将pdf文件流输出至浏览器下载
 3         /// </summary>
 4         /// <param name="pdfFile">PDF文件流</param>
 5         public static void PdfDownload(byte[] pdfFile)
 6         {
 7             byte[] buffer = pdfFile;
 8             Stream iStream = new MemoryStream(buffer);
 9             try
10             {
11                 int length;
12                 long dataToRead;
13                 string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + ".pdf";//保存的文件名称
14                 dataToRead = iStream.Length;
15                 HttpContext.Current.Response.Clear();
16                 HttpContext.Current.Response.ClearHeaders();
17                 HttpContext.Current.Response.ClearContent();
18                 HttpContext.Current.Response.ContentType = "application/pdf"; //文件类型 
19                 HttpContext.Current.Response.AddHeader("Content-Length", dataToRead.ToString());//添加文件长度，进而显示进度 
20                 HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(filename, Encoding.UTF8));
21                 while (dataToRead > 0)
22                 {
23                     if (HttpContext.Current.Response.IsClientConnected)
24                     {
25                         length = buffer.Length;
26                         HttpContext.Current.Response.OutputStream.Write(buffer, 0, length);
27                         HttpContext.Current.Response.Flush();
28                         buffer = new Byte[length];
29                         dataToRead = dataToRead - length;
30                     }
31                     else
32                     {
33                         dataToRead = -1;
34                     }
35                 }
36             }
37             catch (Exception ex)
38             {
39                 HttpContext.Current.Response.Write("文件下载时出现错误!");
40             }
41             finally
42             {
43                 if (iStream != null)
44                 {
45                     iStream.Close();
46                 }
47                 //结束响应，否则将导致网页内容被输出到文件，进而文件无法打开  
48                 HttpContext.Current.Response.Flush();
49                 HttpContext.Current.Response.End();
50 
51             }
52         }

　　7、MVC控制器下调用Demo（步骤4、6 方法封装至帮助类）

 1     public class HomeController : Controller
 2     {
 3         //
 4         // GET: /Home/
 5 
 6         public ActionResult Index()
 7         {
 8             //从网址下载Html字符串(方法一)
 9             string inpath = System.Web.HttpContext.Current.Server.MapPath("~/PDFTemplate/test.html");
10             string htmlText = HtmlToPdfHelper.GetWebContent(inpath);//此处调用步骤4方法
11 
12             //获取MVC视图Html字符串(方法二)
13             //string htmlText = GetViewHtml(ControllerContext, "Test");//此处调用步骤5方法
14 
15             //水印图片路径
16             string picPath = Server.MapPath("~/PDFTemplate/TemplateImg/authentication-iocn.png");
17             //html转pdf并加上水印
18             byte[] pdfFile = HtmlToPdfHelper.ConvertHtmlTextToPdf(htmlText, picPath, 100, 200, 100, 100);
19             //输出至客户端
20             HtmlToPdfHelper.PdfDownload(pdfFile);//此处调用步骤6方法
21 
22             return View();
23         }
24 
25         public ActionResult Test()
26         {
27             return View();
28         }
29 
30         /// <summary>
31         /// 获取MVC视图Html
32         /// </summary>
33         /// <param name="context"></param>
34         /// <param name="viewName">视图名称</param>
35         /// <returns></returns>
36         public static string GetViewHtml(ControllerContext context, string viewName)
37         {
38             if (string.IsNullOrEmpty(viewName))
39                 viewName = context.RouteData.GetRequiredString("action");
40             using (var sw = new StringWriter())
41             {
42                 ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);
43                 var viewContext = new ViewContext(context, viewResult.View, context.Controller.ViewData,
44                     context.Controller.TempData, sw);
45                 try
46                 {
47                     viewResult.View.Render(viewContext, sw);
48                 }
49                 catch (Exception ex)
50                 {
51                     throw;
52                 }
53 
54                 return sw.GetStringBuilder().ToString();
55             }
56         }
57     }

　　总结：我理解的解决思路是将html读取转换成字符串，之后再通过 itextsharp 转换成 pdf 比特币传输至客户端或直接保存至服务器生成链接供用户下载。（新手上路，不妥之处，欢迎各位大神指教）

　　以上代码仅满足个人业务逻辑需求，谢谢浏览。

在线咨询

上一篇：使用正则表达式从HTML中提取并验证日期的有效性
下一篇：Vue实战082：el-upload实现图片手动上传及预览

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

ASP.NET Web Forms-HTML 页面

您的项目需求