Preface: When I originally did this, it was using ASP.NET 1.1 and it was really significant. But with ASP.NET 2.0, the viewstate handling is SO much better. That kind of makes this less relevant, but still could be a performance gain in special scenarios or especially if you are still using ASP.NET 1.1.
Let's say you want to show a grid of textboxes and you want the textboxes to have custom functionality. That sounds like a reusable control, right? Write once and reuse it many times. Well, it's great that ASP.NET allows you to do such a thing. They're ASCX files and they're very easy to create. So in your ASP.NET project you create a new ASCX control and add a textbox to it. This textbox should only accept numbers, so you go into the code and add some code to enforce keypresses:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
If Not Me.Page.ClientScript.IsClientScriptBlockRegistered("NumberTextBox") Then
Dim js As String
js = "<script language=jscript>" & vbCrLf
js &= "function ChkNumber(){" & vbCrLf
js &= vbTab & "if ((event.keyCode ==47) " _
& "||(event.keyCode < 46 || event.keyCode > 57)) event.returnValue = false;" & vbCrLf
js &= "}</script>"
Me.Page.ClientScript.RegisterClientScriptBlock(GetType(String), "NumberTextBox", js)
End If
txtNumber.Attributes.Add("onkeypress", "ChkNumber();")
End Sub
Then you use this control in your grid. Let's say it's a 10x8 grid.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UserControls.aspx.vb"
Inherits="TestControls.UserControls" %>
<%@ Register TagPrefix="cb" TagName="ASCTextBox" Src="~/ASCXTextBox.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title>ASCX Controls</title></head>
<body>
<form id="form1" runat="server">
<div>
<cb:ASCTextBox runat="server" id="ASCTextBox0" />
<cb:ASCTextBox runat="server" id="ASCTextBox1" />
<cb:ASCTextBox runat="server" id="ASCTextBox4" />
<cb:ASCTextBox runat="server" id="ASCTextBox5" />
<cb:ASCTextBox runat="server" id="ASCTextBox8" />
<cb:ASCTextBox runat="server" id="ASCTextBox9" />
<cb:ASCTextBox runat="server" id="ASCTextBox12" />
<cb:ASCTextBox runat="server" id="ASCTextBox13" />
...
</div>
</form>
</body>
</html>
You view the page and it looks good. Then you happen to look at the source and you see this:
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="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" />
You pause for a moment and say "Eh. Whatever. We've got fast servers" Your co-worker looks over, sees your screen and starts laughing at you.
"Your viewstate sucks, man!"
So you're now on the defensive. "That was just a layout test. I have a different control I'm using for performance." It sounded convincing, but you need to produce this control like, now.
Fortunately, there is a super fast way to get custom functionality into a web control and avoid the viewstate glut of ASCX controls. They're server controls and they are super easy to do. Here's the code to do what the above control did:
Public Class NumberTextBox
Inherits TextBox
Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
If Not Me.Page.ClientScript.IsClientScriptBlockRegistered("NumberTextBox") Then
Dim js As String
js = "<script language=jscript>" & vbCrLf
js &= "function ChkNumber(){" & vbCrLf
js &= vbTab & "if ((event.keyCode ==47) || " _
& "(event.keyCode < 46 || event.keyCode > 57)) event.returnValue = false;" & vbCrLf
js &= "}</script>"
Me.Page.ClientScript.RegisterClientScriptBlock(GetType(String), _
"NumberTextBox", js)
End If
End Sub
Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter)
Me.Attributes.Item("onkeypress") = "ChkNumber();" & Me.Attributes.Item("onkeypress")
MyBase.AddAttributesToRender(writer)
End Sub
End Class
It's actually just about the same amount of code, but it is a real textbox, with all the events, properties and methods. With an ASCX control, you'd have to jump thorugh a lot of hoops to get at the textbox inside the ASCX control. So what is the viewstate like after this change?
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMTAxNDAxNzVkZDG8dSjZI4sEFKBynBmvLjF/Ytxk" />
Yeah.