Controller ActionResult methods parameter is not receiving form data from an ajax call

Question

I have a purchase form to receive some data according to a model but here my purchase_return object in the controller is not receiving any data. it is receiving productId 0 and productNm null. can anyone point out what is going on here? the html:

<form id="Purchase_ReturnForm">
    <div>
        <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.ProductId)
                </td>
                <td>
                    @Html.TextBoxFor(model => model.ProductId)
                </td>
                <td>
                    <input type="button" id="btnFind" value="Find" />
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.ProductNm)
                </td>
                <td>
                    <span id="edit">
                        @Html.TextBoxFor(model => model.ProductNm)
                    </span>
                </td>
            </tr>
        </table>
    </div>
</form>

the script:

 <script>
    $(document).ready(function () {
        $('#btnFind').click(function () {
            var data = $('Purchase_ReturnForm').serialize();
            $.ajax({
                type: 'Post',
                url: '/Purchase_Return/FindProductInvoice',
                data: data,
                success: function () {

                }
            })
        });
    });
</script>

in controller:

public ActionResult FindProductInvoice(Purchase_Return purchase_Return)
    {
        return View();
    }

And the model

 public class Purchase_Return
{
    //public DateTime ReturnDt { get; set; }
    //public int ReturnSl { get; set; }
    //public DateTime PurchaseDt { get; set; }
    //public int PurchaseSl { get; set; }
    //public double TotReturnAmt { get; set; }
    //public double TotVat { get; set; }
    //public double TotDiscount { get; set; }
    //public int CustomerSupplyId { get; set; }
    [Display(Name="Product")]
    public int ProductId { get; set; }
    public string ProductNm { get; set; }
    //public double PurchaseRt { get; set; }
    //public double PurchaseQty { get; set; }
    //public double ProductDisAmt { get; set; }
    //public double ProductVat { get; set; }
    //public string ReturnNote { get; set; }
    //public int InsertUserId { get; set; }
}

I think this [Link](https://stackoverflow.com/questions/33947882/pass-model-to-controller-using-jquery-ajax) can answer your question. — Amin Kamalinia, Jul 08 '18 at 07:57
you are missing # in $('Purchase_ReturnForm').serialize(),as you are using id — Anupam Singh, Jul 08 '18 at 08:04
thank you for pointing that out. i corrected this mistake but still not getting the form data. @AnupamSingh — , Jul 08 '18 at 08:11
try to inspect network call in browser and look at the data you are sending is formatted correctly. — Anupam Singh, Jul 08 '18 at 08:19
Can you give me a link from where i can learn how to inspect network call in v=browser @AnupamSingh — , Jul 08 '18 at 08:28
https://developers.google.com/web/tools/chrome-devtools/network-performance/ — Anupam Singh, Jul 08 '18 at 08:32

score 1 · Accepted Answer · answered Jul 08 '18 at 08:31

1

Add # sign in your data cause you are using a id selector to catch the form data.

$('#Purchase_ReturnForm').serialize()

It should work as you expected.

answered Jul 08 '18 at 08:31

Raihan Ridoy

678
8
18

Controller ActionResult methods parameter is not receiving form data from an ajax call

1 Answers1