Asp.Net Core: Send object and parameter to mvc controller using ajax?

Question

I want to send the form data $('#SearchProduct').serialize() with a parameter to the controller... But whatever I do, only one parameter is sent!!!

Jquery :

 const MainProducts = new Products();
MainProducts.LoadProducts(null, 1);

Search_Btn.click(function () {
    const Form_Data = SearchProduct.serialize();
    MainProducts.LoadProducts(Form_Data, 1);
});

Ajax :

 LoadProducts(ObjSearch, page) {       
console.log(page);
$.ajax({
    url: GetUrlAdmin.Product.AllShowProducts,
    type: "Get",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    data: { ObjSearch, page },
    dataType: 'json',
    contentType: 'application/json;charset=utf-8',
    success: function (result) {
    })

Controller :

 public async Task<JsonResult> GetAllShowProducts(ProductSearchViewModel model, int page)
    {
        var Products = await _admin.GetAllShowProducts(model, page);

        return Json(new { data = Products });

    }

I also tested the following code, but it was not sent again?

JSON.stringify(ObjSearch, page)

Answer 1

I want to send the form data $('#SearchProduct').serialize() with a parameter to the controller... But whatever I do, only one parameter is sent!!!

The issue might be relating to the form elements, when binding the form element and property, we need to bind it via the page model. You can refer to the following sample code (using VS 2022 and Asp.net 6 MVC) and then compare with your code.

Model:

public class Product
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string UrlImage { get; set; }
    public string Detail { get; set; }
    public decimal Price { get; set; }
}

Home controller:

    public IActionResult ProductCreate()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult ProductCreate(Product product)
    {
        return View();
    }

ProductCreate.cshtml:

@model MVCWebApp.Models.Product

@{
    ViewData["Title"] = "ProductCreate";
}

<h1>ProductCreate</h1>

<h4>Product</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form id="formprodcreate" asp-action="ProductCreate">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="UrlImage" class="control-label"></label>
                <input asp-for="UrlImage" class="form-control" />
                <span asp-validation-for="UrlImage" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Detail" class="control-label"></label>
                <input asp-for="Detail" class="form-control" />
                <span asp-validation-for="Detail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" /> 
                <input type="button" class="btn btn-primary" id="btnFormSubmit" value="Form Ajax Submit"/> 
                <input type="button" class="btn btn-primary" id="btnSubmit" value="Ajax Submit"/>
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

Js code: [Note] In the Ajax function, there is no need to set the datatype and contenttype.

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        $(function(){
            //use the serialize method to serialize the form.
            $("#btnFormSubmit").click(function(){
                $.ajax({
                    url: "/Home/ProductCreate",
                    type: "Post",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    data: $('#formprodcreate').serialize(), 
                    success: function (result) {
                    }
                 });
            });
            //create a JS object and get the entered value, then transfer the object to the controller.
            $("#btnSubmit").click(function(){
                var product = {};
                product.Id = $("input[name='Id']").val();
                product.Title = $("input[name='Title']").val();
                product.UrlImage = $("input[name='UrlImage']").val();
                product.Detail = $("input[name='Detail']").val();
                product.Price = $("input[name='Price']").val();

                $.ajax({
                    url: "/Home/ProductCreate",
                    type: "Post",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    data: product, 
                    success: function (result) {
                    }
                 });
            });
        });
    </script>
}

The output is like this: