Create Bin using ASP.Net Core

View

@model BinViewModel

<form id="binForm">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <fieldset>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateBinModel.StreetName, htmlAttributes: new { @class = "col-form-label" })
            @Html.TextBoxFor(model => model.CreateBinModel.StreetName, new { @class = "form-control", @placeholder = "Street Name", @autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.CreateBinModel.StreetName, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateBinModel.Capacity, htmlAttributes: new { @class = "col-form-label" })
            @Html.TextBoxFor(model => model.CreateBinModel.Capacity, new { @class = "form-control", @placeholder = "Capacity", @autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.CreateBinModel.Capacity, "", new { @class = "text-danger" })
        </div>
        <br />
        <button type="submit" id="btnCreateBin" class="btn btn-success">
            <span class="fa fa-arrow-right fa-fw"></span> Create Bin
        </button>
    </fieldset>
</form>

Model

 public class CreateBin
 {
     public string? StreetName { get; set; }
     public string? Capacity { get; set; }
 }
 public class BinViewModel
 {
     public CreateBin CreateBinModel { get; set; }
     public List<Bin> Bins { get; set; }
 }

Bin.js

$(document).ready(function () {
    $('#binForm').on('submit', function (e) {
        e.preventDefault();
        console.log($(this).serialize());
        $.ajax({
            url: '/Bin/Create', // Your action URL
            type: 'POST',
            data: $(this).serialize(),
            success: function (response) {
                if (response.success) {
                    $('#createBinModal').modal('hide');
                    $('#successModal .modal-body p').text(response.message);
                    $('#successModal').modal('show');
                } else {
                    // Display error modal with the error message
                    $('#createBinModal').modal('hide');
                    $('#errorModal .modal-body p').text(response.message);
                    $('#errorModal').modal('show');
                }
            }
        });
    });
});

Image:

I trying to Add bin then the value of model is null, Then i checked in the console log there are something. In the attached image I currently encountered issue. Can’t pass properly the value of the form to the model.

Can anyone help what is the mistake in the code.

Thank you