Blog - EIGO

6/6/2019 Blog - EIGO

(../)
- Visual Studio y el manejo de vistas parciales en MVC

Publicado: 28-mayo-2018
INICIO (/)  BLOG (/BLOG)
- Autor
Rafael Liendo
rafael.liendo@eigocorp.com
Visual Studio y el manejo de vistas-parciales en MVC
En el presente ar culo voy a presentarles un ejemplo prác co para poder manejar vistas parciales en
MVC para realizar consultas a base de datos sin necesidad de realizar un “submit” de la página principal con
la cual se está trabajando, lo cual es una opción muy ú l dentro de las funcionalidades que puede ofrecer
una aplicación. A con nuación voy a dar una breve introducción de ciertos conceptos básicos de MVC.
En el modelo de desarrollo de aplicaciones MVC (Model-View-Controller) es una estrategia para la

construcción de aplicaciones donde existe una fuerte separación de la lógica de negocio, acceso a datos, y la
interfaz de usuario, en donde:
Models: Se maneja la capa de datos a través de la creación de un modelo basado en clases para
la representación de los objetos de datos, y si se almacena dicha información en base de datos,
el modelo puede incluir el código de acceso para operaciones del tipo CRUD (Create-Read-
Update-Delete)
https://www.eigocorp.com/Blog/Detalles/Visual-Studio-y-el-manejo-de-vistas-parciales-en-MVC 1/18
Views: Representa el manejo de la interfaz con el usuario a través de la generación de

páginas en HTML y código C# bajo la representación de archivos “cshtml”.
Controllers: Implementa la lógica de negocio de la aplicación y demás acciones para unir
capa “Model” con la capa “View. Se representan como archivos “.cs” con código C#.
Para información más información se sugiere consultar este enlace aquí.

(https://msdn.microsoft.com/en-us/library/dd381412%28v=vs.108%29.aspx)
Las vistas parciales son herramientas que permiten reu lizar los mismos o bloques similares de
código HTML en dis ntas partes de la aplicación, además de servir como recurso para realizar consultas
parciales sin tener que realizar un “submit” de la página principal.
A con nuación voy a mostrar una secuencia de pasos para manejar una vista parcial, u lizando
fundamentos básicos de MVC. Aun cuando se realizó el esfuerzo de detallar este
procedimiento, existe la precondición de que el lector tenga conocimientos previos en
Visual Studio, C#, MVC, T-SQL y Server Server, etc. para poder entender el ejemplo.
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

En tyFramework
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
u lizaremos en este
ejemplo. Se
selecciona con el
check box y se ﬁnaliza
el proceso
Ya creada la instancia
de En ty Framework,
se procede a crear
una clase controlador
desde la sección de
“Solu on Explorer”,
carpeta “Controller”
del proyecto que
estamos trabajando
en Visual Studio
Se crea una clase del

po “Controller”
asociada a la clase
“Tabla1” del modelo
de En tyFramework
para desarrollar la
lógica de la
aplicación.
Al crear el
controlador, se crea
un archivo .”cs”
donde están las
dis ntas funciones
na vas de una clase
controlador MVC, las
funciones
Ac onResult
Se crea una función

“Ac onResult” que
permi rá generar la
vista “padre” que
ene 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

“Ac onResult” en el
mismo controlador
que se creó la función
anterior que
permi rá manejar la
vista parcial.
Se crea la vista parcial

del po “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
par al 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 “Par al1”
con el ﬁltrado de data
respec vo debido a
un dato que se recibe
como parámetro, el
cual es la variable
“ po”, la cual ob ene
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 “ po” en la
URL.
A con nuació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.
Con este paso a paso se muestra un ejemplo sencillo de cómo realizar a una consulta de datos sin
generar un evento “submit” en la página principal donde se está trabajando.
Espero que este artículo les sea de utilidad, si quieren aprender más sobre
desarrollo de aplicaciones, desarrollo en SharePoint o de SharePoint en general por favor
visita nuestro site de Eigo Academy (http://www.eigoacademy.com/) para conocer nuestra
oferta de cursos.
Compartir
- Contáctenos
Llámenos
Colombia
+52 318 5480457
(tel:+573185480457) México
+52 1 55 71001503
(tel:+5215571001503) Venezuela
+58 414 3161623
(tel:+584143161623) USA
+1 828 5023156
(tel:+18285023156)
Social Media

 (https://www.linkedin.com/company/eigo-
(https://twitter.com/eigocorp)
corp/)
- Escríbanos
 Nombre*
 Empresa*
 Email*
 Teléfono*
 Mensaje*
No soy un robot
reCAPTCHA
Privacidad - Condiciones
ENVIAR
2017 © EIGO Corp - Todos los derechos reservados

Blog - EIGO

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Blog - EIGO

Cargado por

Copyright:

Formatos disponibles

6/6/2019 Blog - EIGO

- Visual Studio y el manejo de vistas parciales en MVC

INICIO (/)  BLOG (/BLOG)

Visual Studio y el manejo de vistas-parciales en MVC

En el modelo de desarrollo de aplicaciones MVC (Model-View-Controller) es una estrategia para la

Views: Representa el manejo de la interfaz con el usuario a través de la generación de

Para información más información se sugiere consultar este enlace aquí.

Se crea una base de

Se crea una tabla que

Se crea una instancia

Una vez establecida la

Se crea una clase del

Se crea una función

Se crea una vista

Se crea una función

Se crea la vista parcial

A con nuación vemos

2017 © EIGO Corp - Todos los derechos reservados

También podría gustarte