Why it value does not send in to ajax post?-CodePudding

I'm a newbie working with ajax. I have a problem while sending the data into ajax post. The output of console.log(obj.Id) and console.log(oke) is 2. Then I tried to send it through data in ajax, but it end up 0 in the controller.

$(function () {
            $("body").on('click', '#btnEdit', function () {
                alert("clicked ok");
                $("#addRowModal").modal("hide");
                var obj = {};
                obj.Id = $(this).attr('data-id');
                oke = $(this).data("id");
                console.log(obj.Id)
                console.log(oke)
 
                $.ajax({
                    url: '@Url.Action("Details", "InvoicePPh")',
                    data: oke,
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        alert("sukses");
                    },
                    error: function(response) { 
                        alert("error") 
                    }
                });
            });
        });

And my controller looks like this

[HttpPost]
        public JsonResult Details(int id)
        {
            var obj = dbContext.invoicePPhs.FirstOrDefault(s => s.Id == id);
            InvoicePPh pph = new InvoicePPh();
            pph2326.TaxForm = obj.TaxForm;              
            return Json(pph);
        }

I want the '2' value that passes into my controller, how can I do that? Thank you for your help.

CodePudding user response：

Please change the data property in ajax part.

          $.ajax({
                url: '@Url.Action("Details", "InvoicePPh")',
                data: { id: oke },
                type: 'POST',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    alert("sukses");
                },
                error: function(response) { 
                    alert("error") 
                }
            });

CodePudding user response：

An alternative way to send your data your Controller method using Ajax would be to wrap your data in a JSON object and then send it to the server for processing. The server will be then deserialize your JSON object and you can access the required properties from that process:

$(function () {
    $("body").on('click', '#btnEdit', function () {
        alert("clicked ok");
        $("#addRowModal").modal("hide");
        var obj = {};
        obj.Id = $(this).attr('data-id');
        oke = $(this).data("id");
        console.log(obj.Id)
        console.log(oke)

        var json = {
           oke: oke
        };
        
        $.ajax({
            url: '@Url.Action("Details", "InvoicePPh")',
            data: {'json': JSON.stringify(json)},
            type: 'POST',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                alert("sukses");
            },
            error: function(response) { 
                alert("error") 
            }
        });
    });
});

And your Controller method will be:

using System.Web.Script.Serialization;

[HttpPost]
public JsonResult Details(string json)
{
    var serializer = new JavaScriptSerializer();
    dynamic jsondata = serializer.Deserialize(json, typeof(object));

    //Get your variables here from AJAX call
    var id= Convert.Int32(jsondata["id"]);
    var obj = dbContext.invoicePPhs.FirstOrDefault(s => s.Id == id);
    InvoicePPh pph = new InvoicePPh();
    pph2326.TaxForm = obj.TaxForm;              
    return Json(pph);
}

CodePudding user response：

If you just need id in your method parameter just change data in ajax to:

data: {'id': oke},

id is name of parameter from controller method.