Использование ajax с MVC

Question

Я вижу сумку моего продукта ViewShoppingCart.ascx

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

И я хочу изменить количество в 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();" })%>
 <%} %>  

Когда я ввожу новое значение и нажимаю «Ввод», все работает как положено. Если я нажимаю «Tab» вместо «Enter», вместо формы ajax появляется новое окно

Что я делаю не так?

Answer 1

Один из способов - добавить кнопку отправки в форму (она может быть скрыта) и вызвать действие щелчка, чтобы оно вызвало асинхронную обратную передачу формы:

<%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" />
<% } %>

И если вам не нравится идея ставить скрытые кнопки, это тоже работает, но может показаться уродливым:

<%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));" 
        }) 
    %>
<% } %>

Не по теме: упростите свою жизнь с помощью ненавязчивого JavaScript и jQuery .