Failed to load resource: the server responded with a status of 400 - using @Html.DropDownListFor

Question

I am trying to replicate the following Cascading DropDowns tutorial in my .net core application. I am using a WebAPI for my controllers and services... however to simplify and more closely match the tutorial, I have moved the controller to the client. The logic in the Controller is very similar to that of the tutorial, and clearly it is working well enough to at least populate the dropdowns initially on page load.

I am struggling a bit with the Javascript (which I believe is the cause of the 400 error), and I using a semi-custom model framework that is about 90% based on the tutorial model. The crazy thing is that the Javascript is running (I believe) since it stops at the breakpoints in the JS code as it initially populates the 3 drop downs on page load correctly. However, once I select any item in any of the 3 dropdown controls... instead of calling the 'on change' event, it triggers the following error:

Failed to load resource: the server responded with a status of 400 () [https://localhost:44317/]

I can provide more code if needed, but I have pasted below the crux of the logic that I believe is where the problem exists:

==== Index.cshtml code below ====

@page
@using Microsoft.Extensions.Configuration
@model MTGCardTracker.Client.Pages.IndexModel

    @using (Html.BeginForm("Index", "CascadingDropDownList", FormMethod.Post))
    {
        @Html.DropDownListFor(m => m.CascadingDropDown.FormatId, Model.CascadingDropDown.Formats, "Please select", new { @class = "form-control" })
        @Html.DropDownListFor(m => m.CascadingDropDown.EditionId, Model.CascadingDropDown.Editions, "Please select", new { @class = "form-control" })
        @Html.DropDownListFor(m => m.CascadingDropDown.CardListId, Model.CascadingDropDown.Cards, "Please select", new { @class = "form-control" })
        
    }

@section scripts {
    
}

Below is my model:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace MTGTracker.DTO
{
    public class CascadingDropDownDTO
    {
        public string FormatId { get; set; }
        public string EditionId { get; set; }
        public string CardListId { get; set; }
        public SelectList Formats { get; set; }
        public SelectList Editions { get; set; }
        public SelectList Cards { get; set; }

        public IEnumerable FormatObject { get; set; }
        public IEnumerable EditionObject { get; set; }
        public IEnumerable CardObject { get; set; }

    }
}

Below (in _Layout.cshtm) is I beleive the only place I am referencing the JS and Boostrap files in my code now:




    
    
    @ViewData["Title"] - MTGCardTracker
    
    

    
    @**@

    
    


    
        
            
                MTGCardTracker
                
                
                    
                        
                            Home
                        
                        
                            Privacy
                        
                    
                
            
        
    
    
        
            @RenderBody()
        
    

    
        
            © 2021 - MTGCardTracker - Privacy
        
    



    @await RenderSectionAsync("Scripts", required: false)

========== SetDropDownList ==========

[HttpPost]
public JsonResult SetDropDrownList(string type, int value)
{
    CascadingDropDownDTO model = GetCascadingDropDownListObject(CascadingDropDown);

    switch (type)
    {
        case "FormatId":
        var EditionsList = CascadingDropDown.EditionObject.Where(m => m.FormatId == value).ToList();
        model.Editions = new SelectList(EditionsList, "EditionId", "EditionName");
        var defaultEditionId = EditionsList.Select(m => m.EditionId).FirstOrDefault();
        model.Cards = new SelectList(CascadingDropDown.CardObject.Where(m => m.EditionId == defaultEditionId).ToList(), "CardListId", "Name");
        break;
        case "EditionId":
        model.Cards = new SelectList(CascadingDropDown.CardObject.Where(m => m.EditionId == value).ToList(), "CardListId", "Name");
        break;
    }
    return Json(model);
}

Token shown in code below even after I removed the submit button. So it seems it is simply tied to the page and/or the dropdowns.

Below is the Post. Not sure if I can drill down further for more details as I am still fairly new to trying to debug JS in the browser:

user_16467453 · Answer

OK, so the answer for me was a couple things, but the below piece was possibly the most crucial. I needed to add the line "endpoints.MapControllerRoute ..." to my Startup.cs configure() method:

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();

        endpoints.MapControllerRoute(name: "CascadingDropDownList", pattern: "{controller=CascadingDropDownList}/{action=Index}/{id?}");
    });

This allowed my Controller to be seen.

I also needed to modify my JS to account for the control id name changes since I was using a semi-custom nested model class that differed from the tutorial, and changed the $.post call from an action to a URL with the controller name and method call:

Now my SetDropDownList method is being called correctly. And while my dropdowns are not being popoulated correctly, they are being reset to empty by the JS calls, so I know I am at least targeting them correctly. Figuring out why they aren't getting the correct new filtered subset list is next.

Hopefull this helps someone else. I think the main issue is my lack of familiarity with MVC vs Razor MVC and all the basic fundumentals and nuances that come with them.

Failed to load resource: the server responded with a status of 400 - using @Html.DropDownListFor

1 Answers