[Solved] ASP.Net MVC: Model is null in Controller when send form modal popup using jQuery AJAX

Hi,

I have created asp.net project with Database first approach.

Auto generated table class created at the time of adding entityframework module.

controller are set and views also working but now facing new problem when i click on Edit button popup shows but when update category name and click on update button then category name save null in database

i also check all refrence name are correct but solution not found

can you please help

namespace Ecommerce_EF_DB_18May21.Models
{
    using System;
    using System.Collections.Generic;
 
    public partial class Tbl_Category
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Tbl_Category()
        {
            this.Tbl_Product = new HashSet<Tbl_Product>();
        }
 
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
        public bool IsActive { get; set; }
        public bool IsDelete { get; set; }
        public bool IsFeatured { get; set; }
        public string ImageURL { get; set; }
 
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Tbl_Product> Tbl_Product { get; set; }
    }
}

Controller Code:

        [HttpPost]
        public ActionResult Edit(int id)
        {
            OnlineShoppingEntities entities = new OnlineShoppingEntities();
            var Category = entities.Tbl_Category.Where(x => x.CategoryId == id)
                .Select(x => new Category
                {
                    CategoryId = x.CategoryId,
                    CategoryName = x.CategoryName//,
                    //Country = x.Country
                }).FirstOrDefault();
            return PartialView(Category);
        }

        [HttpPost]
        public ActionResult EditP(Tbl_Category Category)
        {
            OnlineShoppingEntities entities = new OnlineShoppingEntities();
            var CategoryUpdate = entities.Tbl_Category.Where(x => x.CategoryId == Category.CategoryId).FirstOrDefault();
            CategoryUpdate.CategoryName = Category.CategoryName;
            //CategoryUpdate.Country = customer.Country;
            entities.SaveChanges();
            return Json("Success");
        }

Edit Button Code to call Popup:

    <script type="text/javascript">
        $(function () {
            $("[id*=BtnEdit]").click(function () {
                var CategoryId = $(this).attr('data-id');
                $.ajax({
                    type: 'POST',
                    url: '/Category/Edit',
                    data: { id: CategoryId }
                }).done(function (response) {
                    $("#actionCon").html(response);
                    $("#myModalEdit").modal('show');
                }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                    alert("Fail");
                });
            });
        });
</script>

Edit Page :

@*@model List<Ecommerce_EF_DB_18May21.Models.Tbl_Category>*@
 
@{
    ViewBag.Title = "Edit";
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=UpdateBtn]").click(function () {
            var Category = {};
            Category.CategoryId = $('[id*=hfId]').val();
            Category.CategoryName = $('[id*=txtName]').val();
            //Category.Country = $('[id*=txtCountry]').val();

            $.ajax({
                type: 'POST',
                url: '/Category/EditP',
                data: JSON.stringify(Category),
                contentType: "application/json; charset=utf-8",
                dataType: "html",
            }).done(function (response) {
                window.location.href = "/Category/Index";
            }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            });
        });
    });
</script>

<form id="EditCat">
    <div class="container">
        <!-- The Modal -->
        <div class="modal fade" id="myModalEdit">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Category</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <input id="hfId" type="hidden" name="ID" value="@Model.CategoryId" />
                        <div class="form-group">
                            <input type="text" value="@Model.CategoryName" class="form-control" id="txtName" name="CategoryName" placeholder="Enter Name" />
                        </div>
                        @*<br />
                        <div class="form-group">
                            <input type="text" value="@Model.Country" class="form-control" id="txtCountry" name="Name" placeholder="Enter Country" />
                        </div>*@
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button id="UpdateBtn" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>