sábado, 28 de diciembre de 2013

[ASP.NET MVC] Carga DropDownList dependientes - Usando un único action

 

Introducción


Este articulo propone una versión diferente a la planteada en el anterior

[ASP.NET MVC] Carga DropDownList dependientes

En este caso definiremos un único action para recibir la selección que realice el usuario.

La funcionalidad de la pantalla se conserva idéntico al articulo anterior, al igual que el modelo de datos.

 

Modelo de Vista


Para el modelo se define una clase que recibirá las propiedades con la selección del usuario, además de propiedades que permitirán cargar los controles de listas en la view

image

 

Definición de la View


La vista esta formada por un solo Form, el cual realiza el post al action Index() el cual se encuantra marcado con el atributo [HttpPost]

SNAGHTML19f9df10

 

Tanto si se selecciona un ítem combo, o se presiona el botón del submit (el cual selecciona los empleados) todas las acciones invocan al único action

A diferencia del articulo anterior ya no se requieren de hidden para conservar la selección de la acción anterior.

 

Definición del action


El action implementar bastante mas lógica que la usada en el articulo anterior, ya que deberá determinar que propiedades vienen con datos y cargar las listas en consecuencia.

 

[HttpPost]
public ActionResult Index(EmployeeModel model)
{
    //se carga la lista de regiones
    var regionList = regionRepository.GetAll();

    List<Territory> territoryList = null;
    List<Employee> employeeList = null;

    //si hay una region seleccionada 
    if (model.RegionId != null)
    {
        //se carga la lista de territorios
        territoryList = territoryRepository.Filter(x => x.RegionID == model.RegionId);

        //si hay un territorio seleccionado
        if (!string.IsNullOrEmpty(model.TerritoryId))
        {
            //se recupera el territorio, para poder obtener los empleados asociados
            employeeList = territoryRepository.GetEmployees(model.TerritoryId);
        }

    }


    model.RegionList = new SelectList(regionList, "RegionID", "Description");

    if (territoryList != null && territoryList.Count > 0)
    {
        model.TerritoryList = new SelectList(territoryList, "TerritoryID", "Description");
    }

    if (employeeList != null && employeeList.Count > 0)
    {
        model.EmployeeList = new SelectList(employeeList, "EmployeeID", "FullName");
    }


    return View("Index", model);

}

 

Si se selecciona una región se recibirá el valor en el parámetro del modelo

SNAGHTML1a04b6aa

 

Si luego se selecciona un territorio

SNAGHTML1a08bf80

 

Y al marcar empleados sobre el listbox y presionar el botón de submit se carga la lista

SNAGHTML1a0b84e0

 

En cada invocación al acción será necesario volver a cargar las listas del model utilizadas para definir los ítems de los controles la la view, ya que estas no participan en el proceso de binding donde son asignados los valores que se envían en al post a las propiedades del parámetro del action.

 

Model Binding


Para entender como se produce la asignación de la selección de los controles con las propiedades del modelo es necesario evaluar el html

Si las propiedades “name” de los controles que se renderizan en el html coinciden con los nombres de las propiedades de la clase definida como modelo la asignación del valor es automáticamente.

 

SNAGHTML1a315f77

si algún control no llegara a tener esta coincidencia se puede redefinir el name utilizando

image

 

Código


 

[C#]
 

viernes, 27 de diciembre de 2013

[ASP.NET MVC] Carga DropDownList dependientes (cascada o secuencial)

 

Introducción


Es muy común en las aplicaciones necesitar de controles que dependan unos de otros para cargar los ítems que serán desplegados al usuario.

En este articulo explicare como llevar a cabo esta tarea implementando la carga en cascada de combos y listas, además poder tomar en cada post la selección que realiza el usuario.

El ejemplo permitirá seleccionar una región la cual será utilizada como filtro para cargar los territorios, este ultimo cargar una lista de empleados, el usuario seleccionara uno o mas de la lista.

 

image

 

Modelo de datos


Haremos uso del siguiente modelo de datos el cual define las clases que serán mapeadas a las tablas utilizando Entity Framework

Vemos como interactúan las entidades para permitir la asociaciones que las vinculan.

image

 

Modelo de Vista


Para poder interactuar con al view de mvc creamos una clase que actuara de modelo, esta nos permitirá definir los ítems de las listas que desplegaremos al usuario.

En el modelo tendremos propiedades simples que contendrán la selección del usuario y también lista que nos permitirán cargar los dropdownlist y listbox que presentaremos al usuario.

 

image

Las propiedades de lista se definen del tipo SelectList, de esta forma desde el controlador indicamos cuales serán las propiedades que usara la lista como value y display en el dropdownlist

 

Lista de Regiones


Al iniciar la aplicación el primer controlador que se ejecuta es el Index(), en este invocamos al repositorio para obtener la lista de regiones

image

 

Creamos una instancia de la clase Model que el view requiere, a esta le asignamos la lista de regiones que mostrara en el combo

En la view se carga el dropdownlist y se controla con la ayuda de jquery cuando el usuario cambia la selección, lo cual produce el post del form.

En la imagen podemos ver como se relacionan los id del dropdownlist y del form con el evento change() de jquery para generar el submit al action del controlador

 

SNAGHTML146b09bb

 

Lista de Territorios


Al seleccionar una región se invoca el action definido en el BeginForm()

SNAGHTML14776cd1 

Si hacemos coincidir el name del control dropdownlist con el del parámetro del action este recibirá el valor. Usaremos la selección para filtrar la lista de territorios.

 

Lista de Empleados


Al seleccionar un ítem del combo de territorios se dispara el submit del forma que invoca el action del controlador, en este caso se pasaran como argumento el id de la región y del territorio para poder filtrar los datos y cargar las listas

 

SNAGHTML14cd3b57

Seguramente se habrá notado la definición de controles Hidden que permiten enviar en cada submit del form los datos seleccionados en una acción anterior

 

Selección de empleados


Cuando se selecciona los empleados de la lista y se presiona el botón se realiza el submit enviando la la selección del listbox al action

SNAGHTML14d57876

En cada invocación a los action se vuelve a crear una instancia del model asignando la selección y cargando las listas que requiere el view

 

Código


Se utilizo Visual Studio 2012, la base de datos de encuentra en la carpeta App_Data, se utilizo Sql Server Express 2012

[C#]