ASP.NET Core MVC create cascading dropdown lists from single table (Razor)

I'm first filling IdDegree dropdownlist, based on the selection fills the DegreeTitle dropdownlist. For example for IdDegree = 2, there are 2 in list and multiple DegreeTitle (test1, test2,..., test5) of data. So when the user selects IdDegree = 2, the DegreeTitle dropdownlist should be populated with test1, test2,...test5.

SQL database

Model class:

public partial class DegreeName
{
    public int Id { get; set; }
    public string IdDegree { get; set; }
    public string DegreeTitle { get; set; }
    public string DegreeName1 { get; set; }
}

Controller:

public async Task<IActionResult> Create([Bind("Id,IdDegree,DegreeTitle,DegreeName1")] DegreeName degreeName)
{
    if (ModelState.IsValid)
    {
        // List<DegreeName> IdDegree = new List<DegreeName>;

        ViewBag.IdDegree = db.DegreeName.ToList();

        return View();
    }

    db.Add(degreeName);
    await db.SaveChangesAsync();

    return RedirectToAction(nameof(Index));

    return View(degreeName);
}

This is the Razor view:

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="IdDegree" class="control-label"></label>
        <input asp-for="IdDegree" class="form-control" />
        <span asp-validation-for="IdDegree" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="DegreeTitle" class="control-label"></label>
        <input asp-for="DegreeTitle" class="form-control" />
        <span asp-validation-for="DegreeTitle" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="DegreeName1" class="control-label"></label>
        <input asp-for="DegreeName1" class="form-control" />
        <span asp-validation-for="DegreeName1" class="text-danger"></span>
    </div>

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>    
</form>

A lot of YouTube video and didn't fix my problem with single table cascading

From your question, I think when you create DegreeName item, you want to use cascading dropdown lists to fill IdDegree and DegreeTitle. I create a demo to show how to achieve it, hope it can help you solve the issue.

I create Model to save the value which you want to select in dropdownlist

public class DropDownData
{
public int Id { get; set; }
public string IdDegree { get; set; }
public string DegreeTitle { get; set; }
}

Controller Action:

public IActionResult CreateDegreeName()
{
var data = _context.dropDownDatas.Select(x=>x.IdDegree).Distinct().ToList();
var selectlist = new List<SelectListItem>();
var selectlistTitle = new List<SelectListItem>();
foreach (var item in data)
{
selectlist.Add(new SelectListItem() { Text = item, Value = item });
}
ViewBag.selectlist = selectlist;
return View();
}
[HttpPost]
public IActionResult CreateDegreeName(DegreeName model)
{
//..........save DegreeName into database....
//..............
}
public IActionResult addItem(string IdDegree)
{
var title = _context.dropDownDatas.Where(y => y.IdDegree == IdDegree).Select(x => x.DegreeTitle).ToList();
return Json(title);
}

View

@model DegreeName
<form  method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="IdDegree" class="control-label"></label>
<select asp-for="IdDegree" asp-items="@ViewBag.selectlist" class="form-control" onchange="Test(this)">
<option value="">Please Select IdDegree</option>
</select>
<span asp-validation-for="IdDegree" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DegreeTitle" class="control-label"></label>
<select asp-for="DegreeTitle"  class="form-control" disabled></select>
<span asp-validation-for="DegreeTitle" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DegreeName1" class="control-label"></label>
<input asp-for="DegreeName1" class="form-control" />
<span asp-validation-for="DegreeName1" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
@section Scripts{
<script>
function Test(a){
var postData = {
'IdDegree': a.value,
};
var items = '';
$.ajax({
type: 'Get',
url: '/Test/addItem/',
data: postData,
contentType: "application/json",
success: function (data) {
$('#DegreeTitle').prop('disabled', false);
for (var i = 0; i < data.length; i++){
items += "<option value = '" + data[i] + "'>" + data[i] + " </option>";
}
$('#DegreeTitle').html(items);
},
})
}
</script>
}

Demo: