locked
populate dropdown list with ajax RRS feed

  • Question

  • User1119553929 posted

    MVC database fisrt EF


        public partial class Cursos
        {
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
            public Cursos()
            {
                this.Marcações = new HashSet<Marcações>();
                this.Módulos = new HashSet<Módulos>();
            }
        
            public int ID_Curso { get; set; }
            public string ID_Entidade { get; set; }
            public string Curso { get; set; }
            public Nullable<System.DateTime> Data_Início { get; set; }
            public Nullable<System.DateTime> Data_Fim { get; set; }
            public Nullable<int> Localidade { get; set; }
            public Nullable<int> Modalidade { get; set; }
            public Nullable<int> Área { get; set; }
            public Nullable<int> Horas { get; set; }
            public string Observações { get; set; }
        
            public virtual Áreas Áreas { get; set; }
            public virtual Entidades Entidades { get; set; }
            public virtual Localidades Localidades { get; set; }
            public virtual Modalidades Modalidades { get; set; }
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
            public virtual ICollection<Marcações> Marcações { get; set; }
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
            public virtual ICollection<Módulos> Módulos { get; set; }
        }
    }

        public partial class Módulos
        {
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
            public Módulos()
            {
                this.Marcações = new HashSet<Marcações>();
            }
        
            public int ID_Módulo { get; set; }
            public string ID_Entidade { get; set; }
            public Nullable<int> ID_Curso { get; set; }
            public Nullable<int> ID_Formador { get; set; }
            public string Módulo { get; set; }
            public Nullable<int> Área { get; set; }
            public Nullable<int> Duração { get; set; }
        
            public virtual Áreas Áreas { get; set; }
            public virtual Cursos Cursos { get; set; }
            public virtual Entidades Entidades { get; set; }
            public virtual Formadores Formadores { get; set; }
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
            public virtual ICollection<Marcações> Marcações { get; set; }
        }
    }

       public partial class Marcações
        {
            public int ID_Marcação { get; set; }
            public string ID_Entidade { get; set; }
            public Nullable<int> ID_Curso { get; set; }
            public Nullable<int> ID_Módulo { get; set; }
            public Nullable<System.DateTime> Data { get; set; }
            public Nullable<int> Hora { get; set; }
        
            public virtual Cursos Cursos { get; set; }
            public virtual Entidades Entidades { get; set; }
            public virtual Horas Horas { get; set; }
            public virtual Módulos Módulos { get; set; }
        }
    }

    Database first!!!!

    so in my Create view i have:

    @model ora.Marcações

    @{
        ViewBag.Title = "Create";
    }

    <h2>Create</h2>


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>Marcações</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.ID_Entidade, "ID_Entidade", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("ID_Entidade", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.ID_Entidade, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.Cursos, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(m => m.Cursos,
                      new SelectList(ViewBag.Cursos, "ID_Curso", "Curso"),
                      "Selecione Curso",
                      new { @class = "form-control", @onchange = "FillMódulo()" })
                    @Html.ValidationMessageFor(m => m.Cursos, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.Módulos, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(m => m.Módulos,
               new SelectList(Enumerable.Empty<SelectListItem>(), "ID_Módulo", "Módulo"),
                      "Selecione Módulo",
                      new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Módulos, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                @Html.LabelFor(model => model.Data, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Data, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Data, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Hora, "Hora", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("Hora", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Hora, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/ajax")
       
    <script>

        function FillMódulo() {
        var cursoId = $('#Cursos').val();
        $.ajax({
            url: '/Marcações/FillMódulo',
            type: "GET",
            dataType: "JSON",
            data: { Cursos: cursoId},
            success: function (modulos) {
                $("#Módulos").html(""); // clear before appending new list
                $.each(modulos, function (i, modulo) {
                    $("#Módulos").append(
                        $('<option></option>').val(modulo.ID_Módulo).html(modulo.Módulo));
                });
            }
        });
        }

    </script>
    }

     marcações controller :

       // GET: Marcações/Create
            public ActionResult Create()
            {
               // ViewBag.ID_Curso = new SelectList(db.Cursos, "ID_Curso", "ID_Curso");
                ViewBag.ID_Entidade = new SelectList(db.Entidades, "ID_Entidade", "Entidade_Formadora");
                ViewBag.Hora = new SelectList(db.Horas, "ID_Hora", "Hora");
            //    ViewBag.ID_Módulo = new SelectList(db.Módulos, "ID_Módulo", "ID_Módulo");

                ViewBag.Cursos = db.Cursos;


                return View();
            }

            // POST: Marcações/Create
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for
            // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "ID_Marcação,ID_Entidade,ID_Curso,ID_Módulo,Data,Hora")] Marcações marcações)
            {
                if (ModelState.IsValid)
                {
                    db.Marcações.Add(marcações);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }

            //    ViewBag.ID_Curso = new SelectList(db.Cursos, "ID_Curso", "ID_Curso", marcações.ID_Curso);
                ViewBag.ID_Entidade = new SelectList(db.Entidades, "ID_Entidade", "Entidade_Formadora", marcações.ID_Entidade);
                ViewBag.Hora = new SelectList(db.Horas, "ID_Hora", "Hora", marcações.Hora);
            // ViewBag.ID_Módulo = new SelectList(db.Módulos, "ID_Módulo", "ID_Módulo", marcações.ID_Módulo);


                ViewBag.Cursos = db.Cursos;


                return View(marcações);
            }

            public ActionResult FillMódulo(int curso)
            {
                var modulos = db.Módulos.Where(c => c.ID_Curso == curso);
                return Json(modulos, JsonRequestBehavior.AllowGet);
            }

    Why Cursos don't update Módulos "on change"?

    Can u help ?

    Tuesday, November 15, 2016 12:35 AM

All replies

  • User-271186128 posted

    Hi zulurl,

    Why Cursos don't update Módulos "on change"?

    Can u help ?

    From your description, do you mean the FillMódulo function not working, and the Módulos is empty? If that is the case, I suggest you check the following code:

    function FillMódulo() {
        var cursoId = $('#Cursos').val();
        $.ajax({
            url: '/Marcações/FillMódulo',
            type: "GET",
            dataType: "JSON",
            data: { Cursos: cursoId},
            success: function (modulos) {
                $("#Módulos").html(""); // clear before appending new list
                $.each(modulos, function (i, modulo) {
                    $("#Módulos").append(
                        $('<option></option>').val(modulo.ID_Módulo).html(modulo.Módulo));
                });
            }
        });
        }

           public ActionResult FillMódulo(int curso)
            {
                var modulos = db.Módulos.Where(c => c.ID_Curso == curso);
                return Json(modulos, JsonRequestBehavior.AllowGet);
            }

    Based on above code, we can see that the Ajax function not contains the contentType property, please remember to add it and set it to "application/json; charset=utf-8".

    Then, we can find the parameters name is different (from the Ajax function and controller action method), please modify it and use the same name.

    Finally, from my point of view, I suppose we need to convert to result to List before using Json method (in the controller method).

    I suggest you could refer to the following code:

        <script>
    
        function FillMódulo() {
        var cursoId = $('#ID').val();
        //alert(cursoId); check the selected value
        $.ajax({
            url: '@Url.Action("GetValues", "MyTest")',
            type: "GET",
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            data: { curso: cursoId },
            success: function (modulos) {
            $("#Title").html(""); // clear before appending new list
            $.each(modulos, function (i, modulo) {
                alert(modulo.Title);
            //$("#Title").append(
            //                $('<option></option>').val(modulo.ID).html(modulo.Title));
                });
            //alert("success");
        },
        error: function () {
            alert("error");
        }
        });
        }
        </script>
    
            public ActionResult GetValues(string curso)
            {
                List<Movie> itemlist = new List<Movie>()
                {
                    new Movie() { ID=1001, Title="AAA", Price=2},
                    new Movie() { ID=1002, Title="BBB", Price=3},
                    new Movie() { ID=1003, Title="CCC", Price=4}
                };
    //var modulos = db.Módulos.Where(c => c.ID_Curso == curso).ToList();
    return Json(itemlist, JsonRequestBehavior.AllowGet); }

    Best regards,
    Dillion

    Wednesday, November 16, 2016 5:45 AM
  • User1119553929 posted

    i found a partial solution: instead of dropdownlistfor i use dropdownlist

      <div class="form-group">
                @Html.LabelFor(m => m.Módulos, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("thisdifference",
           new SelectList(Enumerable.Empty<SelectListItem>(), "ID_Módulo", "Módulo"),
                 
                  new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Módulos, "", new { @class = "text-danger" })
                </div>
            </div>

    so this fills "thisdiffernce"

     <script>
         function FillModulo() {
             var cursoId = $('#Cursos').val();
             //alert(cursoId); check the selected value
             $.ajax({
                 url: '@Url.Action("FillModulo", "Marcações")',
                 type: "GET",
                 dataType: "JSON",
                 contentType: "application/json; charset=utf-8",
                 data: { curso: cursoId },
                 success: function (modulos) {
                     $("#thisdifference").html(""); // clear before appending new list
                     $.each(modulos, function (i, modulo) {
                        alert(modulo.ID_Módulo);
                         $("#thisdifference").append(
                                         $('<option></option>').val(modulo.ID_Módulo).html(modulo.Módulo));
                     });
                     alert("success");
                 },
                 error: function () {
                     alert("error");
                 }
             });
         }
    </script>

    is there a additional argument to add to dropdownlistfor instead of dropdownlist only?

    this means no code in  

      if (ModelState.IsValid)
                { blahhhhhhhhh

    before create

    Wednesday, November 16, 2016 5:18 PM
  • User-271186128 posted

    Hi zulurl,

    is there a additional argument to add to dropdownlistfor instead of dropdownlist only?

    No matter use DropDownListFor or DropDownList, we just need to find the DropDownList based on its ID or Class property. Then, use JQuery to get the selected value and populate values.

    Best regards,
    Dillion

    Thursday, November 17, 2016 10:05 AM