Home / Questions / 76660
Accepted
sioesi
Asked: 2020-06-08 07:04:14 +0800 CST 2020-06-08 07:04:14 +0800 CST

Create Form for Model List

  • 772

I have a Model called Question :

public class Pregunta
{
    public int id { get; set; }
    public string descripcion { get; set; }
    public int peso_id { get; set; }
    public List<int> roles_id { get; set; }
    public int dimension_id { get; set; }
    public int amsa_id { get; set; }
    public int modelo_operativo_id { get; set; }
    public List<Alternativa> alternativas { get; set; }
}

and the alternative model

public class Alternativa
{
    public int id { get; set; }
    public string descripcion { get; set; }
    public int pregunta_id { get; set; }
    public int maduracion_id { get; set; }
}

By business rule one Preguntacan have 1 or many alternatives (5 is the limit) and I need to create form of alternatives depending on the value that the user selects in an element<select>

<div class="form-group">
        <label class="control-label col-md-2">Cantidad de Alternativas</label>
        <div class="col-md-10">
            <select class="form-control" id="cantidad_alternativas">
                <option value="0" selected>Seleccione cantidad</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
    </div>

To test I did the following:

@for (int i = 0; i < 5; i++)
    {
        <div class="form-group">
            @Html.LabelFor(model => model.alternativas[i].descripcion, "Descripcion", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.alternativas[i].descripcion, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.alternativas[i].descripcion, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.alternativas[i].maduracion_id, "Maduracion", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.alternativas[i].maduracion_id, (SelectList)ViewBag.Maduraciones, "Seleccione Maduracion", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.alternativas[i].maduracion_id, "", new { @class = "text-danger" })
            </div>
        </div>
    }

problem 1

How can I delimit the end of the for loop, with the value that the user selects in the<select>

c#

2 Answers

  1. Best Answer

    I have made a solution, the truth is that it is not the one that best suits me but it fulfills the function that I need.

    I created a normal selector with HTML and did the same loop foras I put in my question. With the difference that all the elements created there will be hidden.

    <div class="form-group">
        <label class="control-label col-md-2">Cantidad de Alternativas</label>
        <div class="col-md-10">
            <select class="form-control" id="cantidad_alternativas">
                <option value="0" selected>Seleccione cantidad</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
    </div>

    <div id="alternativas">

    @for (int i = 0; i < 5; i++)
    {
        <div class="form_alternativas">
            <div class="form-group">
                @Html.LabelFor(model => model.alternativas[i].descripcion, "Descripcion "+i, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.alternativas[i].descripcion, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.alternativas[i].descripcion, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.alternativas[i].maduracion_id, "Maduracion "+i, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.alternativas[i].maduracion_id, (SelectList)ViewBag.Maduraciones, "Seleccione Maduracion", htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.alternativas[i].maduracion_id, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    } 

    </div>

    In a JQUERY function, I loop through all the divs inside the div alternativasand hide them.

    $("#alternativas div").each(function () {
        if ($(this).attr("class") == "form_alternativas") {
            $(this).addClass("hidden");
        }
    });

$("#cantidad_alternativas").change(function () {
        $("#alternativas div").each(function () {
            if ($(this).attr("class") == "form_alternativas") {
                $(this).addClass("hidden");
            }
        });
        var cantidad = parseInt($("#cantidad_alternativas").val());
        $("#cantidadAlternativa").val(cantidad);
        var contador = 0;
        $("#alternativas div").each(function () {
            if (contador < cantidad)
                if ($(this).attr("class") == "form_alternativas hidden") {
                    $(this).removeClass("hidden");
                    contador++;
                }
        });
    });

    Inside a Hiddenfield I keep the cantidad_preguntasinitialized value at 0, I change the value every time the user changes the select.

    Finally in the controller I loop through the alternatives

    foreach (var item in pregunta.alternativas)
{
    if (item.descripcion != null)
    {
          AlternativaBL aBL = new AlternativaBL();
          item.pregunta_id = result.error;
          aBL.Registrar(item);
     }
}
    • 3

  2. The idea would be to have the dynamic view and use .load()it to load the content

    first it would be to obtain the value of the selectwith javascript or jquery

    $('#cantidad_alternativas').on('change',function(){
  let cantAlt = $(this).val();
  //cargamos el contenido en el contenedor que sera dinámico (peticion post)
  $('#AlterntivasContenedor').load('@Url.Action("Vista","Controlador")', {id: cantAlt });
});

    The controller would be something like this:

    public ActionResult CuentasEdit(int id){
 TempData["CantAlternativas"] = id;//enviar la cantidad a la vista
 return View();
}

    The view would be the same as you have, only it would be to forchange the 5 to TempData["CantAlternativas"] as int.(I'm not sure if this conversion is valid)

    That said, to simulate the objective I made this fiddle , it is not as it is as I explain in this answer but it is only a simulation, you just have to change the JsonResultto ActionResult. To clarify what @Flxtr is saying , returnit doesn't return a Razor view, but a rendered HTML and that's what is loaded with the .load().

    another solution is to generate the code from jQuery or Javascript:

    $('#cantidad_alternativas').on('change',function(){
  for(let i = 0; i <= $(this).val(); i++){
    //cargando el dom
  }
});
    • 1