Web Dev .NET

"The ASPInsiders team spends countless hours answering questions and giving guidance to other ASP.NET developers, as well as providing feedback and diretion on new features for future ASP.NET releases. Their work and contributions are invaluable." 

Scott Guthrie 

Product Unit Manger, Web Platforms, Microsoft Corporation

Note: The ASPInsiders group is different from the Microsoft MVP award. Many of the ASPInsiders either are or have been a Microsoft MVP as well, but there are also many that have not. There is not a 1:1 correlations between the two groups.  

I recently finished reading the 51 Tips, Tricks, and Recipes with jQuery & ASP.NET Controls eBook by Suprotim Agarwal. The eBook is $14.99 and it comes with a 14 day 100% money back guarantee. It can be ordered from the DotNetCurry website.

This eBook reminded me a lot of Cody Lindley’s jQuery Enlightenment in that it split it’s eBook into small bit size installments (known as recipes) that can be consumed either sequentially or on a individual basis. The recipes are organized into situations or problems that you might want to solve using jQuery. This eBook differs from jQuery Enlightenment in that it focuses on the interaction with ASP.NET WebForms, which has a unique rendering of its server controls.

Most of my web development history has been doing ASP.NET WebForms (and more recently ASP.NET MVC) so, I enjoyed reading this eBook. I could understand the situations, problems, and pain points that the eBook addressed. It was nice to see how jQuery can resolve these issues in an unobtrusive and cross-browser way while only requiring a small amount of code.

Each recipe is formatted in the same way…

• A challenge that explains the situation, problem, or pain point being addressed
• The solution displayed in the form of HTML and jQuery
• An explanation of the code broken up in paragraphs, code snippets, and screen shots
• A link to a live demonstration
• A list of supported browsers for the above recipe
• Useful links that are appropriate to further explain features from the code.

I would have written some of the code differently and I did find some performance concerns, but nothing major and when push comes to push and shove many micro-optimizations become moot in the big picture. Selector optimization and looping performance can help make your code become more efficient, but it is really DOM manipulation that will kill your performance in the end.

Updated: I have updated this post with a link to my detailed findings, suggestions, and opinions. You can find my comments here.

Despite these minor issues, I do recommend this eBook for any ASP.NET WebForms developer hoping to learn how jQuery could be integrated into their environment.    

There is a feature of ASP.NET that isn't widely known called MaintainScrollPositionOnPostback, which is a common way of maintaining the scroll position after a Postback. Behind the scenes ASP.NET passes a hidden variable with the page location and resets it with JavaScript after the page re-renders.

<%@ Page 
   Title="Page Title Here" 
   MaintainScrollPositionOnPostback="true" 
   Language="C#" 
   MasterPageFile="~/YourMasterPage.master" 
   AutoEventWireup="true" 
   CodeBehind="YourCodeBehind.aspx.cs" 
   Inherits="YourCodeBehind" %>

However, this method will not work if the Postback does a Redirect on the server.

If the Postback does a Redirect instead of re-rendering the same page, then you could use the ScrollSaver jQuery script. All you have to do is include the script on the page and before a Postback occurs it will save the location of each element in a cookie and then restore it when the page re-renders. This will work for both a Postback and a Redirect.

All you have to do is include the jQuery plugin into your page. You don’t have to actually call any jQuery methods… it just does everything for you!

<script type="text/javascript" src="scrollsaver.min.js"></script>

I would recommend only adding this script to the page you are interested in maintaining position in order to minimize any risk of affecting other pages in your project. The overhead of the minimized plugin is only 1.63K and when you consider it will get cached on the client that is pretty good :)

I’ve been writing an Error Hander HttpModule for a current ASP.NET WebForm project and things were going well until my last merge with TFS. All of a sudden, my HttpModule wouldn’t register anymore.

For the life of me I couldn't’ figure out what had changed. I spent half the day trying to figure out what in the world was going on.

Here is the chain of events that I tried before finding the actual solution. If you want, you can just skip to the end to find the answer :)

First, I decided to strongly sign the assembly with the HttpModule (even thought it wasn’t necessary previously)…

So, I created a new Strong Name Key from the properties window of my HttpModule project from Visual Studio 2008

Then, in order for me to get the Public Key Token to decorate the HttpModule entry in the web.config, I used the following command line tool

sn –T ErrorFramework.dll

Note: You might consider integrating this command into a Get Public Key Token External Tool in Visual Studio 2008.

Here is what my original web.config entry looked like before:

<add name="ExceptionModule" type="ErrorFramework.ExceptionModule, ErrorFramework" /> 

and after all of the above steps I was able to update my web.config to the following:

<add name="ExceptionModule" type="ErrorFramework.ExceptionModule, ErrorFramework, Version=1.0.0.0, Culture=neutral, PublicKeyToken=7125b1d9a03db888" />      

However, to my dismay the HttpModule still did not register!

Secondly, I tried dynamically registering my HttpModule in the Global.asax instead of relying upon the web.config.

namespace ErrorFramework
{
    public class Global : System.Web.HttpApplication
    {
        public static ExceptionModule errorModule = new ExceptionModule();

        public override void Init()
        {
            base.Init();
            exceptionModule.Init(this);
        }
    }
}

Thirdly, I decided to use Visual Studio’s internal webserver (Cassini).

Fourthly, I finally found the answer I was looking for.

<system.web>
    <!-- Misc XML -->
    <httpModules>
        <add name="ExceptionModule" type="ErrorFramework.ExceptionModule, SG.SSP.Darwin.WebPortalFramework, Version=1.0.0.0, Culture=neutral, PublicKeyToken=7125b1d9a03db888" />      
    </httpModules>
    <!-- Misc XML -->
</system.web>

<system.webServer>
    <!-- Misc XML --> 
    <modules> 
        <add name="ExceptionModule" type="ErrorFramework.ExceptionModule, SG.SSP.Darwin.WebPortalFramework, Version=1.0.0.0, Culture=neutral, PublicKeyToken=7125b1d9a03db888" /> 
    </modules>
    <!-- Misc XML --> 
</system.webServer>

Note: If you want it to work both on IIS7 and through Cassini, then you’ll need to define it in both places ;)

I was recently working on an ASP.NET WebForm project where it made sense to use a modal dialog to confirm choices, to ask for additional information, etc…

I’ve used the jQuery BlockUI Plugin before and I’ve always thought it provided a good mix of nice features as well as extreme customization.

Ii went ahead an implemented BlockUI across the application and was satisfied on how it looked & felt, but I noticed some weird behavior on one of the modal screens. I had a screen that had numerous input controls (textboxes, dropdownlists, etc…) and when I posted back my results all of the input controls were blank!

Ahh, what do I do? Where are my updated input values?

Debugging Steps

1. Check to make sure I wasn’t re-initializing the input controls on PostBack
2. Investigate that I didn’t turn off viewstate by accident & make sure I wasn’t using dynamic controls

After those steps I was still confused and frankly wasting a lot of time with something I thought would be very quick.

To make a long story short, it was BlockUI that was clearing the input controls on PostBack!

So, I created a fresh demo application to replicate the issue and started investigating.

The following code shows how to recreate the issue and how to resolve the issue.

    <div>
        <asp:Panel ID="pnlMessage" runat="server" Visible="false">
            <asp:Label ID="lblMessage" runat="server" /><br />
        </asp:Panel>
        <asp:Button id="ctlAddContact" runat="server" Text="Add Contact" />
    </div>
    
    <div id="ctlAddContactModal" style="display: none;" class="modal">
        <h3>Add Contact</h3>
        <dl>
            <dt><asp:Label ID="lblFirstNameCaption" runat="server" AssociatedControlID="txtFirstName" Text="First Name" /></dt>
            <dd><asp:TextBox ID="txtFirstName" runat="server" /></dd>
            <dt><asp:Label ID="lblLastNameCaption" runat="server" AssociatedControlID="txtLastName" Text="Last Name" /></dt>
            <dd><asp:TextBox ID="txtLastName" runat="server" /></dd>
        </dl>
        <div class="buttons">
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
            <asp:LinkButton ID="btnFailureLink" runat="server" Text="Failure Save" CssClass="action" OnClick="btnFailureLink_Click" />
            <asp:LinkButton ID="btnSuccessLink" runat="server" Text="Success Save" CssClass="action" onclick="btnSuccessLink_Click" />
        </div>
    </div>
     

 
    <script type="text/javascript">
        $(function() {
            $('#<%= ctlAddContact.ClientID %>').click(function(e) {
                e.preventDefault();
                $.blockUI({
                    message: $('#ctlAddContactModal'),
                    css: {
                        cursor: 'auto'
                    }    
                });
            });

            $('#<%= btnCancel.ClientID %>').click(function(e) {
                $.unblockUI();
            });

            var btnSuccessLinkId = '<%= btnSuccessLink.ClientID %>';
            $('#' + btnSuccessLinkId).click(function(e) {
                e.preventDefault();
                $.unblockUI({
                    onUnblock: function() {
                        eval($('#' + btnSuccessLinkId).attr('href'));
                    }
                });
            }); 
        });
    </script> 

The issue is more obvious if you had used an <asp:Button /> in the above code snippet instead of an <asp:LinkButton /> as was the standard in my project. When using a <asp:Button /> the modal input form doesn’t submit at all! The BlockUI prevents the modal from from posting. I tried manipulating some of the plugin settings such as setting bindEvents = false and others, but nothing seemed to help.

So, the solution that works is…

1. Attach a jQuery click event to your LinkButton
2. Prevent the default click behavior of the LinkButton
3. Unblock the modal window to restore default behavior of input form
4. Add an onUnblock event to the modal window and evaluate the LinkButton’s href