Dropdown field increment

Question

Well, I have the following problem.

I have to use a Javascript or Jquery function to add new fields to fill and save in the database. In these fields I have to use a Dropdown, but I don’t know how to get the data from the database. Utilizo Telerik.

What I got is this

$("#incremento").click(function () {

var acrescentar = '@Html.DropDownListFor(model => model.Id_dis, new SelectList(ViewBag.Disciplina, "Id_dis", "Nome"), new { @class = "form-control" })';

$('#etapa').append(acrescentar);

});


var disciplina = from disci in Documento_Caract_BD.DocumentoCaractConnection.Model.
                        Tb_disciplinas.OrderBy(o => o.Nome).ToList()
                        select new
                        {
                            Id_dis = disci.Id_dis,
                            Nome = disci.Nome
                        }
                            into myDisciplina
                            select myDisciplina;

            ViewBag.Disciplina = disciplina.ToList();

Does anyone have any idea?

Answer 1

You haven’t added any information about your structure, so I’ll put a somewhat generic response.

This is another inevitable case for the use of Begincollectionitem.

First you need to install the Begincollectioniten via Nuget.

Install-Package Begincollectionitem

Done this, first creates a Action to get the new element from the list (by clicking +), this way:

public ActionResult ObterDisciplina()
    {
       ViewBag.Disciplina = disciplina.ToList();//Adiciona o método para povoar do DropDownList aqui
        var disciplina = new Disciplina();

        return PartialView("_Disciplina", disciplina);
    }

In this Action we are creating a new discipline and returning a PartialView with the same. Your PartialView will be the same thing as the code you used on append, in your question. It will look like this:

@model Projeto.Disciplina//Altere isso para seu Model

@using (Html.BeginCollectionItem("Disciplinas"))//O nome da sua lista aqui
{
   @Html.DropDownListFor(/*A pripriedade que irá ser salva aqui e a ViewBag*/);
}

The name Disciplines of this part @using (Html.BeginCollectionItem("Disciplinas")) must be the same name as the virtual public virtual ICollection<Disciplina> Disciplinas{get;set;} in his Model.

In his View, we will change the form of "duplicate" the field, using a request ajax to the controller.

<script>
    $('#incremento').click(function () {
        $.ajax({
            url: '@Url.Action("ObterDisciplina", "NOMECONTROLLER")',
            type: 'POST',
            success: function (data) {
                $('#etapa').append(data);
            }
        });
    });

</script>

In this request we are adding a discipline to your code (performing the request on controller).

Note that in this part $('#etapa').append(data); we’re doing the append() of PartialView() for the element with the id="etapa".

By doing this, by sending to save via POST normal, your Model will have a list of subjects.

Answer 2

Bruno,

You are confused about things. The HTML helper will run on the server, you will work with the result of the browser execution.

Telerik has an API that helps you perform these client-side operations (browser).

Take a look, look for examples and don’t give up.