ASP.Net Core POST operation Error loading page code 400

Hi,

I am trying to add or edit records in my db but I am getting error 400 for adding or editing records

Category Controller code:

// GET: Category/AddOrEdit
public IActionResult AddOrEdit(int id=0)
{
    if (id==0)
        return View(new Category());
    else
        return View(_context.Categories.Find(id));
}

// POST: Category/AddOrEdit
// To protect from overposting attacks, enable the specific properties you want to bind to.
// For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AddOrEdit([Bind("CategoryId,Title,Icon,Type")] Category category)
{
    if (ModelState.IsValid)
    {
        if (category.CategoryId == 0)
            _context.Add(category);
        else
            _context.Update(category);

        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(category);
}

AddOrEdit view:

@model ExpenseTracker.Models.Category

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

<div class="row">
    <div class="col-md-7">
        <div class="widget p-5">
            <form asp-action="AddOrEdit">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" name="CategoryId" value="@Model.CategoryId"/>
                <div class="mb-3">
                    <div class='e-btn-group custom-rbt-group'>
                        <input type="radio" id="radioleft" name="Type" value="Expense" checked="@(Model.Type == "Expense")" />
                        <label class="e-btn" for="radioleft">Expense</label>
                        <input type="radio" id="radiomiddle" name="Type" value="Income" checked="@(Model.Type == "Income")" />
                        <label class="e-btn" for="radiomiddle">Income</label>
                    </div>
                    <span asp-validation-for="Type" class="text-danger"></span>
                </div>
                <div class="mb-3">
                    <ejs-textbox id="title" placeholder="Title" ejs-for="@Model.Title" floatLabelType="Always"></ejs-textbox>
                    <span asp-validation-for="Title" class="text-danger"></span>
                </div>
                <div class="mb-3">
                    <ejs-textbox id="icon" placeholder="Icon" ejs-for="@Model.Icon" floatLabelType="Always"></ejs-textbox>
                    <span asp-validation-for="Icon" class="text-danger"></span>
                </div>
                <ejs-button id="submit" type="submit" cssClass="e-success" content="Submit" />
            </form>
        </div>        
    </div>
    <div class="col-md-5">
        <div class="widget h-100 d-flex justify-content-center align-items-center" style="background-color:#212b36">
            <i class="fa-solid fa-shapes fa-2xl"></i>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

Please help.