How to update a MVC Form before Submit

Question

So i have 2 Viewbags, they each have a list of values from a database table, the first Viewbag have all possible values of a database column, while the other have only the values corresponding to the selected value in the first Viewbag. I have the logic for the search. but i need to have the form update after selecting one value, since they both need to be in the same form, it is not searching for the second value.

OBS:i am only using the controllers, and cshtml views, not razor pages.

Answer 1

Here is a simple demo how to create cascading selectlist in asp.net core mvc:

Model:

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class SubCategory
{
    public int Id { get; set; }
    public int CategoryId { get; set; }
    public string SubCategoryName { get; set; }
}

View(Index.cshtml):

<div>
    <div style="float:left;width:40%">
        <form id="form">
            <div class="form-group row">
                <label>Category Name</label>
                <div class="col-12">
                    <select id="CategoryId" class="custom-select mr-sm-2"
                            asp-items="@(new SelectList( @ViewBag.Category,"Id","Name"))">
                        <option value="">Please Select</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label>SubCategory Name</label>
                <div class="col-12">
                    <select id="SubCategoryId" class="custom-select mr-sm-2"
                            asp-items="@(new SelectList(string.Empty,"Id","SubCategoryName"))">
                        <option value="">Please Select</option>
                    </select>
                </div>
            </div>
            <div>
                <input type="button" value="Search" />
            </div>
        </form>

    </div>
</div>

@section Scripts
{
    <script>
    $(function () {
        $('#CategoryId').change(function () {
            var data = $("#CategoryId").val();
            $.ajax({
                url: '/Home/GetSubCategory?CategoryId=' + data,
                type: 'Get',
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $('#SubCategoryId').html(items);  
                }
            })
        });           
    })
    </script>
}

Controller:

public class HomeController : Controller
{
    private readonly MvcProj3Context _context;    
    public HomeController(MvcProj3Context context)
    {
        _context = context;
    }
    public IActionResult Index()
    {
        ViewBag.Category = _context.Category.ToList();
        return View();
    }
    public JsonResult GetSubCategory(int CategoryId)
    {
        ViewBag.SubCategory = (from m in _context.SubCategory
                               where m.CategoryId == CategoryId
                               select m).ToList();
        return Json(new SelectList(ViewBag.SubCategory, "Id", "SubCategoryName"));
   }
}

Result: