使用 ajax 使用文本框中的值调用 ActionResult。

Question

用户更新的唯一字段是QuantityDelivered，然后用户单击Accept 按钮以通过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"
        }
    });
});

我只想使用用户单击按钮 AcceptItem 时输入的值调用 ActionResult。

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

并且该操作将简单地返回一个简单的 Person 对象（我将其用于示例目的）。

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