C# Mvc Web Api Cascading List

Question

This is my controller.

    public class DokuzasController : Controller
{
    public ActionResult AddOrEdit()
    {

        DersViewModel model = new DersViewModel();
        schoolEntities sc = new schoolEntities();
        List<ders> dersList = sc.ders.OrderBy(f => f.Ders1).ToList();

        model.DersList = (from s in dersList
                          select new SelectListItem
                          {
                              Text = s.Ders1,
                              Value = s.DersID.ToString()
                          }).ToList();

        model.DersList.Insert(0, new SelectListItem { Value = "", Text = "Select"});

        return View(model);
    }

    [HttpPost]
    public ActionResult AddOrEdit(DersViewModel model)
    {
        if (model.LectureId == 0)
        {
            HttpResponseMessage response = GlobalVariables.LecturesClient.PostAsJsonAsync("dokuzas", model).Result;
            TempData["SuccessMessage"] = "Saved.";
        }
        else
        {
            HttpResponseMessage response = GlobalVariables.LecturesClient.PutAsJsonAsync("dokuzas/" + model.LectureId, model).Result;
            TempData["SuccessMessage"] = "Successful.";
        }
        return RedirectToAction("Index");
    }

    [HttpPost]
    public JsonResult SaatList(int id)
    {
        schoolEntities sc = new schoolEntities();
        List<saat> saatList = sc.saat.Where(f => f.DersID == id).OrderBy(f => f.Saat1).ToList();
        List<SelectListItem> itemList = (from i in saatList
                                         select
                     new SelectListItem
                     {
                         Value = i.SaatID.ToString(),
                         Text = i.Saat1
                     }).ToList();

        return Json(itemList, JsonRequestBehavior.AllowGet);
    }
}

And this is my AddOrEdit file.

@model Mvc.Models.DersViewModel
@{
ViewBag.Title = "AddOrEdit";
}

@using (Html.BeginForm("AddOrEdit", "Dokuzas", FormMethod.Post))
{
@Html.DropDownListFor(m => m.DersID, Model.DersList)
<br /><br />
@Html.DropDownListFor(m => m.SaatID, Model.SaatList)

<br />
<input type="submit" value="Kaydet" class="btn button" />
}

@section scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $("#DersID").change(function () {
            var id = $(this).val();
            var saatList = $("#SaatID");
            saatList.empty();
            $.ajax({
                url: '/Dokuzas/SaatList',
                type: 'POST',
                dataType: 'json',
                data: { 'id': id },
                success: function (data) {
                    $.each(data, function (index, option) {
                        saatList.append('<option value=' + option.Value + '>' 
+ option.Text + '</option>')
                    });
                }
            });
        });
    });
</script>
}

I have a table and this table contains Dersadi and Dagilimi properties. I wanted to create a cascading list and add to table from this list from DersList to Dersadi and from SaatList to Dagilimi. But i choose items and select submit button i can submit it but it added null to the table. It did not add what i choose from the list. How can i fix this?

Answer 1

in the view, you can use the DropDownList helper method to render the SELECT element with the data we set to the Model.DersList . We will also add our second dropdown as well.

    @using (Html.BeginForm("AddOrEdit", "Dokuzas", FormMethod.Post))
    {
    @Html.DropDownList("DersID", Model.DersList as SelectList)
    <select name="id" id="SaatID" data-url="@Url.Action("SaatList","Home")">

    <br />
    <input type="submit" value="Kaydet" class="btn button" />
    }

<script type="text/javascript">
    $(function(){
    $("#DersID").change(function (e) {
        var $SaatID = $("#SaatID");
        var url = $SaatID.data("url")+'?id='+$(this).val();
        $.getJSON(url, function (items) {
            $.each(items, function (a, b) {
                $vacancy.append('<option value="' + b.Value + '">' + b.Text + '</option>');
            });
        });
    });    
});

</script>