AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

别总以为asp.net mvc比asp.net web form好--web form的页面也可以体积小巧

2012-05-13 877
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 最近才看到网上有一种对asp.net web form的误解。也有很多讨论，弄得微软ScottGu也来澄清。asp.net mvc和web form是并行存在的两种开发模式。许多人对web form的诟病很多，其中最主要的就是说viewstate，随便一个web form页面，其html源码就体积很大，主要是隐藏字段viewstate体积比较大，至少几十K，页面复杂一点，viewstate的大小能上几兆，这样大体积的页面，在浏览器和服务器之间传输，对网络带宽也是一个很大的压力，所以asp.net webform的性能肯定受很大影响。

最近才看到网上有一种对asp.net web form的误解。也有很多讨论，弄得微软ScottGu也来澄清。asp.net mvc和web form是并行存在的两种开发模式。许多人对web form的诟病很多，其中最主要的就是说viewstate，随便一个web form页面，其html源码就体积很大，主要是隐藏字段viewstate体积比较大，至少几十K，页面复杂一点，viewstate的大小能上几兆，这样大体积的页面，在浏览器和服务器之间传输，对网络带宽也是一个很大的压力，所以asp.net webform的性能肯定受很大影响。这其实是一个对asp.net web form的特大误解。这里提供一个小技巧。可以让asp.net web form的页面和asp.net mvc的页面一样体积小巧。同时还能享受viewstate带来的好处。

举例来说：一个显示记录列表的form。如下图：

 这是一个很简单的页面了。其html源代码是：

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTE5MTIyNjE4Mg9kFgJmD2QWAgIDD2QWAgIBD2QWAgIDDzwrABECAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudALCA2QMFCsABxYIHgROYW1lBQlBZGRyZXNzSUQeCklzUmVhZE9ubHloHgRUeXBlGSsBHglEYXRhRmllbGQFCUFkZHJlc3NJRBYIHwIFDEFkZHJlc3NMaW5lMR8DaB8EGSsCHwUFDEFkZHJlc3NMaW5lMRYIHwIFDEFkZHJlc3NMaW5lMh8DaB8EGSsCHwUFDEFkZHJlc3NMaW5lMhYIHwIFBENpdHkfA2gfBBkrAh8FBQRDaXR5FggfAgUNU3RhdGVQcm92aW5jZR8DaB8EGSsCHwUFDVN0YXRlUHJvdmluY2UWCB8CBQ1Db3VudHJ5UmVnaW9uHwNoHwQZKwIfBQUNQ291bnRyeVJlZ2lvbhYIHwIFClBvc3RhbENvZGUfA2gfBBkrAh8FBQpQb3N0YWxDb2RlFgJmD2QWDAIBD2QWDmYPDxYCHgRUZXh0BQE5ZGQCAQ8PFgIfBgURODcxMyBZb3NlbWl0ZSBDdC5kZAICDw8WAh8GBQYmbmJzcDtkZAIDDw8WAh8GBQdCb3RoZWxsZGQCBA8PFgIfBgUKV2FzaGluZ3RvbmRkAgUPDxYCHwYFDVVuaXRlZCBTdGF0ZXNkZAIGDw8WAh8GBQU5ODAxMWRkAgIPZBYOZg8PFgIfBgUCMTFkZAIBDw8WAh8GBRMxMzE4IExhc2FsbGUgU3RyZWV0ZGQCAg8PFgIfBgUGJm5ic3A7ZGQCAw8PFgIfBgUHQm90aGVsbGRkAgQPDxYCHwYFCldhc2hpbmd0b25kZAIFDw8WAh8GBQ1Vbml0ZWQgU3RhdGVzZGQCBg8PFgIfBgUFOTgwMTFkZAIDD2QWDmYPDxYCHwYFAjI1ZGQCAQ8PFgIfBgUQOTE3OCBKdW1waW5nIFN0LmRkAgIPDxYCHwYFBiZuYnNwO2RkAgMPDxYCHwYFBkRhbGxhc2RkAgQPDxYCHwYFBVRleGFzZGQCBQ8PFgIfBgUNVW5pdGVkIFN0YXRlc2RkAgYPDxYCHwYFBTc1MjAxZGQCBA9kFg5mDw8WAh8GBQIyOGRkAgEPDxYCHwYFEDkyMjggVmlhIERlbCBTb2xkZAICDw8WAh8GBQYmbmJzcDtkZAIDDw8WAh8GBQdQaG9lbml4ZGQCBA8PFgIfBgUHQXJpem9uYWRkAgUPDxYCHwYFDVVuaXRlZCBTdGF0ZXNkZAIGDw8WAh8GBQU4NTAwNGRkAgUPZBYOZg8PFgIfBgUCMzJkZAIBDw8WAh8GBREyNjkxMCBJbmRlbGEgUm9hZGRkAgIPDxYCHwYFBiZuYnNwO2RkAgMPDxYCHwYFCE1vbnRyZWFsZGQCBA8PFgIfBgUGUXVlYmVjZGQCBQ8PFgIfBgUGQ2FuYWRhZGQCBg8PFgIfBgUHSDFZIDJINWRkAgYPDxYCHgdWaXNpYmxlaGRkGAEFJGN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkZ3JkQWRkcmVzcw88KwAMAQgCWmTq1MHx+5oLH4bMzg2GUy0MyKZQYkR2RY+bxLLJQFR/nQ==" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
    <div>
        
    <span id="ContentPlaceHolder1_Label1">My label</span>
<div>
	<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_grdAddress" style="border-collapse:collapse;">
		<tr>
			<th scope="col">AddressID</th><th scope="col">AddressLine1</th><th scope="col">AddressLine2</th><th scope="col">City</th><th scope="col">StateProvince</th><th scope="col">CountryRegion</th><th scope="col">PostalCode</th>
		</tr><tr>
			<td>9</td><td>8713 Yosemite Ct.</td><td> </td><td>Bothell</td><td>Washington</td><td>United States</td><td>98011</td>
		</tr><tr>
			<td>11</td><td>1318 Lasalle Street</td><td> </td><td>Bothell</td><td>Washington</td><td>United States</td><td>98011</td>
		</tr><tr>
			<td>25</td><td>9178 Jumping St.</td><td> </td><td>Dallas</td><td>Texas</td><td>United States</td><td>75201</td>
		</tr><tr>
			<td>28</td><td>9228 Via Del Sol</td><td> </td><td>Phoenix</td><td>Arizona</td><td>United States</td><td>85004</td>
		</tr><tr>
			<td>32</td><td>26910 Indela Road</td><td> </td><td>Montreal</td><td>Quebec</td><td>Canada</td><td>H1Y 2H5</td>
		</tr><tr>
			<td colspan="7"><table>
				<tr>
					<td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$2')">2</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$3')">3</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$4')">4</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$5')">5</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$6')">6</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$7')">7</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$8')">8</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$9')">9</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$10')">10</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$11')">...</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$Last')">>></a></td>
				</tr>
			</table></td>
		</tr>
	</table>
</div>
<br />
 
    </div>
    </form>
</body>
</html>

可见其隐藏字段viewstate体积较大。对应用程序的性能会有较大影响。 

通过如下方法，可以让页面html源代码体积变小巧。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EntLibSample
{
    public class BasePage : System.Web.UI.Page
    {
        protected override void SavePageStateToPersistenceMedium(object viewState)
        {
            Session["viewState" + this.Context.Request.FilePath] = viewState;
        }

        protected override object LoadPageStateFromPersistenceMedium()
        {
            if (Session["viewState" + this.Context.Request.FilePath] != null)
            {
                return Session["viewState" + this.Context.Request.FilePath];
            }
            return string.Empty;
        }
    }
}

这个BasePage类继承了System.Web.UI.Page类。System.Web.UI.Page中的SavePageStateToPersistenceMedium和LoadPageStateFromPersistenceMedium方法是将viewstate的内容发到客户端浏览器中，那么每次向服务器发请求，都需将体积庞大的viewstate字段发回服务器，服务器返回结果时，又将体积庞大的viewstate字段发回来。这给应用程序整体性能带来了很大冲击。BasePage类改写了此两个方法。将viewstate内容放到session中，用的时候又从session取回来。这样避免了在网络上来回传输体积庞大的viewstate内容。 

应用程序的所有页面都继承此BasePage类。这样就可以将此方法应用于所有的asp.net web form页面。

其效果如下：

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
    <div>
        
    <span id="ContentPlaceHolder1_Label1">My label</span>
<div>
	<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_grdAddress" style="border-collapse:collapse;">
		<tr>
			<th scope="col">AddressID</th><th scope="col">AddressLine1</th><th scope="col">AddressLine2</th><th scope="col">City</th><th scope="col">StateProvince</th><th scope="col">CountryRegion</th><th scope="col">PostalCode</th>
		</tr><tr>
			<td>9</td><td>8713 Yosemite Ct.</td><td> </td><td>Bothell</td><td>Washington</td><td>United States</td><td>98011</td>
		</tr><tr>
			<td>11</td><td>1318 Lasalle Street</td><td> </td><td>Bothell</td><td>Washington</td><td>United States</td><td>98011</td>
		</tr><tr>
			<td>25</td><td>9178 Jumping St.</td><td> </td><td>Dallas</td><td>Texas</td><td>United States</td><td>75201</td>
		</tr><tr>
			<td>28</td><td>9228 Via Del Sol</td><td> </td><td>Phoenix</td><td>Arizona</td><td>United States</td><td>85004</td>
		</tr><tr>
			<td>32</td><td>26910 Indela Road</td><td> </td><td>Montreal</td><td>Quebec</td><td>Canada</td><td>H1Y 2H5</td>
		</tr><tr>
			<td colspan="7"><table>
				<tr>
					<td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$2')">2</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$3')">3</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$4')">4</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$5')">5</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$6')">6</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$7')">7</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$8')">8</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$9')">9</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$10')">10</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$11')">...</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdAddress','Page$Last')">>></a></td>
				</tr>
			</table></td>
		</tr>
	</table>
</div>
<br />
 
    </div>
    </form>
</body>
</html>

 可见viewstate字段的内容完全没有了。这样html源代码的整体体积就小了很多。这对应用程序的性能提高是很大好处的。曾经只有asp.net mvc才有的体积小页面，现在asp.net web form也可以做到了。同时asp.net web form还有开发效率相对较高，还可以利用viewstate带来的好处，有了这些综合考虑，大家应该会重拾对asp.net web form的信心，继续在asp.net web form的旅程。

 

 

文章标签：
JavaScript
前端开发
.NET
Web App开发
关键词：
.NET mvc
.NET web
ASP.NET web
ASP Web
Web页面
mikelij
目录
相关文章
游客bl53zvy3izljy
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式，采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages，介绍如何使用Razor语法结合服务器端代码与前端技术，以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
游客bl53zvy3izljy
45 1
游客bl53zvy3izljy
|
1月前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码，支持 C# 和 Visual Basic。Razor 语法简洁易学，类似于 ASP 和 PHP。例如，在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
游客bl53zvy3izljy
23 1
小王老师呀
|
4月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器，可在操作方法执行前后运行代码，适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法，可以统一处理日志、验证及异常。创建并注册自定义筛选器类，能提升代码的可维护性和复用性。
小王老师呀
51 3
长梦
|
4月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core，一个轻量级、开源的跨平台框架，专为构建高性能Web应用设计。通过简单步骤，你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题，并提供了实用示例代码以助于理解与避免错误，帮助开发者更好地掌握ASP.NET Core的核心概念。
长梦
117 3
源码星辰
|
4月前
|
开发框架 前端开发 .NET
VB.NET中如何利用ASP.NET进行Web开发
在VB.NET中利用ASP.NET进行Web开发是一个常见的做法，特别是在需要构建动态、交互式Web应用程序时。ASP.NET是一个由微软开发的开源Web应用程序框架，它允许开发者使用多种编程语言（包括VB.NET）来创建Web应用程序。
源码星辰
74 5
二二*一一
|
4月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
二二*一一
51 7
Echo_Wish
|
4月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
Echo_Wish
85 0
土木林森
|
5月前
|
开发框架 监控 .NET
开发者的革新利器：ASP.NET Core实战指南，构建未来Web应用的高效之道
【8月更文挑战第28天】本文探讨了如何利用ASP.NET Core构建高效、可扩展的Web应用。ASP.NET Core是一个开源、跨平台的框架，具有依赖注入、配置管理等特性。文章详细介绍了项目结构规划、依赖注入配置、中间件使用及性能优化方法，并讨论了安全性、可扩展性以及容器化的重要性。通过这些技术要点，开发者能够快速构建出符合现代Web应用需求的应用程序。
土木林森
79 0
路边两盏灯
|
5月前
|
开发框架 .NET 开发工具
【Azure 应用服务】App Service 的.NET Version选择为.NET6，是否可以同时支持运行ASP.NET V4.8的应用呢？
【Azure 应用服务】App Service 的.NET Version选择为.NET6，是否可以同时支持运行ASP.NET V4.8的应用呢？
路边两盏灯
26 0
VipSoft
|
5月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
VipSoft
66 0

热门文章

最新文章

  • 1
    （已解决）Linux环境—bash: wget: command not found； Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
  • 2
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
  • 3
    基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
  • 4
    Benchmark.NET：让 C# 测试程序性能变得既酷又简单
  • 5
    .net8 Syncfusion生成pdf/doc/xls/ppt最新版本
  • 6
    NET任务调度框架Hangfire使用指南
  • 7
    .net HTTP请求类封装
  • 8
    ADO.NET连接到南大通用GBase 8s数据库
  • 9
    Net使用EasyNetQ简化与RabbitMQ的交互
  • 10
    Windows下C# 通过ADO.NET方式连接南大通用GBase 8s数据库（下）
  • 1
    ASP.NET AJAX使用方法概述（三）
    66
  • 2
    C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
    82
  • 3
    Asp.net 2.0专题之一：MasterPage(2)
    43
  • 4
    安装ASP.NET AJAX (一安装)
    121
  • 5
    利用Visual Basic构建高效的ASP.NET Web应用
    111
  • 6
    JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
    89
  • 7
    ASP.NET公立医院健康体检信息管理系统源码
    123
  • 8
    ASP.NET三甲医院手术麻醉信息管理系统源码 对接麻醉机、监护仪、血气分析仪
    81
  • 9
    asp.net中条件查询+分页
    74
  • 10
    进入ASP .net mvc的世界
    94

    • 相关课程

    更多
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • Java Web项目实战 - 图书商城
  • Python Web 框架 Django 快速入门
  • Python Web 框架 Flask 快速入门
  • 企业Web常用架构LAMP-LNMP实战
  • Java Web开发系列课程 - Spring框架入门

    • 相关电子书

    更多
  • WEB CACHE DECEPTION ATTACK
  • WEB浏览器中即将发生的安全变化
  • Web应用系统性能优化

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 云上Web及FTP
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月