CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
stink
stink

Reputation: 865

Use ajax to call ActionResult with value from text box.

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.

Upvotes: 0

Views: 2074

Answers (1)

ramiramilu
ramiramilu

Reputation: 17182

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

Upvotes: 1

Related Questions