5 – MVC 3 con Razor ~ Directiva @model con Base de datos

Hola gente, hoy vamos a hablar de la directiva @model, con algo de base de datos.

La directiva @model ofrece una forma más clara de referenciar modelos fuertemente tipados en una vista.  Para ver como funciona primero vamos a trabajar en un ejemplo creando una tabla en nuestra DB y despues configurando modelo que utilice esa tabla.

Pero mejor un ejemplo para que veamos esto.

Vamos  agarrar el proyecto anterior con la base de datos configurada, y vamos a crear una tabla nueva que se va a llamar UsersDB.
image

Agregamos un modelo a nuestra proyecto donde utilizaremos la tabla creada. Para hacer esto nos vamos a la carpeta modelo y hacemos clic en el boton derecho y agregar – nuevo elemento.
image

Elegimos una clase de Linq de SQL.
image

En primer plano nos va aparecer un documento en blanco done tendremos que agregar nuestra tabla.
image

Para ello hacemos clic en Explorador de Servidores se nos abre la base de datos y arrastramos nuestra tabla al centro del espacio en blanco, este proceso configura automáticamente la tabla con nuestro modelo.
image

Agregamos un nuevo controlador, haciendo botón derecho en la carpeta Controllers y Agregar Controlador.
image

Para utilizar nuestro modelo tenemos que hacer como en el 2º POST, para eso insertamos el siguiente código.

using MVC3Razor.Models;

namespace MVC3Razor.Controllers
{
public class DatosUserDBController : Controller
{
DataDBModeloDataContext usuariosDB = new DataDBModeloDataContext();

public ActionResult UsuariosListDB()
{
var us = from f in usuariosDB.UsersDB orderby f.idUser ascending select f;
return View(us);
}

}
}

Bien ahora agregamos una nueva vista, pero para hacerlo más ordenado vamos a crear una nueva carpeta DatosUserDB y ahi agregaremos nuestra vista.

image

Ahora le indicamos que vamos a crear una vista fuertemente tipada y seleccionamos el modelo de la tabla que hemos configurado, de seguro notaran que salen otros modelos más, son de los modelos que ya estamos utilizando, también le indicamos que vamos usarla para mostrar una Lista de esta tabla.

image


Esto nos genera un código de ejemplo donde ya lo podemos ejecutar.

image

. Pero nosotros vamos a insertar mejor un enlace en nuestro menú a esta nueva vista, para ello vamos a nuestra template activa y agregamos la siguiente línea.

<li>@Html.ActionLink("Lista de Usuarios de DB", "UsuariosListDB", "DatosUserDB")</li>

image


Ahora si ya podemos ejecutar nuestro proyecto.

image

Bien ahora vamos a ver como entra en juego nuestro @model, si pueden observar veran que en la vista que creamos esta la directiva @model al principio, esta directiva es un reemplazo de utilizar @inherits, abajo un ejemplo.


@model IEnumerable<MVC3Razor.Models.UsersDB>

@inherits System.Web.Mvc.WebViewPage<IEnumerable<MVC3Razor.Models.UsersDB>>

     
De esta forma no tendremos que indicar nunca más el @inherits para indicar la clase base, por defecto si no esta esta directiva nuestra base deriva de System.Web.Mvc.ViewPage<TModel>

Ahora les dejo a ustedes que agreguen las vistas de Edición, detalles y eliminación de esta tabla.

     En resumen hoy hemos aprendido a:

Agregar una tabla una base de datos.

Agregar un modelo de Linq de SQL.

Agregar una tabla al modelo.

Utilizar nuestro modelo.

Referenciar con @model

Recomendaciones:

Webmatrix Parte 6, Creando un formulario para agregar datos

WebMatrix parte 7 – Creando una página de edición de datos

WebMatrix parte 8 – Creando una página de borrado de datos

WebMatrix parte 9–Publicando nuestro sitio

Bueno gente hasta aquí hacemos hoy, para la próxima vamos a ver como un poco de como se trabaja con JQuery, Facebook y Twitter en MVC 3.

Para cualquier consulta pueden dejar sus mensajes aquí o mandar me un correo electrónico a Moises.Rivas@msptechrep.com.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s