ASP.Net Core SqlException: The INSERT statement conflicted with the FOREIGN KEY constraint

Hi,

I am trying to add new transaction but it is not working.

I removed the if statement i got this error:

SqlException: The INSERT statement conflicted with the FOREIGN KEY constraint "FK_Transaction_Categories_CategoryId". The conflict occurred in database "aspnet-ExpenseTracker-63f88f9b-d2f8-444d-a998-9ce2ab1e3f81", table "dbo.Categories", column 'CategoryId'. The statement has been terminated.

but in the tutorial i am follwing he is having the below line so this error will not occure:

public Category? Category { get; set; }

here is my code

// POST: Transaction/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("TransactionId,CategoryId,Amount,Note,Date")] Transaction transaction)
{
    if (ModelState.IsValid)
    {
        _context.Add(transaction);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    populateCategories();
    return View(transaction);
}

Transaction Model:

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

namespace ExpenseTracker.Models
{
    public class Transaction
    {

        [Key]
        public int TransactionId { get; set; }

        public int CategoryId { get; set; }

        public Category? Category { get; set; }

        public int Amount { get; set; }

        [Column(TypeName = "nvarchar(75)")]
        public string? Note { get; set; }

        public DateTime Date { get; set; }= DateTime.Now;


    }
}

AddOrEdit:

<div class="row">
    <div class="col-md-7">
        <div class="widget p-5" style="background-color:#212b36">
            <form asp-action="AddOrEdit">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="mb-3">
                    <ejs-datepicker id="date" ejs-for="Date" placeholder="Date"
                                    floatLabelType="Always" format="dd-MMM-yy"></ejs-datepicker>
                    <span asp-validation-for="Date" class="text-danger"></span>
                </div>
                <div class="mb-3">
                    <ejs-dropdownlist id="ddlCategory" ejs-for="CategoryId" dataSource="@ViewBag.Categories"
                    placeholder="Category" floatLabelType="Always" allowFiltering="true" ignoreAccent="true" filterType="Contains"
                    popupHeight="220px">
                <e-dropdownlist-fields id="CategoryId" Text="TitleWithIcon"></e-dropdownlist-fields>
                </ejs-dropdownlist>
                </div>
                <div class="mb-3">
                    <ejs-numerictextbox id="amount" ejs-for="Amount" placeholder="Amount" 
                    floatLabelType="Always" min=0 format="c0"></ejs-numerictextbox>
                    <span asp-validation-for="Amount" class="text-danger"></span>
                </div>
                <div class="mb-3">
                    <ejs-textbox id="note" placeholder="Note" ejs-for="@Model.Note" floatLabelType="Always"
                    multiline="true"></ejs-textbox>
                    <span asp-validation-for="Note" class="text-danger"></span>
                </div>
                <ejs-button id="submit" type="submit" cssClass="e-success" content="Submit"></ejs-button>
            </form>
        </div>
    </div>
    <div class="col-md-5">
        <div class="widget h-100 d-flex justify-content-center align-items-center">
            <i class="fa-solid fa-money-bill-transfer fa-2xl"></i>
        </div>
    </div>
</div>

what is wrong with the code?