Pasos

Imágenes

Procedemos a entrar a SQL Server  Management Studio

El siguiente paso es conectarse a una instancia de SQL Server, ingresando nombre de servidor y “Login” y “Password”

Se crea una base de datos dentro de la instancia de SQL Server con la cual se va a trabajar

Creación de base de datos

Se crea una tabla que aloje los campos y datos  para el ejemplo a desarrollar

Ahora procedemos a entrar a Visual Studio

Al entrar al Visual Studio selecionamos “New Project”

En Visual Studio creamos un proyecto ASP.NET MVC para poder realizar el ejemplo

Al crearse el proyecto de Visual Studio, se selecciona la carpeta Model y se marca click derecho, se elige la opción “AddèNew item”

Se crea una instancia EntityFramework para el manejo de la capa de datos.

Se selecciona la base de datos para trabajar

Se establecen los parámetros de conexión a la base de datos previamente creada.

Una vez establecida la conexión a base de datos, se procede a seleccionar la tabla “Tabla1” la cual utilizaremos en este ejemplo. Se selecciona con el check box y se finaliza el proceso

Ya creada la instancia de Entity Framework, se procede a crear una clase controlador desde la sección de “Solution Explorer”, carpeta “Controller” del proyecto que estamos trabajando en Visual Studio

Se crea una clase del tipo “Controller” asociada a  la clase “Tabla1” del modelo de EntityFramework para desarrollar la lógica de la aplicación.

Al crear el controlador, se crea un archivo .”cs” donde están las distintas funciones nativas de una clase controlador MVC, las funciones ActionResult

Se crea una función “ActionResult” que permitirá generar la vista “padre” que tiene los datos para generar la vista parcial.

En la función creada se realiza click derecho sobre el nombre de la misma para crear una vista.

Se crea una vista (“View”) asociada al controlador reciente creado. Esta página alojará el llamado a la vista parcial.

Se crea una función “ActionResult” en el mismo controlador que se creó la función anterior que permitirá manejar la vista parcial.

Se crea la vista parcial del tipo “strongly-type-view” para que despliegue los datos de la tabla a trabajar. Se realiza click derecho sobre la función creada en el paso anterior y se selecciona “Add View”. Se marca la opción “Create as partial view”

En el archivo  ListadoI.cshtml creado se agregan tres elementos: un bloque DIV en HTML en el cual se desplegará la vista parcial,  una sección de script para establecer el archivo JavaScript que ejecutará el llamado de la vista parcial, y un botón HTML con el llamado a una función JavaScript que se encuentra en el archivo: Comandos.js

Ahora en la capeta “Script” del proyecto, seleccionamos agregar un nuevo elemento para incorporar a la solución el archivo JavaScript requerido. Lo llamaremos “Comandos.js”

En el  archivo JavaScript se colocan las instrucciones para el llamado de la función dentro del controlador que maneja el despliegue de la vista parcial

Al archivo de vista parcial no se le realiza ningún cambio, simplemente recibirá la data desde la función del controlador.

Aquí se muestra el código del controlador, tanto para la generación de la vista “ListadoI” y la vista parcial “Partial1” con el filtrado de data respectivo debido a un dato que se recibe como parámetro, el cual es la variable “tipo”, la cual obtiene su valor al ejecutar la instrucción en el archivo Javascript:

"/Tabla1/Parcial/?tipo=" + $("#Tipo").val()

Esta instrucción asigna el valor de la lista desplegable a la variable “tipo” en la URL.

A continuación vemos el resultado de lo construido, una vista que aloja una vista parcial con resultados de acuerdo al parámetro establecido en una lista desplegable de la vista inicial.

Al seleccionar otro valor de la lista desplegable y marcar el botón de buscar, los valores de la vista parcial cambian.