4

Tengo un Modelo llamado Pregunta :

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; }
}

Y el modelo Alternativa

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; }
}

Por regla de negocio una Pregunta puede tener 1 o muchas alternativas (5 es el limite) y necesito crear formulario de alternativas dependiendo de el valor que el usuario selecciona en un elemento <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>

Para hacer pruebas hice lo siguiente :

@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>
    }  

Problema 1

Como puedo delimitar el final del ciclo for, con el valor que el usuario selecciona en el <select>

12
  • No se si se puede mezclar la variable jquery con razor :S
    – sioesi
    el 7 jun. 2017 a las 15:25
  • Me pasa por hablar sin saber. Echa un vistazo a esta respuesta de todas maneras,a ver si te ayuda
    – Pikoh
    el 7 jun. 2017 a las 15:28
  • quieres que al cambiar el valor del select el ciclo for cambie?
    – JuankGlezz
    el 7 jun. 2017 a las 15:30
  • Si estimado @JuankGlezz
    – sioesi
    el 7 jun. 2017 a las 15:31
  • 1
    No había entendido muy bien la pregunta, pero ahora comprendo lo que deseas hacer. Directamente no se puede mezclar Razor con Javascript ya que primero se hace el render del Razor y luego todo el contenido HTML y Javascript. Se me ocurre hacerlo a través de un HiddenField, estoy viendo si es posible hacerlo de esa forma :)
    – Phi
    el 7 jun. 2017 a las 15:31

2 respuestas 2

3

He hecho una solución, la verdad es que no es la que mas me acomoda pero cumple la funcion que necesito.

Cree un selector normal con HTML e hice el mismo ciclo for que puse en mi pregunta. Con la diferencia que todos los elementos que ahi se creen estaran ocultos.

<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>

En una funcion JQUERY, recorro todos los divs dentro del div alternativas y los oculto.

$("#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++;
                }
        });
    });

Dentro de un Hidden field guardo el valor de cantidad_preguntas inicializado en 0, le cambio el valor cada vez que el usuario cambia el select.

Finalmente en el controlador recorro las alternativas

foreach (var item in pregunta.alternativas)
{
    if (item.descripcion != null)
    {
          AlternativaBL aBL = new AlternativaBL();
          item.pregunta_id = result.error;
          aBL.Registrar(item);
     }
}
2
  • una pregunta de todo tu problema haces envió de un formulario?, de ser así, estarías enviando siempre 5 alternativas, algunas con sus valores y otras vacías, depende del tipo de dato.
    – JuankGlezz
    el 7 jun. 2017 a las 18:24
  • Si, eso es lo que hago. Con el valor hidden de cantidad de alternativas, se cuantas tengo que tomar. Ademas siempre pregunto en un if si la descripcion o el maduracion_ son distintos de null. Ademas agregue que si el usuario selecciona 5, luego selecciona 4 se limpien los valores ingresados en la pregunta 5 ya quitada.
    – sioesi
    el 7 jun. 2017 a las 18:30
1

La idea seria tener la vista dinámica y usar .load() para cargar el contenido

primero seria obtener el valor del select con javascript o 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 });
});

El controlador seria algo así:

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

La vista seria lo mismo que tienes solo el for seria cambiar el 5 por TempData["CantAlternativas"] as int.(no estoy seguro si esta conversión sea valida)

Dicho lo anterior para simular el objetivo hice este fiddle no es tal cual como expongo en esta respuesta pero solo es una simulación, solo hay que cambiar el JsonResult por ActionResult. Para aclarar lo que comenta @Flxtr, el return no regresa un la vista con Razor, si no un HTML renderizado y eso es lo que se carga con el .load().

otra solución es generar el código desde jQuery o Javascript:

$('#cantidad_alternativas').on('change',function(){
  for(let i = 0; i <= $(this).val(); i++){
    //cargando el dom
  }
});
9
  • La conversion no me funciona :/
    – sioesi
    el 7 jun. 2017 a las 16:02
  • Cambia el int por string y luego sería hacer una conversión indirecta (int) TempData["CantAlternativas"] as string
    – JuankGlezz
    el 7 jun. 2017 a las 16:27
  • Mi hermano, ¿pero cómo se estarían generando los controles de forma dinámica dependiendo del valor de la cantidad? Lo que pasa es que el motor Razor primero genera todos los controles del servidor y luego los controles de javascript y html.
    – Phi
    el 7 jun. 2017 a las 16:44
  • @Flxtr si usa otra vista lo que hace el load() es plasmar el html generado por el servidor
    – JuankGlezz
    el 7 jun. 2017 a las 16:47
  • @JuankGlezz no seria mejor usar PartialView ? para este ejemplo
    – Dev. Joel
    el 7 jun. 2017 a las 16:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.