ASP.NET Core Razor - cascade dropdown from 4 tables

Marius Vasile

The problem is I have 4 tables, Table 1, Table 2, Table 3 and Table 4. Table 1 has one-to-many relations with Table-2, Table 2 one-to-many to Table 3 and so on. all are similar on content, tables content below

public class HazardsClass
{
[Key]
public int IdHC { get; set; }
public string HazClass { get; set; }
public ICollection HazardsDetails { get; set; }
}
public class HazardsDetail
{
[Key]
public int IdH { get; set; }
public string HazDetail { get; set; }
public int IdHC { get; set; }
[ForeignKey("IdHC")]
public HazardsClass HazardsClass { get; set; }
public ICollection HazardsPMClasses { get; set; }
}
public class HazardsPMClass
{
[Key]
public int IdPMC { get; set; }
public string HazPMClass { get; set; }
public int IdH { get; set; }
[ForeignKey("IdH")]
public HazardsDetail HazardsDetail { get; set; }
public ICollection HazardsPMDetails { get; set; }
}
public class HazardsPMDetail
{
[Key]
public int IdPM { get; set; }
public string HazPMDetail { get; set; }
public int IdPMC { get; set; }
[ForeignKey("IdPMC")]
public HazardsPMClass HazardsPMClass { get; set; }
}

My problem is to view the information in dropdown lists, ex. First I choose a HazClass then from the list I choose a HazDetails and so on.

How do I do that?

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh6y ago
Accepted answer
use jquery ajax
step 1. create 1 dropdown and bind it with model
step 2.create 3 empty dropdown.
step3.On selection change of 1st dropdown send a post request, fetch data based on selected Id and bind 2nd dropdown and so on.
below is the example of country and states , country is already filled with options using model and on country selection country id is being send to backend and it fetches states of that country and bind state dropdown.
$(function () {
       $("#CountryId").change(function () {
                var selectedItem = $(this).val();
                var ddlStates = $("#StateId");
             var statesProgress = $("#states-loading-progress");
            statesProgress.show();
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                   data: { "countryId": selectedItem },
                   success: function (data) {
                       ddlStates.html('');
                       $.each(data, function (id, option) {
                           ddlStates.append($('').val(option.id).html(option.name));
                       });

                   },

               });
           });
       });
+1
Marius Vasile6y ago
Finaly I used the solution here
https://www.twilio.com/blog/dropdown-lists-aspnet-core-razor-pages-view-models-ajax

Fits better with my Razor Pages but the other one works as well
+1
Marius Vasile6y ago
Snap shot on error

+1
Marius Vasile6y ago
Thank you Sachin, I already implemented the example on learnrazorpages.com
@section scripts{

but when I run it, the first level is Ok but for second level I have "undefined" see the model below and chtml.cs
public interface ICategoryService
    {
        IEnumerable GetHazardsClass();
        IEnumerable GetHazardsDetails(int idhc);
        IEnumerable GetHazardsPMClass(int idh);
        IEnumerable GetHazardsPMDetails(int idpmc);
    }
    public class CategoryService : ICategoryService
    {
        public IEnumerable GetHazardsClass()
        {
            return new List
            {
                new HazardsClass {IdHC = 1, HazClass = "Mechanical"}
                //HazardsClass = _context.HazardsClasses.ToList();
            };
        }
        public IEnumerable GetHazardsDetails(int idhc)
        {
            var hazDetails = new List {
                new HazardsDetail { IdH = 1, IdHC = 1, HazDetail ="Fall from height" },
                new HazardsDetail { IdH = 2, IdHC = 1, HazDetail ="Falls" }
            };
            return hazDetails.Where(s => s.IdHC == idhc);
        }
        public IEnumerable GetHazardsPMClass(int idh)
        {
            var hazPMClass = new List {
                new HazardsPMClass { IdPMC = 1, IdH = 1, HazPMClass = "Fall protection" }
            };
            return hazPMClass.Where(s => s.IdH == idh);
        }
        public IEnumerable GetHazardsPMDetails(int idpmc)
        {
            var hazPMDetail = new List {
                new HazardsPMDetail { IdPM = 1, IdPMC = 1, HazPMDetail = "Safety Harness" }
            };
            return hazPMDetail.Where(s => s.IdPMC == idpmc);
        }
an chtml.cs
private ICategoryService categoryService;
        public TestModel(ICategoryService categoryService) => this.categoryService = categoryService;

        [BindProperty(SupportsGet = true)]
        public int IdHC { get; set; }
        [BindProperty]
        public int IdH { get; set; }
        [BindProperty]
        public int IdPMC { get; set; }
        [BindProperty]
        public int IdPM { get; set; }
        public SelectList HazardClass { get; set; }

        public void OnGet()
        {
            HazardClass = new SelectList(categoryService.GetHazardsClass(), nameof(HazardsClass.IdHC), nameof(HazardsClass.HazClass));
        }
        public JsonResult OnGetHazardsDetails()
        {
            return new JsonResult(categoryService.GetHazardsDetails(IdHC));
        }
        public JsonResult OnGetHazardsPMClass()
        {
            return new JsonResult(categoryService.GetHazardsPMClass(IdH));
        }
        public JsonResult OnGetHazardsPMDetails()
        {
            return new JsonResult(categoryService.GetHazardsPMDetails(IdPMC));
        }
The startup is also updated
+1
Sachin Singh6y ago
sir
coding exactly for you is not possible, however the approach will be same whether you cascade 2 or 10 dropdowns,
follow the link if you are not getting how to post selected Id to pagemodel in razor pages
https://www.learnrazorpages.com/razor-pages/ajax/cascading-dropdowns
+1
Marius Vasile6y ago
Where do I handle "GetStatesByCountryId"? Your reply is so vague, it does not help at all, please be more specific if possible
+1