We’ve talked about ASP .Net WebForms in the past. In this style of development, everything was event driven: click a button, and the browser sends an HTTP request to the server which triggers a series of events, including a “Button Click” event, and renders a new page.
When ASP .Net launched, one of the “features” was a lazy repaint in browsers which supported it (aka, Internet Explorer), where you’d click the button, the page would render on the server, download, and then the browser would repaint only the changed areas, making it feel more like a desktop application, albeit a laggy one.
This model didn’t translate super naturally to AJAX style calls, where JavaScript updated only portions of the page. The .Net team added some hooks for it- special “AJAX enabled” controls, as well as helper functions, like __doPostBack, in the UI to generate URLs for “postbacks” to trigger server side execution. A postback is just a POST request with .NET specific state data in the body.
All this said, Chris maintains a booking system for a boat rental company. Specifically, he’s a developer at a company which the boat rental company hires to maintain their site. The original developer left behind a barnacle covered mess of tangled lines and rotting hull.
Let’s start with the view ASPX definition:
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-keyword">function</span> <span class="hljs-title function_">btnSave_Click</span>(<span class="hljs-params"></span>)
{
<span class="hljs-keyword">if</span> (someCondition)
{
<span class="hljs-comment">//Trimmed for your own sanity</span>
<span class="hljs-comment">//PostBack to Save Data into the Database.</span>
<span class="hljs-attr">javascript</span>:<%#<span class="hljs-title function_">getPostBack</span>()%>;
}
<span class="hljs-keyword">else</span>
{
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">" Save Booking "</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"btnSave"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Save [Alt]"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"btnSave_Click()"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
__doPostBack is the .NET method for generating URLs for performing postbacks, and specifically, it populates two request fields: __EVENTTARGET (the ID of the UI element triggering the event) and __EVENTARGUMENT, an arbitrary field for your use. I assume getPostBack() is a helper method which calls that. The code in btnSave_Click is as submitted, and I think our submitter may have mangled it a bit in “trimming”, but I can see the goal is to ensure than when the onclick event fires, we perform a “postback” operation with some hard-coded values for __EVENTTARGET and __EVENTELEMENT.
Or maybe it isn’t mangled, and this code just doesn’t work?
I enjoy that the tool-tip “title” field specifies that it’s “[Alt]” text, and that the name of the button includes extra whitespace to ensure that it’s padded out to a good rendering size, instead of using CSS.
But we can skip past this into the real meat. How this gets handled on the server side:
Protected <span class="hljs-keyword">Sub</span> Page_Load(<span class="hljs-keyword">ByVal</span> sender As Object, <span class="hljs-keyword">ByVal</span> e As System.EventArgs) Handles <span class="hljs-keyword">Me</span>.Load
<span class="hljs-comment">'// Trimmed more garbage</span>
<span class="hljs-keyword">If</span> Page.IsPostBack <span class="hljs-keyword">Then</span>
<span class="hljs-comment">'Check if save button has been Clicked.</span>
<span class="hljs-keyword">Dim</span> eventArg As String = <span class="hljs-built_in">Request</span>(<span class="hljs-string">"__EVENTARGUMENT"</span>)
<span class="hljs-keyword">Dim</span> offset As Integer = eventArg.IndexOf(<span class="hljs-string">"@@@@@"</span>)
<span class="hljs-keyword">If</span> (offset > <span class="hljs-number">-1</span>) <span class="hljs-keyword">Then</span>
<span class="hljs-comment">'this is an event that we raised. so do whatever you need to here.</span>
Save()
<span class="hljs-keyword">End</span> <span class="hljs-keyword">If</span>
<span class="hljs-keyword">End</span> <span class="hljs-keyword">If</span>
<span class="hljs-keyword">End</span> <span class="hljs-keyword">Sub</span>
From this, I conclude that getPostBack populates the __EVENTARGUMENT field with a pile of “@”, and we use that to recognize that the save button was clicked. Except, and this is the important thing, if they populated the ID property with btnSave, then ASP .Net would automatically call btnSave_Click. The entire point of the __doPostBack functionality is that it hooks into the event handling pattern and acts just like any other postback, but lets you have JavaScript execute as part of sending the request.
The entire application is a boat with multiple holes in it; it’s taking on water and going down, and like a good captain, Chris is absolutely not going down with it and looking for a lifeboat.
Chris writes:
The thing in its entirety is probably one of the biggest WTFs I’ve ever had to work with.
I’ve held off submitting because nothing was ever straight forward enough to be understood without posting the entire website.
Honestly, I’m still not sure I understand it, but I do hate it.
[Advertisement]BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!
Source: Read MoreÂ
