10

What is happening when you declare a Button to be used as the DefaultButton in an ASP.NET Panel? I understand that ASP.NET will render the contents of the Panel to a div and pass a bunch of stuff to the ViewState. Is there JavaScript inside the ViewState that handles the rendered Button's click event? I thought ViewState was just that - info about state. How does it work?

notAnonymousAnymore
  • 2,637
  • 9
  • 49
  • 74
  • ViewState is simply a means for ASP.NET pages to retain information between requests (Getting it from one page to another so to speak) - it does not affect client side JavaScript or implement any – m.t.bennett Jul 04 '13 at 23:20

1 Answers1

18

You're right about the ViewState. It's designed to keep Page and Controls values. That is, their state. You can confirm it here.

About the default button, there is no magic. A javascript is added to the div in order to bind the ENTER key event.

Let's check it out! This code:

<asp:Panel ID="panel" runat="server" DefaultButton="button">
    <asp:Button ID="button" runat="server" Text="this is the button" />
</asp:Panel>

Is rendered to this:

<div id="panel" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'button')">
  <input type="submit" name="button" value="this is the button" id="button">          
</div>

This javascript is generated by the WebForms engine, but we can look for it, if you're curious:

function WebForm_FireDefaultButton(event, target) {
    if (event.keyCode == 13) {
        var src = event.srcElement || event.target;
        if (!src || (src.tagName.toLowerCase() != "textarea")) {
            var defaultButton;
            if (__nonMSDOMBrowser) {
               defaultButton = document.getElementById(target);
            }
            else {
                defaultButton = document.all[target];
            }
            if (defaultButton && typeof(defaultButton.click) != "undefined") {
                defaultButton.click();
                event.cancelBubble = true;
                if (event.stopPropagation) event.stopPropagation();
                return false;
            }
        }
    }
    return true;
}

Notice how it tests if the currently focused control is a textarea. This is because an ENTER inside a textarea is mostly a new line, not a submit.

Andre Calil
  • 7,652
  • 34
  • 41