Using ajax with MVC

Question

I see my product’s bag ViewShoppingCart.ascx

<%= Ajax.ActionLink("Посмотреть карзину",
     "ViewShoppingCart", "Products",
     new AjaxOptions { UpdateTargetId = "content" })%>

And I want to change the quantity in ViewShoppingCart.ascx.

<%using (Ajax.BeginForm("UpdateItem", "Products", 
              new AjaxOptions { UpdateTargetId = "content" }))
  {%> 
      <%=Html.Hidden("productid", shoppingCartItem.Product.ProductID.ToString())%>
      <%=Html.TextBox("Quantity", shoppingCartItem.Quantity.ToString(), new { size = 2,
          maxlength = 2, onchange = "this.form.submit();" })%>
 <%} %>

When I enter a new value quantity and I press "enter" everything works as expected. If I press "Tab" instead "Enter" a new window appears instead of ajax form

What I do wrong?

Answer 1

One way would be to add a submit button to your form (it could be hidden) and invoke the click action so that it will trigger an asynchronous form postback:

<%using (Ajax.BeginForm("UpdateItem", "Products", 
         new AjaxOptions { UpdateTargetId = "content" })) {%> 
    <%=Html.Hidden("productid", shoppingCartItem.Product.ProductID.ToString())%>
    <%=Html.TextBox("Quantity", shoppingCartItem.Quantity.ToString(), new { size = 2,
        maxlength = 2, onchange = "document.getElementById('button').click();" })%>
    <input type="submit" id="button" style="display: none" />
<% } %>

And if you don't like the idea of putting hidden buttons this also works but one may find it ugly:

<%using (Ajax.BeginForm(
    "UpdateItem", 
    "Products", 
    new AjaxOptions { 
        UpdateTargetId = "content" 
    }, 
    new { 
        id = "myForm" 
    })) 
{ %> 
    <%=Html.Hidden("productid", shoppingCartItem.Product.ProductID.ToString())%>
    <%=Html.TextBox("Quantity", shoppingCartItem.Quantity.ToString(), 
        new { 
            size = 2,
            maxlength = 2, 
            onchange = "var event = new Object(); event.type='submit'; $get('myForm').onsubmit(new Sys.UI.DomEvent(event));" 
        }) 
    %>
<% } %>

Off-topic: simplify your life with unobtrusive javascript and jQuery.

Answer 2

Thank you very much, everything works