sábado, 10 de septiembre de 2011

Ejemplo de MVC 3.0 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.
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: CategoryController
Template: Adding a controller with read/write actions and views, using Entity Framework 
Model Data Class: Categories (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("Categorias", "Index", "Category")</li> 
</ul>

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



Index


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


7.1) Abra el controller CategoryController y agregue el siguiente código:


 public ActionResult SearchIndex(string searchString)
        { 
            var categories = from m in db.Categories 
                         select m; 

            if (!String.IsNullOrEmpty(searchString)) 
            { 
                categories = categories.Where(s => s.Description.Contains(searchString)); 
            } 

            return View(categories); 
        }





7.2) Agregue la una nueva vista para donde utlizaremos el controlador, clic derecho sobre método add view y configure la ventana de la siguiente manera.  






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


7.4) Agregue el siguiente código:
<h2>SearchIndex</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 

    @using (Html.BeginForm()){    
        <p> Description: @Html.TextBox("SearchString") <br />   
        <input type="submit" value="Filter" /></p> 
    } 
</p>
7.5) En la carpeta view - dentro de la carpeta de share - abra el archivo _Layout.cshtml cambie el action que creamos anteriormente.




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



8.) Por ultimo cambiarmos  el textbox por un Dropdown list, para esto tenemos que cambiar el controler.






Controller:


public ActionResult SearchIndex(string name, string searchString)
        { 

            var Lst = new List<string>(); 

            var Qry = from d in db.Categories 
                           orderby d.CategoryName  
                           select d.CategoryName; 
            Lst.AddRange(Qry.Distinct()); 
            ViewBag.name = new SelectList(Lst); 

            var categories = from m in db.Categories 
                         select m; 

            if (!String.IsNullOrEmpty(searchString)) 
            { 
                categories = categories.Where(s => s.Description.Contains(searchString)); 
            } 

            if (string.IsNullOrEmpty(name))
                return View(categories); 
            else 
            { 
                return View(categories.Where(x => x.CategoryName == name));
            } 

            
        }


8.1) Por ultimo en este ejercicio cambiaremos la vista:
<h2>SearchIndex</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 

    @using (Html.BeginForm()){    
         <p>Name: @Html.DropDownList("name", "All")   
        &nbsp;  Title: @Html.TextBox("SearchString")   
         <input type="submit" value="Filter" /></p> 
        } 
</p>


Con esto terminamos nuestro ejemplo.


Para agregar seguridad a nuestro sitio tenemos un ejemplo en la siguiente pagina:


 http://www.asp.net/mvc/tutorials/authenticating-users-with-forms-authentication-cs

5 comentarios:

Andy00 dijo...

Lo Maximo (este post) esta muy bueno...gracias pro tus aportes..

Erick Sanabria dijo...

si esta muy bueno este post, ya empece a leer para iniciar con este tema.

Beto dijo...

Que buen ejemplo, muchas gracias

Tatito dijo...

Como recibes el dato a buscar? no deberias utilizar [HttpPost]?

Yesenia Calderon dijo...

Increible post..llevaba mucho buscando esto, muchas gracias..!!!!!