0

Tengo un modelo llamado Pregunta el cual contiene una lista de otro modelo llamado Alternativa. Necesito que al crear una pregunta, el usuario pueda seleccionar cuantas alternativas desea agregar para dicha pregunta y desplegar un formulario dinámico de acuerdo al numero seleccionado..

En un principio el formulario era más simple. El usuario creaba una pregunta y luego tenia un mantenedor de alternativas donde para crear una alternativa tenia que seleccionar la pregunta, esto era muy engorroso y poco practico para el usuario por lo que se me ocurrió esta idea, sin mayores resultados. Soy nuevo en ASP MVC y no se como podría crear un formulario dinámico para guardar dos modelos.

1 respuesta 1

3

la M que representa el Modelo en MVC se puede utilizar de diferentes formas:

  1. Como modelo de persistencia. Sería la clase que se define en tu contexto con el objetivo de guardar en la BD
  2. Como modelo de negocio clases con métodos que luego pueden ser llamados en tu controlador
  3. Como modelo de representación es una clase que defines con el objetivo de ser representada en tu vista, utilizada para representar formularios complejos como el que necesitas.

En la práctica el modelo de representación se declara con el nombre ViewModel y es una clase a la que se le incorporan los atributos que usted desee en función de lo complejo que sea su formulario, a esta clase se le aplican las reglas de validación al igual que las demás. Pongamos un ejemplo sencillo

tenemos la clase Empleado

public class Empleado
{
    public int Id { get; set; }
    public string Nombre { get; set; }
    public string Apellido { get; set; }
    public int AreaId { get; set; }
    public virtual Area Area { get; set; }
}

y una clase Area

public class Area
{
    public int Id { get; set; }
    public string Nombre { get; set; }

    public virtual ICollection<Empleado> Empleados { get; set; } 
}

y queremos mediante un formulario crear un empleado, un area y asignarle al empleado el id del area creada. Para este tipo de casos es necesario auxiliarse de un ViewModel. En el directorio raiz creamos una carpeta la llamamos ViewModels y dentro agregamos la clase.

public class EmpleadoAreaViewModel
{
    public int Id { get; set; }
    [Required(ErrorMessage = "El campo Nombre es obligatorio")]
    public string Nombre { get; set; }
    [Required(ErrorMessage = "El campo Apellido es obligatorio")]
    public string Apellido { get; set; }
    [Required(ErrorMessage = "El campo Area es obligatorio")]
    public string NombreArea { get; set; }
}

Si se fijan a las clases empleados y área no les apliqué anotaciones para la validación pues son clases de persistencia sólo las voy a utilizar para guardar en la base de datos, por otra parte el modelo que voy a utilizar para construir mi formulario es EmpleadoAreaViewModel el cual si tiene validación.

mi formulario quedaría de esta manera:

@model WebApplication1.ViewModels.EmpleadoAreaViewModel

@{
    ViewBag.Title = "Nuevo";
}

<h2>Nuevo</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>EmpleadoAreaViewModel</h4>
        <hr />
        @Html.ValidationSummary(true)

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

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

        <div class="form-group">
            @Html.LabelFor(model => model.NombreArea, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.NombreArea)
                @Html.ValidationMessageFor(model => model.NombreArea)
            </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>
}

como ves se utiliza EmpleadoAreaViewModel como modelo para mi form.

la parte interesante viene en el controlador, al cual se le pasaría el viewmodel como DataBinding ejemplo:

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Nuevo([Bind(Include = "Id,Nombre,Apellido, NombreArea")] EmpleadoAreaViewModel empleadoArea)
    {
        if (ModelState.IsValid)
        {
            var area = new Area()
            {
                Nombre = empleadoArea.NombreArea
            };
            db.Areas.Add(area);

            var empleado = new Empleado()
            {
                Nombre = empleadoArea.Nombre,
                Apellido = empleadoArea.Apellido,
                AreaId = area.Id
            };
            db.Empleados.Add(empleado);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(empleadoArea);
    }

Ya que recogiste todos los datos en un solo formulario y estos pertenecen a 2 clases diferentes, debes separar los datos y crearlas independientes como se muestra en el cod del controlador. en este caso lo hice algo rudimentario pues puedes usar AutoMapper para esto. De esta forma se crea un trabajador y un area al mismo tiempo. espero te sea de ayuda

para el ejemplo que me preguntas puedes hacerlo de esrta forma:

en tu modelo:

 public class EmpleadoViewModel
 {
    public int Id { get; set; }
    public string Nombre { get; set; }
    public string Apellidos { get; set; }
 }

en tu vista utilizas:

@model IList<WebApplication1.ViewModels.EmpleadoViewModel>

y recoges los datos de esta manera:

@using (Html.BeginForm("Nuevo", "Empleado", FormMethod.Post)) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">

    @Html.ValidationSummary(true)

    <div class="form-group">
        <label>Area</label>
        <input type="text" id="area" name="area"/>
    </div>
</div>

    for (int i = 0; i < 5; i++)
    { 
        <div class="form-group">
            <label>Nombre </label>
            <div class="col-md-10">
                @Html.TextBoxFor(p => p[i].Nombre)
            </div>
        </div>
        <div class="form-group">
       <label>Apellidos </label>
        <div class="col-md-10">
            @Html.TextBoxFor(p => p[i].Apellidos)
        </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>
 }

el siclo lo defines hasta que llegues a la cantidad que quieres insertar en mi caso lo puse fijo en 5.

en el controlador:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Nuevo( string area, List<EmpleadoViewModel>Empleados  )
    {
        if (ModelState.IsValid)
        {
            var Area = new Area()
            {
                Nombre = area
            };
            db.Areas.Add(Area);

            foreach (var e in Empleados)
            {
                var empleado = new Empleado()
                {
                    Nombre = e.Nombre,
                    Apellido = e.Apellidos,
                    AreaId = Area.Id,
                };
                db.Empleados.Add(empleado);
                db.SaveChanges();
            }


            return RedirectToAction("Index");
        }

        return View( );
    }

de esta forma te debe funcionar. ya que recoges el nombre de un area y una lista de trabajadores en el post. Al final este tipo de cosas resuelve pero te recomiendo que utilizes otras vias como Angular por ejemplo que son mucho más flexibles del lado del cliente. Espero te ayude

7
  • Hola Vicente!, me quedo todo muy muy claro respecto a tu ejemplo. Sin embargo me queda una duda para lo que necesito. El usuario tiene un selector en donde selecciona la Cantidad de Alternativas para la Pregunta que esta creando. Por modelo relacional, toda alternativa DEBE llevar el ID de pregunta. Mi duda es como puedo crear la pregunta, para despues crear las alternativas. Desde un formulario en la vista hasta la funcion del controlador
    – sioesi
    el 5 jun. 2017 a las 13:12
  • 1
    Fijate en el caso del trabajador y el area si yo quisiera podía crear 10 trabajadores en mi formulario pues en el viewmodel no declaré la llave foranea de área para trabajador por lo que no va a dar error, en tu caso deberías recoger una lista de alternativas en el viewmodel y al pasarla en el controlador la recorres, Para cada alternativa en viewmodel.alternativas creas la alternativa y le pasas el id de la pregunta. Esto de trabajar con ViewModels lleva un poco de abstracción. el 5 jun. 2017 a las 13:22
  • No sabia que se podia trabajar asi!, voy a probarlo y te comento como me fue. Muchas gracias por tu ayuda
    – sioesi
    el 5 jun. 2017 a las 13:23
  • 1
    si te fijas mi clase trabajador tiene un AreaId y fue definida en el controlador antes de guardar, no el formulario el 5 jun. 2017 a las 13:24
  • Vicente, si yo tengo un selector y obtengo el valor con jquery por ejemplo, como puedo agregar a este codigo for (int i = 0; i < 5; i++) la cantidad que se selecciono? Gracias por tu ayuda!
    – sioesi
    el 7 jun. 2017 a las 12:47

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.