ajax post data null in mvc core controller method

Question

I faced this problem here , but I can not solve it . I searched a lot and tried every solution I found on the similar post . so if there is any help to my case . my part of my app which I found the problem in , first here is my view , I have Categories dropdown when I choose a category I will load the property of that value in a table.

@model Demo.Models.ViewModel.DeviceVM

<form method="post">

    <input hidden asp-for="@Model.device.ID" />

    <div class="border p-3">

        @*putting the page label*@
        <div class="row">
            <h3 class="text-info pl-3 pb-3">Create Device</h3>
        </div>

                @*fifth Row => Category List*@
                <div class="form-group row">

                    @*field Label*@
                    <div class="col-4">
                        <label asp-for="@Model.device.CategoryID"></label>
                    </div>

                    @*field Text*@
                    <div class="col-8">

                        <select asp-for="@Model.device.CategoryID" asp-items="@Model.CategoryDropDown" class="form-control"
                                id="CategoryList">
                            <option value="">-- Select Category --</option>
                        </select>
                        <span asp-validation-for="@Model.device.CategoryID" class="text-danger"></span>
                    </div>
                </div>


                <div class="form-group row">
                    <div class="col-4">
                        <label>Category Properties</label>
                    </div>
                    <div class="col-8">
                        <table class="table table-bordered table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Property</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody id="plist">

                            </tbody>
                        </table>
                        
                    </div>
                </div>



                @*Seventh Row => Buttons*@
                <div class="form-group">

                    <div class="col-8 offset-4 row">

                        @*Save Button*@
                        <div class="col">
                            <input type="submit" value="Save" asp-action="Create" class="btn btn-info w-100" />
                        </div>

                        @*Back Button*@
                        <div class="col">
                            <a class="btn btn-success w-100" asp-action="Index">Back</a>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</form>

@section Scripts
{
   
    <script>

        $(function ()
        {

            $('#CategoryList').on("change", function () {
                var _category = $('#CategoryList').val();
                var obj = {CategoryID:_category};
                AjaxCall("GetCategoryProperty", JSON.stringify(obj), 'POST').done(function (response) {
                    console.log(JSON.stringify(obj));
                    if (response.length > 0)
                    {
                        console.log("i'm here ");
                    }
                }).fail(function (error) {
                    alert(error.StatusText);
                });                
            });

        });

        function AjaxCall(url, data, type) {
            return $.ajax({
                url: url,
                type: type ,
                data: data ,
                contentType: 'application/json; charset=utf-8',
                dataType:'json'
            });
        }
    </script>

}

here is my Category Model

public class Category
{
    [Key]
    public int ID { get; set; }

    [Required,MaxLength(15),Display(Name ="Category Name")]
    public string CatName { get; set; }

    public virtual ICollection<Category_Property> categoryprperties {get;set;}

}

here is my Function in the view which always receive 0 in it's parameter

    [HttpPost]
    public JsonResult GetCategoryProperty([FromBody]int CategoryID)
    {
        DeviceVM obj = new DeviceVM();

        var _CategoryProperty = (from cp in _db.Category_Property
                                 join p in _db.Property on cp.PropertyID equals p.ID
                                 where cp.CategoryID == CategoryID
                                 select new { cp.CategoryID, p.Description, cp.PropertyID });



        return Json(_CategoryProperty );
    }

I opened the inspect in the browser I it did not reach the message inside the if block because ajax always send 0 for the category id , which I asking for a help to get work.

Rena · Accepted Answer · 2022-01-28 03:20:22Z

Two ways you can achieve your requirement.

The first way you can post the id by form like below:

1.Change JSON.stringify(obj) to obj and remove contentType: 'application/json; charset=utf-8',:

$(function ()
{
    $('#CategoryList').on("change", function () {
        var _category = $('#CategoryList').val();
        var obj = {CategoryID:_category};     
                                           //change here...
        AjaxCall("/home/GetCategoryProperty", obj, 'POST').done(function (response) {
            console.log(JSON.stringify(obj));
            if (response.length > 0)
            {
                console.log("i'm here ");
            }
        }).fail(function (error) {
            alert(error.StatusText);
        });                
    });

});

function AjaxCall(url, data, type) {
    return $.ajax({
        url: url,
        type: type ,
        data: data ,
        //contentType: 'application/json; charset=utf-8',
        dataType:'json'
    });
}

2.Remove [FromBody] or add [FromForm]:

public class HomeController : Controller
{
    [HttpPost]
    public JsonResult GetCategoryProperty(int CategoryID)
    {
         //...
    }
}

The second way you can post it by body, you need create a model like below then reserve your js code:

public class Test
{
    public int CategoryID { get; set; }
}

Change your action:

public class HomeController : Controller
{
    
    [HttpPost]
    public JsonResult GetCategoryProperty([FromBody] TestM model)
    {
        //...
    }
}

thanks Rena the first solution worked , how i did not try it from the first .. thanks

Collectives™ on Stack Overflow

ajax post data null in mvc core controller method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related