Passing Data From Modal Popup To Controller

I'm trying send a params from bootstrap modal popup to my controlller, using Javascript and Ajax, but when I click button doesn't work on controller. How can I send this params? He

Solution 1:

Put all input inside form tag:

<form enctype="multipart/form-data">
<div class="modal fade" role="dialog" id="mymodal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">&times;</button>

            <label for="infoh" id="info" name="info"></label>
          <input type="hidden" id="infoh" name="infoh" value="" />
        </div> 
        <div class="modal-body">

                <div class="row">
                    <div class="col-md-3">
                        @Html.Label("Product : ")
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="input-sm"  id="product" name="product"/>
                    </div>
            </div><br />

            <div class="row">
                <div class="col-md-3">
                    @Html.Label("Price : ")
                </div>
                <div class="col-md-3">
                    <input type="number" class="input-sm" id="price" name="price"/>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-success" id="change"  onclick="func(this)"  name="change">@Html.Label("change") </button>
        </div>
    </div>
</div>
</form>

JavaScript code

function func(x) {
    var pricee = document.getElementById("price").value;
    var productt = document.getElementById("product").value;
    var info = document.getElementById("infoh").value;
    $.ajax({
        url: '@Url.Content("~/myController/Action/")',
        type: 'POST',
        dataType: 'application/json',
        data: { 'info': info, 'price': pricee, 'product': productt },
         success: function (response) {
            alert(responseText.text);
        }
    });

}

Take JSON post methode:

   [HttpPost]
    public JsonResult Action(string info, double price, double product)
    {
        db Entities updateaction = new dbEntities();
        int id = (Convert.ToInt32(Session["id"]));

        string myinfo = info;
        Product pp = updateaction.Product.Where(m => m.database_id.Equals(id) && m.name.Equals(myinfo)).SingleOrDefault();
        pp.price = price;
        pp.product = product;
        int i = updateaction.SaveChanges();
        Session["warning"] = i;
        return Json(new { success = true, responseText = " Sucessfully." }, JsonRequestBehavior.AllowGet);
    }

Solution 2:

There are many issues with your Javascript function, and here the correct one:

function func(x) {
        var pricee = document.getElementById("price").value;
        var productt = document.getElementById("product").value;
        var info = document.getElementById("infoh").value;
        $.ajax({
            url: '@Url.Content("~/myController/Action/")',
            type: 'POST',
            dataType: 'application/json',
            data: { 'info': info, 'price': pricee, 'product': productt },
            success: function () {
                alert("done");
            }
        });

    }