Fill second Dropdown depending on first Dropdown in asp.net Core Razor Pages

Question

I have a form in asp.net Core MVC with multiple text input fields and two dropdowns (select). The options from the second select need to change when the index from the first select changes. (I choose a project with the first select and a row in this project with the second select).

How can i change the options from the select without losing all other text field inputs (postback/reload)

Here is my code i have so far

<form asp-controller="Settings" asp-action="Login" method="post">

...

<!--Project-->
<select name="board">
    @if (userIndex == 0 || userData[userIndex].ProjectId == null)
    {
        <option selected disabled value="-1">Choose a Project</option>
    }
    @for (int i = 0; i < projectData.Count; i++)
    {
        if (userIndex != 0 && userData[userIndex].ProjectId == projectData[i].Idx)
        {
            <option selected value="@projectData[i].Idx">@projectData[i].projectName</option>
        }
        else
        {
            <option value="@projectData[i].Idx">@projectData[i].projectName</option>
        }
    }
</select>

<!--Row-->
<!--todo update this after project change and show only rows from one project-->
<select name="row">
    @if (userIndex == 0 || userData[userIndex].RowId == null)
    {
        <option selected disabled value="-1">Choose a Row</option>
    }
    @{
        List<Row> filteredRowData = rowData.Where(row => /*Match selected Project from name="board"*/).ToList();
    }
    @for (int i = 0; i < filteredRowData.Count; i++)
    {
        if (userIndex != 0 && userData[userIndex].RowId == rowData[i].Idx)
        {
            <option selected value="@rowData[i].Idx">@rowData[i].RowName</option>
        }
        else
        {
            <option value="@rowData[i].Idx">@rowData[i].RowName</option>
        }
    }
</select>

...

</form>