Beyond 2020 twitterBeyond 2020 BlogBeyond 2020 Linkedinbeyond 2020 youtube

Tap in to your data’s intelligence

Beyond 20/20 Blog

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login

Experiences in Web application accessibility - No Javascript – Part 3: Form submission and multiple submit buttons, using ASP.NET button controls

Posted by on in Blog
  • Font size: Larger Smaller
  • Hits: 30672
  • Subscribe to this entry
  • Print

In the previous post, “No Javascript – Part 2: Form submission and multiple submit buttons”, I discussed the issues with having multiple submit buttons on a form when Javascript is not used.  The post finished with the mention of one possible solution: the use of ASP.NET button controls.  I will look at this solution in this post.

An ASP.NET button control is typically defined as follows:

            <asp:Button id=”myButton” text=”Submit the form” runat=”server” />

The value of the attribute id is the button’s unique identifier, the value of text is the button’s label, and runat=”server” identifies this element as an server control.  Typically, for the button’s “Click” event you would define a handler function that would be called when the button is clicked, using the function’s name as the value of the button’s OnClick attribute:

            <asp:Button id=”myButton” text=”Submit the form” OnClick=”MyClickHandler” runat=”server” />

ASP.NET renders the button as an HTML input element <input type=”submit” /> with other attributes as specified in the declaration of the button.

This is all straightforward and standard ASP.NET code.

One of the issues that we talked about in the previous blog post was how to have each button submit the form to a different page.  This didn’t seem possible without JavaScript because the form can only be submitted to the one and only URL specified by its action attribute.  What at first glance seems promising with ASP.NET button controls is their attribute called PostBackUrl that allows you to specify the URL to which the page will be posted when the button is clicked.  Unfortunately, this method requires JavaScript to be enabled in the browser as ASP.NET generates JavaScript for this.

Our only remaining choice then, is to have the Click event handler transfer us to the appropriate page.  This is accomplished by using the function Server.Transfer in the event handler.  Note that we can’t use Response.Redirect because this will not submit the form to the new page.  The drawback with using Server.Transfer is that the URL displayed in the browser will not change to reflect the page to which we transferred.  This can be an issue on some web sites since accessing a bookmarked page will not necessarily give you the content that was displayed when the bookmark was created.  This could be more of an issue with a more “static” web site than with a web application.  This is the price we have to pay if we want to post a form to one of many possible pages without using JavaScript.

ASP.NET defines two types of button controls: submit buttons and command buttons.  They both submit a form, but the command button allows you to submit a command name and command arguments along with the request.  The submit button is the ASP.NET button control that we’ve described so far.  The command button is declared in the same way with the addition of a CommandName attribute for the name of the command, an OnCommand attribute, instead of the OnClick attribute, for the name of the handler function to invoke, and an optional CommandArgument attribute to specify an extra argument to pass to the event handler.  An advantage of command buttons is that you can have one event handler for all your buttons.  This function can have one big switch statement for each possible command.  For example, we can declare two sort buttons like this:

            <asp:Button id=”btnSortA” text=”Sort ascending” CommandName= “sortA” OnCommand=”onSort_Click” runat=”server” />

            <asp:Button id=”btnSortD” text=”Sort descending” CommandName= “sortD” OnCommand=”onSort_Click” runat=”server” />

In the event handler onSort_Click I can check if the command is “sortA” or “sortD” and react accordingly.

If my buttons were part of a menu where each entry was supposed to take me to a different page, I could have the same CommandName value for each, and use the page’s URL for the CommandArguments attribute’s value.  In the event handler I would call Server.Transfer to transfer to the appropriate page.

There may be cases however, when you don’t want to use ASP.NET button controls.  There are various reasons for this, including the preference to generate your own HTML instead of using ASP.NET controls to do it.  I’ll discuss some of these reasons and other solutions in the next few posts.

Rate this blog entry:


  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest Monday, 22 July 2019