Second DropdownList will not be Filled

Question

I've used two Cascade DDLs on my Page. The method of work is that when the selected item DDL1 changes, the corresponding information should be filled in DDL2 . I used jQuery to call the DDL2 filler function: When I select DDL1 item, the FillTypes function is called and the corresponding records are passed to the jQuery ,But this items is not filled in DDL2 . I do not know where is my problem?

i attached screenshot

controler:

 ' GET: MachinInfo/Create
        Function MachinInfoAdd() As ActionResult
            ViewBag.BrandID = New SelectList(db.Brand, "Id", "BrandName")
            ViewBag.MachineID = New SelectList(db.MachinKind, "Id", "MachinName")
            ViewBag.MachinStateID = New SelectList(db.MachinState, "Id", "Title")
            ViewBag.PelakStateID = New SelectList(db.PelakState, "Id", "Title")
            ViewBag.GeartypeID = New SelectList(db.GearType, "Id", "Title")

            Return View()


        End Function

        ' POST: MachinInfo/Create
        'To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        'more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        <HttpPost()>
        <ValidateAntiForgeryToken()>
        Function MachinInfoAdd(<Bind(Include:="Id,PelakStateID,MachinStateID,OrgCode,MachineID,BrandID,MachintypeID,NPlate,NPlateL,NPlateM,NPlateR,CardSerial,VIN,Chasis,Motor,Myear,Color,GearTypeID,MCost,Mcamp,Description")> ByVal machinInfo As MachinInfo) As ActionResult
            If ModelState.IsValid Then
                ' If machinInfo.NPlate Is Nothing = False Then machinInfo.NPlate = machinInfo.NPlate.Replace("ایران", "").Replace(" ", "").Replace("-", "")
                db.MachinInfo.Add(machinInfo)
                db.SaveChanges()
                Return RedirectToAction("Index")
            End If

            ViewBag.BrandID = New SelectList(db.Brand, "Id", "BrandName", "SelectedBrandID")
            ViewBag.MachineID = New SelectList(db.MachinKind, "Id", "MachinName")
            ViewBag.MachinStateID = New SelectList(db.MachinState, "Id", "Title")
            ViewBag.PelakStateID = New SelectList(db.PelakState, "Id", "Title")
            ViewBag.GeartypeID = New SelectList(db.GearType, "Id", "Title")
            Return View(machinInfo)
        End Function
        
        
          Public Function FillTypes(ByVal MachinKindId As Integer) As JsonResult

            Dim MachinTypes = db.MachinType.Where(Function(c) c.MachinKindId = MachinKindId).ToArray
            Return Json(MachinTypes, JsonRequestBehavior.AllowGet)

        End Function

model:

Partial Public Class MachinType
    Public Property Id As Integer
    Public Property MachinTypeName As String
    Public Property BrandId As Integer
    Public Property MachinKindId As Integer

    Public Overridable Property MachinInfo As ICollection(Of MachinInfo) = New HashSet(Of MachinInfo)
    Public Overridable Property Brand As Brand
    Public Overridable Property MachinKind As MachinKind

End Class

view:

@ModelType Machinary.MachinInfo
@Code
    Layout = "~/Views/Shared/_Layout.vbhtml"
End Code

@Using (Html.BeginForm("MachinInfoAdd", "MachinInfo", FormMethod.Post))

    @Html.AntiForgeryToken()

    @<div class="panel">
      

        <div Class="form-horizontal panel-body">

            @Html.ValidationSummary(True, "", New With {.class = "text-danger"})
            

            <div class="row">
                <div class="form-group col-md-6">
                    @Html.LabelFor(Function(model) model.MachintypeID, htmlAttributes:=New With {.class = "control-label col-md-2"})
                    <div class="col-md-10">
                        <select id="MachintypeID" name="MachintypeID" class="form-control"></select>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    
                     @Html.LabelFor(Function(model) model.MachineID, htmlAttributes:=New With {.class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.DropDownList("MachineID", Nothing, "انتخاب کنید", htmlAttributes:=New With {.class = "form-control"})
                    @Html.ValidationMessageFor(Function(model) model.MachineID, "", New With {.class = "text-danger"})
                </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="ُSave" class="btn btn-success" />
                </div>
            </div>
            <br />
              </div>
              End Using




@section MyScripts

    <script type="text/javascript">
        $(function () {
            $('#MachineID').change(function () {
                var machineid = $(this).val();
                $.ajax({
                    type: "post",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: "FillTypes",
                    data: "{MachinKindId:'" + machineid + "'}",
                    success: function (data) {
                        $('#MachintypeID').empty();
                        $('#MachintypeID').append('<option selected="selected" value="">Select Machintype</option>')
                        $.each(data, function (i, d) {
                            $('#MachintypeID').append('<option value=' + d.Id + '>' + d.MachinTypeName + '</option>');
                        });

                    },
                    failure: function (data) {
                        alert('error occured');
                    }

                });
            });
        });
    </script>
End Section

Answer 1

With the tests I did, I realized that the problem in the code loop section is high. Because the loop part never runs. alert('a') always runs but alert('b') is never seen. And remember that FillTypes function will return the records

success: function (data) {
                    $('#MachintypeID').empty();
                    $('#MachintypeID').append('<option selected="selected" value="">Select Machintype</option>')
                    alert('a');
                    $.each(data, function (i, d) {
                        //$('#MachintypeID').append('<option>' + d.MachinTypeName + '</option>');
                        alert('b' );
                    });

                },`

Answer 2

Since you want to pass MachinKindId value as single parameter, it's unnecessary to use contentType setting, just pass it directly instead with GET method:

$.ajax({
    type: "GET", // use GET method
    dataType: "json",
    url: '@Url.Action("FillTypes", "ControllerName")',
    data: { MachinKindId: machineid },
    success: function (data) {
        $('#MachintypeID').empty();
        $('#MachintypeID').append('<option selected="selected" value="">Select Machintype</option>')
        $.each(data, function (i, d) {
            $('#MachintypeID').append('<option value=' + d.Id + '>' + d.MachinTypeName + '</option>');
        });
    },
    failure: function (data) {
        alert('error occured');
    }
});

Note:

I noticed you're not using <HttpPost()> attribute on top of FillTypes action and JsonRequestBehavior.AllowGet is used, therefore the type option must be set as GET because by default action methods have implicit <HttpGet()> attribute unless <HttpPost()> attribute is specified.