Use ajax to call ActionResult with value from text box.

Question

The only field that the user updates is QuantityDelivered, then the user clicks the Accept Button to update the number entered in the textbox and the ShoeOrderItem via Ajax.

@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>
}

Ajax

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

I would just like to call the ActionResult with the value entered by the user when they click the button AcceptItem.

score 1 · Answer 1 · answered Feb 17 '14 at 10:56

I would just like to call the ActionResult with the value entered by the user when they click the button AcceptItem.

Follow this solution -

Say you have following form. Please give proper id's to input fields and notice I made a POST operation.

<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()" />

On clicking the button would hit Submit Action -

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

and the action would simply return a simple object of Person (I used it for example purpose).

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

Now when you click on the button -

enter image description here

If you want to make a GET operation, then JQuery code should be like this -

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

}

Do not forget to add AllowGet to JsonResponse -

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

Thank you for your response. I need to pass the `shoeOrderItemId` from the hidden field and the `quantity` entered into the text box by the user `@Html.DisplayFor(model => Model.ShoeOrderItemList[i].Quantity)`. Would the best solution be to use a form like this? http://stackoverflow.com/questions/22013660/pass-entity-from-view-to-controller/22014301#22014301 — stink, Mar 02 '14 at 03:23

Use ajax to call ActionResult with value from text box.

1 Answers1