The Orbit Notebook Software Architecture, Development and Design Thoughts

16Nov/100

Ugly Javascript Error when Downloading PDF Files (or other Response.Write files)

This past week, I had a creepy error hit me in an ASP.NET website that I inherited a few weeks ago.

Basically, the website allows you to click on a LinkButton to view a .PDF of a warranty's brochure.  When debugging the site in Firefox, nothing happened when I'd click the LinkButton.  And, I mean nothing.  Fortunately, the console in Firebug let me drill-in and view the details.  (IE also gave me the little "hazard sign" in the bottom left-hand corner, with the details)

Here's the error message:

Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.

After doing some research, I found a pretty simple solution for the error.

I'm not going to go into specifics about what and why the error occurred (Eilon Lipton does that for me, here) but I will tell you that the basic explanation is that my LinkButton was inside an UpdatePanel, and rendering from UpdatePanels (asynchronous postbacks) can get a little squirrely.

So, how did I fix it?  Directly under the declaration of my UpdatePanel, I added a PostBackTrigger, and pointed it at my LinkButton.  Voila.  Problem solved.

Here's the code snippet:

...

Hopefully, this one saves you some time. Cheers.

Filed under: Programming No Comments
12Nov/1032

ASP.NET and jQuery DataTables – The Basics, Part II

Okay, we left off having coded our data object, which will store our Oscar nominees. Now, here's where it gets fun. Let's add some markup to the .aspx page and get this thing running. First, add our link to the default stylesheet and our jquery javascript files into the section of the XHTML:


So, our links are in place, now let's add the Repeater. Keep in mind, the magic of jQuery DataTables lies in the fact that they will operate on any HTML tables. In fact, their website states that DataTables, "add advanced interaction controls to any HTML table". So, we're going to embed a table into our Repeater. I'm guessing most of you (if you've read this far) have worked with Repeaters and tables before, so I'm going to post the code, and you'll see the table structure embedded right into the Repeater. You'll want to place this code inside of the

and specifically, inside of a

.

Movie Lead Actor Lead Actress Director
     

As you can see, our column names are within   tags, and our databound elements are within   tags. The DataTables library will take care of being the brains of this operation. Speaking of the DataTables, now would be a good time to add the actual jQuery code to the section of this document. In fact, place the following code directly underneath our This code launches the DataTable functionality against our "tblOscarNominees" table, and even sets a few properties. In case you were wondering, the "oLanguage and sSearch" properties allow us specify our search bar text. The "iDisplayLength" property sets the default number of rows displayed, and the "aaSorting" property allows us to set the default sort column. If you check the DataTables website, there are tons of configurable properties for this plug-in. Okay, last but not least, we need to databind our Repeater. Pop back over to the Default.aspx.cs codebehind class. Directly below the code where we added "Milk" to our list of nominees, we need to set the datasource and databind the repeater:

  rptOscarNominees.DataSource = nominees; rptOscarNominees.DataBind();  

Build the website and run it. Your page should pop, and it should look just like this:

Go ahead, enter something in the search field. No postback! Sort the columns. Quick and easy. Paginating with no custom code. This plug-in would have saved me countless hours a few years ago. I love it.

Now, keep in mind, this is a very simple example, just to help you get your hands around the technology. But using this example, you can tweak the stylesheet to pretty up the table, and use the concept in your own day-to-day development. Hopefully, with this amazing plug-in, you can be a hero for your clients, too. Cheers!

Filed under: Programming 32 Comments