使用ajax從文本框中調用帶有值的ActionResult。

Question

用戶更新的唯一字段是QuantityDelivered，然後用戶單擊接受按鈕以更新通過Ajax輸入到文本框中的數字和ShoeOrderItem。

@for (int i = 0; i < Model.ShoeOrderItemList.Count(); i++) 
{ 
<tr> 
    <td class="text-center"> 
     @Html.HiddenFor(model => Model.ShoeOrderItemList[i].ShoeOrderItemId) 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].ShoeOrderItemId) 
    </td> 
    <td class="text-center"> 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].LineItemTotal) 
    </td> 
    <td class="text-center"> 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].ShoeSize.Size) 
    </td> 
    <td class="text-center"> 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].Shoe.ManufacturingCost) 
    </td> 
    <td class="text-center"> 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].Quantity) 
    </td> 
    <td class="text-center"> 
     @Html.DisplayFor(model => Model.ShoeOrderItemList[i].QuantityOutstanding) 
    </td> 
    <td> 
     @(Html.Bootstrap().TextBoxFor(m => m.QuantityDelivered) 
      .Placeholder("Quantity Delivered ") 
      .Prepend("#").Append(Html.Bootstrap() 
      .Button().Text("Accept").Id("AcceptItem"))) 
    </td> 
</tr> 
} 

阿賈克斯

$("#AcceptItem").click(function() { 
    var quatntity = @Html.Raw(Json.Encode(Model.QuantityDelivered)) 
    $.ajax({ 
    url: "ShoeOrder/CreateShoeDelivery", 
    type: "GET", 
    data: { 
      shoeOrderItemId: shoeOrderItemId[i], 
      quantityDelivered: quatntity, 
      dataType: "html" 
     } 
    }); 
}); 

我只是想呼籲與用戶輸入的值的ActionResult，當他們按一下按鈕AcceptItem。

Answer 1

我只想調用ActionResult，用戶在點擊按鈕AcceptItem時輸入的值爲 。

按照這種解決方案 -

說，你有以下形式。請給出正確的ID到輸入字段，並通知我做了一個POST操作。

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 

<script> 
    function submitForm() { 

     jQuery.ajax({ 
      type: "POST", 
      url: "@Url.Action("Submit")", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify({ name: $("#quantity").val() }), 
      success: function (data) { 
       alert(data.Name); 
      }, 
      failure: function (errMsg) { 
       alert(errMsg); 
      } 
     }); 
    } 
</script> 

<input type="text" id="quantity"/> 
<input type="button" value="Click" onclick="submitForm()" /> 

單擊按鈕時會打提交行動 -

public ActionResult Submit(string name) 
    { 
     return Json(new Person() { Name = name + " Its Me" }); 
    } 

和行動將簡單地返回的人一個簡單的對象（我用它爲例子的目的）。現在

public class Person 
{ 
    public string Name { get; set; } 
} 

當你點擊按鈕 -

如果你想使一個GET操作，然後jQuery代碼應該是這樣的 -

jQuery.ajax({ 
    type: "GET", 
    url: "@Url.Action("Submit")" + "/" + $("#quantity").val(), 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    data: "", //JSON.stringify({ name: $("#quantity").val() }), 
    success: function (data) { 
     alert(data.Name); 
    }, 
    failure: function (errMsg) { 
     alert(errMsg); 
    } 
}); 

}

不要忘記將AllowGet添加到JsonResponse -

public ActionResult Submit(string id) 
    { 
     return Json(new Person() { Name = id + " Its Me" }, JsonRequestBehavior.AllowGet); 
    }