How can i pass Multiple Parameters to jQuery ajax call with datatype HTML

Question

I have the following jquery code to call a POST method in Asp.net core Controller

 $.ajax({
            url: '@Url.Action("GetItemsForRelease", "PointOfSales")',
            data: { requestModel: TFObj },
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            success: function (responsedata) {
                $("#releaseItemsPush").html(responsedata);
            },
            error: function (error) {
                console.log(error);
            }
        });

but following controller action shows null object

[HttpPost]
public ActionResult GetItemsForRelease(RequestModel requestModel)
{
  return PartialView("_partialReleaseItem", requestModel);
}

Does this answer your question? [jQuery posting JSON](https://stackoverflow.com/questions/5570747/jquery-posting-json) — Phil, Jan 10 '23 at 01:23
no, sorry iedited question again, controller action "requestModel" object always shows null — Abid Hussain, Jan 10 '23 at 01:26
You don't appear to be applying the solutions listed in the other post so it still looks like a duplicate — Phil, Jan 10 '23 at 01:29
Get rid of `contentType: "application/json; charset=utf-8",` which causing null data in your controller. — Md Farid Uddin Kiron, Jan 10 '23 at 01:30
Share either `TFObj` or `requestModel` details so that your issue can be investigated accordingly. — Md Farid Uddin Kiron, Jan 10 '23 at 01:42

Md Farid Uddin Kiron · Accepted Answer · 2023-01-10T02:12:02.170

Following controller action shows null object

Well, as per your shared code snippet contentType: "application/json; charset=utf-8 casuing null data on your controller it because you have define dataType as html but contentType: "application/json; charset=utf-8",. When we send html as dataType it would treat as text here in controller thus posted data has lost due to mismatched data type.

Let's assume you have following model:

Model:

public class RequestModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }

Ajax:

            var TFObj = {};
            TFObj.Id = 1; // You can get HTML as $('#Id').val()
            TFObj.Name = "Test Name";
            TFObj.Email = "Test Email";
            console.log(TFObj);

            $.ajax({
                url: "/PointOfSales/GetItemsForRelease",
                type: "POST",
                data: { requestModel: TFObj },
                dataType: "html",
                success: function (responsedata) {
                    $("#releaseItemsPush").html(responsedata);
                },
                error: function (error) {
                    console.log(error);
                }
            });

Note: Make sure, you data has been posted accordingly from your browser, by checking console as following:

Controller:

        [HttpPost]
        public ActionResult GetItemsForRelease(RequestModel requestModel)
        {
            return PartialView("_partialReleaseItem", requestModel);
        }

Output:

Note: You can see we are getting data in controller. So just get rid of your contentType would resolve your null data.

How can i pass Multiple Parameters to jQuery ajax call with datatype HTML

1 Answers1