Ya esta disponible nuestro Framework para MVC4 Web Api

CRUD
He escuchado algunas sugerencias y decidí adaptar nuestras herramientas para que funcionen bajo proyectos de Visual Studio tipo MVC4 Web Api.
No fue difícil la adaptación ya que el Framework funcionaba con una filosofía muy similar a la propuesta por Web Api. Simplemente agregué un par de propiedades y modifique el protocolo de request para que sea RESTFul.
Aquí les dejo un CRUD o ABMC mostrando la técnica de desarrollo, que por cierto, es muy fácil.

El Modelo

Imports System.Runtime.Serialization
Imports System.ComponentModel

<DataContract(Name:="Persona")> _
Public Class Persona
    Public Sub New(pId As Guid, pNombre As String, pApellido As String, pEdad As Integer)
        Id = pId
        Nombre = pNombre
        Apellido = pApellido
        Edad = pEdad
    End Sub
    <DataMember(Name:="Id", IsRequired:=False), DefaultValue("{00000000-0000-0000-0000-000000000000}")> _
    Public Property Id As Guid
    <DataMember(Name:="Nombre")> _
    Public Property Nombre As String
    <DataMember(Name:="Apellido")> _
    Public Property Apellido As String
    <DataMember(Name:="Edad"), DefaultValue(45)> _
    Public Property Edad As Integer
End Class

Como se puede ver no hay mucho secreto. Puedo destacar la aplicación de atributos DefaultValue al Id y la Edad para que al momento del Alta o Creación de registro nuestro formulario presente un valor por defecto al usuario.

El Controlador

Public Class PersonasController
    Inherits ApiController

    Dim Personas As List(Of Persona) = HttpContext.Current.Application("Personas")

    Public Function GetAllPersonas() As IEnumerable(Of Persona)
        Return Personas.OrderBy(Function(p) (p.Apellido))
    End Function

    Public Function PostPersona(item As Persona) As Persona
        item.Id = Guid.NewGuid()
        Personas.Add(item)
        Return item
    End Function

    Public Function DeletePersona(item As Persona) As Persona
        Dim Per As Persona = Personas.Find(Function(p) (p.Id = item.Id))
        Personas.Remove(Per)
        Return Per
    End Function

    Public Function PutPersona(item As Persona) As Persona
        Dim Per As Persona = Personas.Find(Function(p) (p.Id = item.Id))
        Personas(Personas.IndexOf(Per)) = item
        Return item
    End Function

End Class

Un controller bien básico, con las cuatro operaciones necesarias para nuestro CRUD.
Como se puede apreciar los datos están en una variable de aplicación llamada Personas. Ustedes pueden obtenerlos del origen que mas gusten.

Los Datos

Sub Application_Start()
        AreaRegistration.RegisterAllAreas()
        WebApiConfig.Register(GlobalConfiguration.Configuration)
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
        RouteConfig.RegisterRoutes(RouteTable.Routes)
        BundleConfig.RegisterBundles(BundleTable.Bundles)
        GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear()

        Dim Personas As New List(Of Persona)
        Personas.Add(New Persona(Guid.NewGuid(), "Juan", "Perez", 45))
        Personas.Add(New Persona(Guid.NewGuid(), "Pedro", "Gomez", 35))
        Personas.Add(New Persona(Guid.NewGuid(), "Pablo", "Gimenez", 35))
        HttpContext.Current.Application.Add("Personas", Personas)


    End Sub

En mi caso, y para simplificar, creo tres personas en el Global.asax.vb Application_Start y las guardo en una variable de aplicación llamada Personas.

La Vista

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="MoniMisi2" Namespace="MoniMisi2" TagPrefix="MM2" %>
<!DOCTYPE html>

<html>
<head runat="server">
    <link href="../../Content/ABM.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript">
        function ModificarRegistro(sender, e) {
            $find('Personas$Formulario').Mostrar('Mo')
        }
        function Aceptado(sender, e) {
            $find("RegistroPersonas$Grilla").Refrescar();
        }
       
    </script>
    <form runat="server" id="Form1">
        <MM2:ScriptManager runat="server"></MM2:ScriptManager>

        <div style="width: 70%">
            <MM2:ProveedorDatosServidor runat="server" ID="Personas" WebMethod="api/Personas/" REST="true" Modelo="Prueba.Persona, Prueba, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
                <Ordenes >
                    <MM2:OrdenDatos Columna ="Apellido" />
                </Ordenes>
            </MM2:ProveedorDatosServidor>
            <table class="TablaABM">
                <tr>
                    <td style="width: 1%">
                        <ul class="Botonera">
                            <MM2:HtmlAccion ID="HtmlAccion1" Accion="FormularioMostrarAlta" IDFormulario="Formulario" runat="server">
                                Agregar
                            </MM2:HtmlAccion>
                            <MM2:HtmlAccion ID="HtmlAccion2" Accion="FormularioMostrarBaja" IDFormulario="Formulario" runat="server">
                                Eliminar
                            </MM2:HtmlAccion>
                            <MM2:HtmlAccion ID="HtmlAccion3" Accion="FormularioMostrarModificacion" IDFormulario="Formulario" runat="server">
                                Modificar
                            </MM2:HtmlAccion>
                            <MM2:HtmlAccion ID="HtmlAccion4" Accion="FormularioMostrarConsulta" IDFormulario="Formulario" runat="server">
                                Consultar
                            </MM2:HtmlAccion>
                        </ul>
                    </td>
                    <td style="width: 99%">
                        <table class="Grilla">
                            <thead>
                                <tr>
                                    <th >
                                       Apellido
                                    </th>
                                    <th >
                                       Nombre
                                    </th>
                                    <th>
                                       Edad
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr runat="server" id="RegistroPersonas">
                                    <td id="Personas_Apellido"></td>
                                    <td id="Personas_Nombre"></td>
                                    <td id="Personas_Edad"></td>
                                </tr>
                            </tbody>
                        </table>
                        <MM2:Grilla ID="GrillaPersonas" runat="server" IDDatos="Personas" TargetControlID="RegistroPersonas" Filas="7" Elegido="ModificarRegistro" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table id="Formulario_Mdl" class="Formulario">
                            <thead>
                                <tr id="Formulario_AlDR">
                                    <th colspan="2" style="cursor: pointer">Alta
                                    </th>
                                </tr>
                                <tr id="Formulario_BaDR" style="cursor: pointer">
                                    <th colspan="2">Baja
                                    </th>
                                </tr>
                                <tr id="Formulario_MoDR" style="cursor: pointer">
                                    <th colspan="2">Modificacion
                                    </th>
                                </tr>
                                <tr id="Formulario_CoDR" style="cursor: pointer">
                                    <th colspan="2">Consulta
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Apellido
                                    </td>
                                    <td>
                                        <input type="text" id="Formulario_AlMoFMFA_Apellido" />
                                        <span id="Formulario_BaCo_Apellido" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Nombre
                                    </td>
                                    <td>
                                        <input type="text" id="Formulario_AlMo_Nombre" />
                                        <span id="Formulario_BaCo_Nombre" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Edad
                                    </td>
                                    <td>
                                        <MM2:Numero ID="Formulario_AlMo_Edad" runat="server" Enteros="3" Decimales ="0"></MM2:Numero>
                                        <span id="Formulario_BaCo_Edad" />
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="2">
                                        <input type="button" value="Aceptar " id="Formulario_AcFC" />
                                        <input type="button" value="Cancelar" id="Formulario_AlMoBaCaFB" />
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                        <MM2:Formulario runat="server" ID="Formulario" TargetControlID="Personas" Aceptado="Aceptado" ></MM2:Formulario>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Aquí podemos ver que la forma de usar los controles Grilla y Formulario sigue siendo la misma que usamos en los ejemplos anteriores. La diferencia esta únicamente en le ProveedorDatosServidor que posee dos nuevas propiedades y paso que paso a detallar:

REST–> Indica que este control debe comportarse de acuerdo a las especificaciones RESTful.

Modelo–> Es una referencia al modelo, y corresponde con el AssemblyQualifiedName del Type de la clase modelo.

WebMethod –> Si bien esta propiedad ya existía, en el caso que la propiedad REST sea igual a true, deberá apuntar a la URI del Controller correspondiente.

Eso es todo el resto de los controles sigue funcionando como antes.
Ahora para que puedan tener una mejor visión de este ejemplo, les dejo este StyleSheet.

.TablaABM
{
    box-shadow: 1px 1px 7px rgba(0,0,0,.5);
    font-family: 'Xolonium';
    font-weight: normal;
    font-style: normal;
    width: 100%;
    height: 100%;
}

.TablaABM tr td
{
    border: solid 1px black;
    background-color: #322738;
}

.TablaABM tr td h3
{
    background-color: #322738;
    color: #ECECD7;
    text-align: center;
}

.Botonera
{
    list-style-type: none;
}

.Botonera
{
    list-style-type: none;
    text-align: left;
}
.Botonera li
{
    font-size: small;
    cursor: pointer;
    height: 3rem;
    width: 7rem;
    color: #ECECD7;
    opacity:.7;
}

.Botonera li:before
{
    font-family: 'breezi';
    display: inline-block;
    color: Orange;
    font-size: 18px;
    vertical-align : sub ;
}

.Botonera li:hover
{
    opacity:1
}

.Botonera li[icono=Baja]:before
{
    content: "x";
}
.Botonera li[icono=Alta]:before
{
    content: "+";
}
.Botonera li[icono=Modificacion]:before
{
    content: "e";
}
.Botonera li[icono=Consulta]:before
{
    content: "i";
}
.Grilla
{
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
}

.Grilla thead tr th
{
    height: 1.5rem;
    background-color: #C7C789;
}
.Grilla thead tr th[ordenar=true]
{
    cursor: pointer !important;
}
.Grilla thead tr th[ordenar=true]:hover
{
}


.Grilla tfoot tr td
{
    height: 1.5rem;
    background-color: #C7C789;
}


.Grilla tbody tr td
{
    cursor: pointer !important;
    height: 1.5rem;
    background-color: #ECECD7;
    opacity: .5;
}

.Grilla tbody tr:hover td
{
    opacity: .6;
}

.Grilla tbody tr.Seleccionado td
{
    opacity: 1;
}

.Formulario
{
    background: #ECECD7;
    box-shadow: 1px 1px 7px rgba(0,0,0,.5);
    border: 2px solid #322738;
    border-collapse: collapse;
}

.Formulario thead tr th
{
    background-color: #322738;
    margin: 0rem;
    padding: .5rem;
    text-align: center;
    color: #ECECD7;
    border: none;
}
.Formulario tfoot tr td
{
    background-color: #ECECD7;
    border: none;
    text-align: right;
}
.Formulario tbody tr td
{
    background-color: #ECECD7;
    color: Black;
    padding: .5rem;
    margin: .5rem;
    border: none;
}



.Formulario input[type="text"]
{
    font-family: 'Xolonium';
    font-weight: normal;
    font-style: normal;
    display: block;
    padding: .3rem;
}


.Formulario button
{
    cursor: pointer;
    text-align: center;
    margin: 0rem;
    padding: .3rem;
    border: none;
    background-color: #322738;
}

.Formulario button[icono=Entrar]
{
    
}
.Formulario button[icono=Entrar]:before
{
    font-family: 'Guifx';
    font-size: 18px;
    content: "z";
    background-color: Transparent;
    color: orange;
    padding: 0rem;
    opacity: .7;
}
.Formulario button[icono=Entrar]:hover:before
{
    opacity:1;
}

.Formulario button[icono=Cerrar]
{
    position: absolute;
    top: 0rem;
    right: 0%;
}
.Formulario button[icono=Cerrar]:before
{
    font-family: 'Guifx';
    font-size: 18px;
    content: "x";
    background-color: Transparent;
    color: orange;
    padding: 0rem;
    opacity: .7;
}
.Formulario button[icono=Cerrar]:hover:before
{
    opacity:1
    }

Si les gustó pueden bajar la librería de la sección Downloads del menú del blog y ponerla como referencia en su proyecto MVC. Y si no recuerdan como usar los controles solo deberán hacer click en la lista de Controles Desarrollados del panel del la derecha.

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