Defining a default button with jQuery

In ASP.NET, you were able to set the default button for a form by simply specifying the name of the button you wanted to use when a user clicked on the Enter button. In ASP.NET MVC, we may still want to be able to configure which button we want to use by default. Regardless of need, this exercise will hopefully be a good introduction to using jQuery with your ASP.NET MVC form.

How to do it...

  1. Start from any of the previous recipes in this chapter and open up the HomeController. We're going to add an additional action called Article that takes two parameters—the form data in the form of an Article and a string to capture the button that was pressed. The action that captures the Article will allow only posts to it, so we'll decorate the action with an HttpPostAttribute.
    Controllers/HomeController.cs:
[HttpPost]
public ActionResult Article(Article article, string btnSubmit)
{
return View(article);
}

    Note

    You can have action overloads, just like you can have method overloads, because an action is a method. Compiling isn't the issue, the issue is the application's interpretation of the values passed into the routing dictionary. If you're going to overload your actions, make sure that they're unique enough to not leave any room for interpretation. Avoid multiple action overloads that take the same amount of nullable parameters. Making use of attributes such as HttpPost will also help avoid ambiguity.

  2. Replace the Submit button of your form with the following code. Notice that both the buttons are named btnSubmit. This allows us to capture either button when clicked in the controller. The form can be found in Article.aspx or _articleFormFields.ascx, depending on which recipe you have just finished.
    Views/Home/Article.aspx:
<input type="submit" name="btnSubmit" id="submitButton" value="Submit" />
<input type="submit" name="btnSubmit" id="cancelButton" value="Cancel" />
  3. Next, we need to update the form declaration. We will add attributes that will specify which default button to use and the ID of the form. I've used HTML5 data attributes, as they allow me the freedom to specify custom attributes and still remain compliant. The downside is that you have to pass the attributes as a dictionary, as the hyphen doesn't translate when using anonymous objects.
    Views/Home/Article.aspx:
<% using (Html.BeginForm("Article", "Home", FormMethod.Post, new Dictionary<string, object> { { "data-default", "submitButton" }, { "id", "form1" } })) { %>
  4. With all of this in place, we can now wire up some jQuery to glue it all together. The first step to adding in any jQuery is to open up your Site.Master file in the Views/Shared directory. Make some whitespace under the css link, then expand the Scripts directory and drag over the jquery-1.4.1.js file.
    Views/Shared/Site.Master:
<head runat="server">
...
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
  5. Now we can go back to the Article.aspx file. Directly above the content of the Article page, (above the default <h2> tags) we will add a new <script> block. Inside this script block, we'll add the script, which will be responsible for capturing the Enter key (character 13). Once captured, we'll trigger the click event of the button specified in the data-default attribute.
    Views/Home/Article.aspx:
<script type="text/javascript">
var buttonKeys = { enterKey: 13 };
$(function () {
$("#form1").keypress(function (evt) {
if (evt.which == buttonKeys.enterKey) {
evt.preventDefault();
var defaultButtonId = $(this).attr("data-default");
if (defaultButtonId != null)
$("#" + defaultButtonId).click();
}
});
});
</script>
  6. You should now be able to build and run your site. Navigate to Home/Article and view the form. Then put your cursor in any of the fields and hit Enter. This should submit your form. If you set a break point in your post-handling action, you should be able to see that the submitButton is the button that was used.
    How to do it...

How it works...

HTML5 data attributes provide an ideal way to add additional information to your markup. When the page is loaded, our jQuery script overrides the keypress event of the form with a custom function. If the Enter key is pressed, we trigger the click event of the specified default button. If you have plain old text areas in your form, you'll need some refinement to avoid creating a new line and inadvertently submitting the form at the same time.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset