viernes, 18 de noviembre de 2011
MVC con Entity Framework
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 o Razor. 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
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
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)
<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:
Suscribirse a:
Comentarios de la entrada (Atom)
10 comentarios:
funciona para Oracle?
funciona para Oracle?
Buena la idea pero faltan cosas que no explicas :(
Puedes subir publicar el código completo?
CADAVID QUE CODIGO FALTA?
ERICK SI FUNCIONA CON ORACLE Y FUNCIONA BIEN MIRA UN EJEMPLO:
http://www.cjorellana.net/2012/03/ejemplo-entity-framework-con-oracle.html
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
Según yo debes de pasarte a Entity Manuales :)
Ejemplo:
http://www.cjorellana.net/2011/10/introduction-mvc-controladores.html
Espero te ayude.
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
Tienes toda la razón es el contralador: ProductosController
Ya lo corregi, prueba de nuevo y me cuentas.
Publicar un comentario