mvc con entity framework

MVC con Entity FrameworkPublicadas por Carlos Juan a la/s 11:12 p. m.

Información general

El modelo de arquitectura Model-View-Controller (MVC) separa una aplicación en tres

componentes principales: el modelo, la vista y el controlador. El framework de ASP.NET

MVC proporciona una alternativa al modelo de formularios Web Forms de ASP.NET para

crear aplicaciones web.

Leer mas teoría sobre MVC

MVC

0.) Instalar MVC 3, descargarlo de aqui.

1.)Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction 

2.)  Le mostrara la pantalla de que tipo de aplicación (Internet o intranet), que tipo de

motor quiere utilizar ASPX oRazor. Seleccione Internet Application y Use HTML 5

semantic Markup.

Diferencias:

Emply un proyecto Totalmente Vacio.

Internet Application un proyecto con autenticación por formularios.

Intranet Application un proyecto con autenticación por Windows Active Directory.

3.) Creando el modelo

Modelos. Los objetos de modelo son las partes de la aplicación que implementan la

lógica del dominio de datos de la aplicación. A menudo, los objetos de modelo

recuperan y almacenan el estado del modelo en una base de datos. Por ejemplo, un

objeto Productos podría recuperar información de una base de datos, trabajar con ella

y, a continuación, escribir la información actualizada en una tabla Productos de una

base de datos de SQL Server.

3.1)En el Solucion explorer, presione clic derecho sobre la carpeta Models y luego en la

ventana seleccione Ado Entity Data Model, con el nombre: NorthwindModel.edmx

Continue los pasos del asistente, como se indica en las imagenes.

3.2) Antes de continuar compile el proyecto.

4.)Creado el Controlador

Controladores. Los controladores son los componentes que controlan la interacción

del usuario, trabajan con el modelo y por último seleccionan una vista para representar

la interfaz de usuario. En una aplicación MVC, la vista solo muestra información; el

controlador administra y responde a los datos proporcionados por el usuario y su

interacción. Por ejemplo, el controlador administra los valores de la cadena de consulta

y pasa estos valores al modelo, que a su vez podría utilizarlos para consultar la base de

datos.

4.1) Presione Clic derecho sobre la carpeta de Controllers, luego add y por

ultimo Controller....

4.2) Se mostrara la pantalla para que seleccione el tipo de Controller.

Nombre: ProductosController

Template: Adding a controller with read/write actions and views, using Entity Framework 

Model Data Class: Products (Nombre proyecto.Models)

Data Context class: NortwindEntities (Nombre proyecto.Models)

Views: Razor (cshtml)

5.) Explorado las Vistas.

Vistas. Las vistas son los componentes que muestra la interfaz de usuario de la

aplicación. Normalmente, esta interfaz de usuario se crea a partir de los datos de

modelo. Un ejemplo sería una vista de edición de una tabla Productos que muestra

cuadros de texto, listas desplegables y casillas basándose en el estado actual de un

objeto Product.

Luego del ultimo paso nos creo 5 archivos en la carpeta view, estos archivos nos

ayudaran a manejar nuestro controlador.

Create.cshtml

Delete.cshtml

Details.cshtml

Edit.cshtml

Index.cshtml

Archivo Index.cshtml

6.) Cambiando Los enrutadores, para mostrar nuestro mas reciente proyecto

tenemos que modificar layout.

6.1) En la carpeta view - dentro de la carpeta de share - abra el

archivo _Layout.cshtml este archivo contiene nuestra plantilla del sitio.

<ul id="menu">      <li>@Html.ActionLink("Home", "Index", "Home")</li>

      <li>@Html.ActionLink("About", "About", "Home")</li>

      <li>@Html.ActionLink("Productos", "Index", "Productos")</li>

</ul>

6.1) Ejecute su proyecto (F5) para poder probar su proyecto, el resultado será:

7.) Agregado un Filtro a la pantalla de Index.

7.1) Abra el controller ProductosController y agregue el siguiente código en el

método índex:

public ViewResult Index(string CategoryID) {

var products = from p in db.Products.Include("Category").Include("Supplier") select p; ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");

if (!String.IsNullOrEmpty(CategoryID)) { int idcategoria = Convert.ToInt32(CategoryID); products = products.Where(x => x.CategoryID == idcategoria); } return View(products.ToList()); }

7.2) En la carpeta view edite al archivo recienmente creado SearchIndex.cshtml:

7.3) Agregue el siguiente código:

<p>

@Html.ActionLink("Create New", "Create")

@using (Html.BeginForm()) { <p> Product Name: @Html.DropDownList("CategoryID", String.Empty) &nbsp; <input type="submit" value="Search" /></p> }

</p>

7.4) Resultado:

8.) Creando pantalla de Categorias:

8.1) Presione Clic derecho sobre la carpeta de Controllers, luego add y por

ultimo Controller....

8.2) Se mostrara la pantalla para que seleccione el tipo de Controller.

Nombre: CategoriasController

Template: Adding a controller with read/write actions and views, using Entity Framework 

Model Data Class: Category (Nombre proyecto.Models)

Data Context class: NortwindEntities (Nombre proyecto.Models)

Views: Razor (cshtml)

9 ) En la pantalla de índex  agregaremos los productos asociados a esa categoría.

9.1) Abrir el controlador CategoriasController en el método índex y modificaremos

de la siguiente manera:

public ViewResult Index(Int32? id) { var products = from p in db.Products select p; if (id != null) { ViewBag.CategoryId = id.Value; products = products.Where(p => p.CategoryID == id); ViewBag.productos = products; } return View(db.Categories.ToList()); }

9.2) Abrir la vista índex de categorías y modificar el código del foreach.

@foreach (var item in Model) { string selectedRow = ""; if (item.CategoryID == ViewBag.CategoryID) { selectedRow = "selectedrow"; } <tr class="@selectedRow"> <td> @Html.DisplayFor(modelItem => item.CategoryName) </td> <td> @Html.DisplayFor(modelItem => item.Description) </td> <td> @Html.ActionLink("Select", "Index", new { id = item.CategoryID }) | @Html.ActionLink("Edit", "Edit", new { id=item.CategoryID }) | @Html.ActionLink("Details", "Details", new { id=item.CategoryID }) | @Html.ActionLink("Delete", "Delete", new { id=item.CategoryID }) </td> </tr> }

</table> @if (ViewBag.productos != null) { <h3>Productos para esta categoria</h3> <table> <tr> <th>Nombre</th> <th>Precio</th> <th>Stock</th> </tr> @foreach (var item in ViewBag.productos)

{ <tr> <td> @item.ProductName </td> <td> @String.Format("{0:c}", @item.UnitPrice) </td> @if(@item.UnitsInStock==0) { <td style="color: red">@item.UnitsInStock</td> } else { <td> @item.UnitsInStock</td> } </tr> } </table> }

9.3) Agregar la clase al css ubicado en content y luego Site.css

.selectedrow 

{

background-color:Silver;

}

Resultado final:

10 comentarios:

Erick Sanabria dijo...

funciona para Oracle?

viernes, diciembre 16, 2011 7:48:00 p. m.

Erick Sanabria dijo...

funciona para Oracle?

viernes, diciembre 16, 2011 7:49:00 p. m.

CADAVID dijo...

Buena la idea pero faltan cosas que no explicas :(

martes, enero 31, 2012 8:41:00 p. m.

CADAVID dijo...

Puedes subir publicar el código completo?

martes, enero 31, 2012 8:42:00 p. m.

Anonimo dijo...

CADAVID QUE CODIGO FALTA?

domingo, marzo 04, 2012 1:12:00 a. m.

Anonimo dijo...

ERICK SI FUNCIONA CON ORACLE Y FUNCIONA BIEN MIRA UN EJEMPLO:

http://www.cjorellana.net/2012/03/ejemplo-entity-framework-con-oracle.html

domingo, marzo 04, 2012 1:13:00 a. m.

Chen dijo...

Tengo una duda, si realizo cambios en el diseñador del modelo, en el archivo edmx,

para por ejemplo añadir propiedades como [Required], [StringLength]... y después

actualizo el modelo desde la base de datos, todo estos parámetros para la vista los

pierdo. 

¿Como puedo complementar mis clases del modelo sin que le afecte los cambios

cuando actualice desde la base de datos?

Gracias, un saludo

martes, junio 12, 2012 6:24:00 a. m.

Anonimo dijo...

Según yo debes de pasarte a Entity Manuales :)

Ejemplo:

http://www.cjorellana.net/2011/10/introduction-mvc-controladores.html

Espero te ayude.

martes, junio 12, 2012 6:38:00 p. m.

Anonimo dijo...

Buenas, estoy siguiendo el ejemplo para iniciarme en este lenguaje. Hasta el punto 6

todo me ha quedado claro, pero a la hora de desarrollar el filtro me pierdo. El

controller categorycontroller hay que crearlo previamente o este codigo se le añade

al controller de productos? A ver si me puedes explicar este paso de forma mas

elemental. 

Gracias y un saludo

martes, julio 24, 2012 4:15:00 a. m.

Anonimo dijo...

Tienes toda la razón es el contralador: ProductosController 

Ya lo corregi, prueba de nuevo y me cuentas.

martes, julio 24, 2012 12:30:00 p. m.

Publicar un comentario

Entrada más reciente Entrada antigua Página Principal

Suscribirse a: Comentarios de la entrada (Atom)

MVC con Entity FrameworkInformación general

El modelo de arquitectura Model-View-Controller (MVC) separa una aplicación en tres

componentes principales: el modelo, la vista y el controlador. El framework de ASP.NET

MVC proporciona una alternativa al modelo de formularios Web Forms de ASP.NET para

crear aplicaciones web.

Leer mas teoría sobre MVC

MVC

0.) Instalar MVC 3, descargarlo de aqui.

1.)Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction 

2.)  Le mostrara la pantalla de que tipo de aplicación (Internet o intranet), que tipo de

motor quiere utilizar ASPX oRazor. Seleccione Internet Application y Use HTML 5

semantic Markup.

Diferencias:

Emply un proyecto Totalmente Vacio.

Internet Application un proyecto con autenticación por formularios.

Intranet Application un proyecto con autenticación por Windows Active Directory.

3.) Creando el modelo

Modelos. Los objetos de modelo son las partes de la aplicación que implementan la

lógica del dominio de datos de la aplicación. A menudo, los objetos de modelo

recuperan y almacenan el estado del modelo en una base de datos. Por ejemplo, un

objeto Productos podría recuperar información de una base de datos, trabajar con ella

y, a continuación, escribir la información actualizada en una tabla Productos de una

base de datos de SQL Server.

3.1)En el Solucion explorer, presione clic derecho sobre la carpeta Models y luego en la

ventana seleccione Ado Entity Data Model, con el nombre: NorthwindModel.edmx

Continue los pasos del asistente, como se indica en las imagenes.

3.2) Antes de continuar compile el proyecto.

4.)Creado el Controlador

Controladores. Los controladores son los componentes que controlan la interacción

del usuario, trabajan con el modelo y por último seleccionan una vista para representar

la interfaz de usuario. En una aplicación MVC, la vista solo muestra información; el

controlador administra y responde a los datos proporcionados por el usuario y su

interacción. Por ejemplo, el controlador administra los valores de la cadena de consulta

y pasa estos valores al modelo, que a su vez podría utilizarlos para consultar la base de

datos.

4.1) Presione Clic derecho sobre la carpeta de Controllers, luego add y por

ultimo Controller....

4.2) Se mostrara la pantalla para que seleccione el tipo de Controller.

Nombre: ProductosController

Template: Adding a controller with read/write actions and views, using Entity Framework 

Model Data Class: Products (Nombre proyecto.Models)

Data Context class: NortwindEntities (Nombre proyecto.Models)

Views: Razor (cshtml)

5.) Explorado las Vistas.

Vistas. Las vistas son los componentes que muestra la interfaz de usuario de la

aplicación. Normalmente, esta interfaz de usuario se crea a partir de los datos de

modelo. Un ejemplo sería una vista de edición de una tabla Productos que muestra

cuadros de texto, listas desplegables y casillas basándose en el estado actual de un

objeto Product.

Luego del ultimo paso nos creo 5 archivos en la carpeta view, estos archivos nos

ayudaran a manejar nuestro controlador.

Create.cshtml

Delete.cshtml

Details.cshtml

Edit.cshtml

Index.cshtml

Archivo Index.cshtml

6.) Cambiando Los enrutadores, para mostrar nuestro mas reciente proyecto

tenemos que modificar layout.

6.1) En la carpeta view - dentro de la carpeta de share - abra el

archivo _Layout.cshtml este archivo contiene nuestra plantilla del sitio.

<ul id="menu">      <li>@Html.ActionLink("Home", "Index", "Home")</li>

      <li>@Html.ActionLink("About", "About", "Home")</li>

      <li>@Html.ActionLink("Productos", "Index", "Productos")</li>

</ul>

6.1) Ejecute su proyecto (F5) para poder probar su proyecto, el resultado será:

7.) Agregado un Filtro a la pantalla de Index.

7.1) Abra el controller ProductosController y agregue el siguiente código en el

método índex:

public ViewResult Index(string CategoryID) {

var products = from p in db.Products.Include("Category").Include("Supplier") select p; ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");

if (!String.IsNullOrEmpty(CategoryID)) { int idcategoria = Convert.ToInt32(CategoryID); products = products.Where(x => x.CategoryID == idcategoria); } return View(products.ToList()); }

7.2) En la carpeta view edite al archivo recienmente creado SearchIndex.cshtml:

7.3) Agregue el siguiente código:

<p>

@Html.ActionLink("Create New", "Create")

@using (Html.BeginForm()) { <p> Product Name: @Html.DropDownList("CategoryID", String.Empty) &nbsp; <input type="submit" value="Search" /></p> }

</p>

7.4) Resultado:

8.) Creando pantalla de Categorias:

8.1) Presione Clic derecho sobre la carpeta de Controllers, luego add y por

ultimo Controller....

8.2) Se mostrara la pantalla para que seleccione el tipo de Controller.

Nombre: CategoriasController

Template: Adding a controller with read/write actions and views, using Entity Framework 

Model Data Class: Category (Nombre proyecto.Models)

Data Context class: NortwindEntities (Nombre proyecto.Models)

Views: Razor (cshtml)

9 ) En la pantalla de índex  agregaremos los productos asociados a esa categoría.

9.1) Abrir el controlador CategoriasController en el método índex y modificaremos

de la siguiente manera:

public ViewResult Index(Int32? id) { var products = from p in db.Products select p; if (id != null) { ViewBag.CategoryId = id.Value; products = products.Where(p => p.CategoryID == id); ViewBag.productos = products; } return View(db.Categories.ToList()); }

9.2) Abrir la vista índex de categorías y modificar el código del foreach.

@foreach (var item in Model) { string selectedRow = ""; if (item.CategoryID == ViewBag.CategoryID) { selectedRow = "selectedrow"; } <tr class="@selectedRow"> <td> @Html.DisplayFor(modelItem => item.CategoryName) </td> <td> @Html.DisplayFor(modelItem => item.Description) </td> <td> @Html.ActionLink("Select", "Index", new { id = item.CategoryID }) | @Html.ActionLink("Edit", "Edit", new { id=item.CategoryID }) | @Html.ActionLink("Details", "Details", new { id=item.CategoryID }) | @Html.ActionLink("Delete", "Delete", new { id=item.CategoryID }) </td> </tr> }

</table> @if (ViewBag.productos != null) { <h3>Productos para esta categoria</h3> <table> <tr> <th>Nombre</th> <th>Precio</th> <th>Stock</th> </tr> @foreach (var item in ViewBag.productos)

{ <tr> <td> @item.ProductName </td> <td> @String.Format("{0:c}", @item.UnitPrice) </td> @if(@item.UnitsInStock==0) { <td style="color: red">@item.UnitsInStock</td> } else { <td> @item.UnitsInStock</td> } </tr> } </table> }

9.3) Agregar la clase al css ubicado en content y luego Site.css

.selectedrow 

{

background-color:Silver;

}

Resultado final:

10 comentarios:

Erick Sanabria dijo...

funciona para Oracle?

viernes, diciembre 16, 2011 7:48:00 p. m.

Erick Sanabria dijo...

funciona para Oracle?

viernes, diciembre 16, 2011 7:49:00 p. m.

CADAVID dijo...

Buena la idea pero faltan cosas que no explicas :(

martes, enero 31, 2012 8:41:00 p. m.

CADAVID dijo...

Puedes subir publicar el código completo?

martes, enero 31, 2012 8:42:00 p. m.

Anonimo dijo...

CADAVID QUE CODIGO FALTA?

domingo, marzo 04, 2012 1:12:00 a. m.

Anonimo dijo...

ERICK SI FUNCIONA CON ORACLE Y FUNCIONA BIEN MIRA UN EJEMPLO:

http://www.cjorellana.net/2012/03/ejemplo-entity-framework-con-oracle.html

domingo, marzo 04, 2012 1:13:00 a. m.

Chen dijo...

Tengo una duda, si realizo cambios en el diseñador del modelo, en el archivo edmx,

para por ejemplo añadir propiedades como [Required], [StringLength]... y después

actualizo el modelo desde la base de datos, todo estos parámetros para la vista los

pierdo. 

¿Como puedo complementar mis clases del modelo sin que le afecte los cambios

cuando actualice desde la base de datos?

Gracias, un saludo

martes, junio 12, 2012 6:24:00 a. m.

Anonimo dijo...

Según yo debes de pasarte a Entity Manuales :)

Ejemplo:

http://www.cjorellana.net/2011/10/introduction-mvc-controladores.html

Espero te ayude.

martes, junio 12, 2012 6:38:00 p. m.

Anonimo dijo...

Buenas, estoy siguiendo el ejemplo para iniciarme en este lenguaje. Hasta el punto 6

todo me ha quedado claro, pero a la hora de desarrollar el filtro me pierdo. El

controller categorycontroller hay que crearlo previamente o este codigo se le añade

al controller de productos? A ver si me puedes explicar este paso de forma mas

elemental. 

Gracias y un saludo

martes, julio 24, 2012 4:15:00 a. m.

Anonimo dijo...

Tienes toda la razón es el contralador: ProductosController 

Ya lo corregi, prueba de nuevo y me cuentas.

martes, julio 24, 2012 12:30:00 p. m.