Filtering a second DropDown list by Ajax returns an error!

Question

User991566988 posted

Hi

I'm trying to filter a second dropdown list when choosing some value in first one.

Models:

    public partial class Cat
    {
        public int Id { get; set; }

        public string CatName { get; set; }     
    }

    public partial class Sub
    {
        public int Id { get; set; }
        public string SubName { get; set; }
        public int? CatId { get; set; }

        public Cat Cat { get; set; }
        

    }

Context and Controller:

    public class MyController : Controller
    {
        private readonly ApplicationDbContext _context;
        public MyController(ApplicationDbContext context)
        {
            _context = context;
        }
        //Some code

        public IActionResult Create()
        {
            ViewData["SubId"] = new SelectList(_context.Sub, "Id", "SubName");
            ViewData["CatId"] = new SelectList(_context.Cat, "Id", "CatName");
            return View();
        }

        public IActionResult SubDrop(int id)
        {
            var ModelCollection = _context.Sub.Where(mdl => mdl.CatId == id).ToList();
            return Ok(ModelCollection);
        }

My/Create view:

@model My
@*Some code*@

            <div class="form-group">
                <label asp-for="CatId" class="control-label"></label>
                <select asp-for="CatId" class="form-control" asp-items="ViewBag.CatId" id="Tss"></select>
            </div>


            <div class="form-group">
                <label asp-for="SubId" class="control-label"></label>
                <select asp-for="SubId" class="form-control" asp-items="ViewBag.SubId" id="Thh"></select>
            </div>

@*Some code*@


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    
    <script>
 $('#Tss').change(function () {
            var selected = $(this).val();
            $.ajax({
                url: '/My/SubDrop',
                data: { id: $('#Tss option:selected').val() },
                type: "post",
                cache: false,
            }).done(function (data) {
                var modelDropDown = $('#Thh');
                modelDropDown.empty();
                $.each(data["ModelCollection"], function (index, model) {
                    modelDropDown.append(
                        $('<option>', {
                            value: model.Value
                        }).text(model.Text)
                    );
                });
            }).fail(function (error) {
                //Do something with the error response
            });
        });

    </script>
}

reference for jQuery in shared _Layout view by local Metronic library (its the first reference in order):

<script src="~/Content/MetronicRTL/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>

Now this scenario gives me this error when selecting a value on 'Tss' select on console:

Uncaught TypeError: a is undefined

Why? and How to solve please?

Answer 1

User475983607 posted

You did not provide all the relevant code so there is no way to reproduce the actual error.   

I built a test based on your code but had to guess to fill in the blanks.  I found that the Sub properties are not referenced in the done promise. 

.done(function (data) {
    var modelDropDown = $('#Thh');
    modelDropDown.empty();
    $.each(data, function (index, model) {
        modelDropDown.append(
            $('<option>', {
                value: model.id
            }).text(model.subName)
        );
    });

My test code

public class jqueryController : Controller
{
    DbContext _context = new DbContext();

    public IActionResult Index()
    {
        ViewData["SubId"] = new SelectList(_context.Sub, "Id", "SubName");
        ViewData["CatId"] = new SelectList(_context.Cat, "Id", "CatName");
        return View();
    }

    public IActionResult SubDrop(int id)
    {
        var ModelCollection = _context.Sub.Where(mdl => mdl.CatId == id).ToList();
        return Ok(ModelCollection);
    }

}

@model ExampleVm
@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>
<div>
    <div class="form-group">
        <label asp-for="CatId" class="control-label"></label>
        <select asp-for="CatId" class="form-control" asp-items="ViewBag.CatId" id="Tss"></select>
    </div>


    <div class="form-group">
        <label asp-for="SubId" class="control-label"></label>
        <select asp-for="SubId" class="form-control" asp-items="ViewBag.SubId" id="Thh"></select>
    </div>
</div>

@section scripts {
    <script src="~/js/constants.js"></script>
    <script>
        $('#Tss').change(function () {
            var selected = $(this).val();
            $.ajax({
                url: '/jquery/SubDrop',
                data: { id: $('#Tss option:selected').val() },
                type: "post",
                cache: false,
            }).done(function (data) {
                var modelDropDown = $('#Thh');
                modelDropDown.empty();
                $.each(data, function (index, model) {
                    modelDropDown.append(
                        $('<option>', {
                            value: model.id
                        }).text(model.subName)
                    );
                });
            }).fail(function (error) {
                //Do something with the error response
            });
        });

    </script>
}

View Model

    public class ExampleVm
    {
        public int CatId { get; set; }
        public int SubId { get; set; }
    }

Answer 2

User991566988 posted

I tried your suggestions but the same error

    <script src="~/js/constants.js"></script>

Should I put this library in the view? send me a link for it if so please.

Answer 3

User-17257777 posted

Hi Musbah,

How about using jquery 3.5.1

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Best Regards,

Jiadong Meng

Answer 4

User475983607 posted

Contact Metronic for support.  While there are bugs in your AJAX function it seems you have other issues with the 3rd party template.