.Net Para Todos

A continuación vamos a crear una Web API 2, la cual nos sera util para intercambiar datos con otras sitios web o aplicaciones, las apis viene a reemplazar a los pesados XML web service que han ido perdiendo mercado.

Las Web API al ser HTTP pueden verbos get,post, put y delete. 

Creando un nuevo proyecto

Inicie Visual Studio, en el menu File, seleccione New Project en los templates seleccione c# y luego web, Por ultimo seleccionamos  





Se mostrara el cuando de dialogo de new ASP.Net Project, acá seleccionamos Web Api y se marca la caja de selección Web API.

Extrayendo Datos.

Para extraer datos necesitamos crear Modelos, los modelos representas tablas, vistas o resultados  de nuestra base de datos, nosotros tomaremos esos modelos y los vamos a serializar en formato JSON, a continuación vamos a crear la clase de Productos la cual es representativa de la tabla Products.




En el solución explorer, vamos a la carpeta modelo, presionamos clic derecho seleccionamos Add y luego Class, solo vamos a utilizar unos pocos campos. por lo que quedara de la siguiente manera:





<>

using System;
using System.ComponentModel.DataAnnotations;

namespace AppNorthwind.Models
{
    public class Product
    {
        [Key]
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public Nullable<int> SupplierID { get; set; }
        public Nullable<int> CategoryID { get; set; }
        public Nullable<decimal> UnitPrice { get; set; }
        public Nullable<short> UnitsInStock { get; set; }
    }
}

Configurando el Accedo a la Base de Datos

Vamos a cambiar nuestro web config para que se conecte a la base de datos que necesitamos.

Abre el web config y cambiamos la sección connection string

<connectionStrings>
     <add name="DefaultConnection" 
     connectionString="Data Source=localhost;Initial Catalog=Northwind;user id=sa;password=P@ssw0rd" 
     providerName="System.Data.SqlClient" />
<connectionStrings>

Con este cambio ya podremos alcanzar el servidor de base de datos.

Creando Un Contexto

Necesitamos un contexto que realize el mapeo entre la base de datos y nuestra clase y así se llene cuando los solicitemos.  

Un contexto no es mas que una clase que hereda de context, vamos agregar una nueva clase repitiendo los pasos de la clase productos, solo que ahora le agregaremos el nombre NorthwindContext






La clase NorthwindContext deberia quedar de la siguiente manera:

using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;


namespace AppNorthwind.Models
{
    public class NorthwindContext : DbContext
    {
        public NorthwindContext()
            : base("DefaultConnection")
        {
        }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
            base.OnModelCreating(modelBuilder);
        }

        public DbSet<Models.Products> Products { get; set; }

    }
}

En el constructor llamamos la conexión agregada en el web config, luego sobre escribimos al void OnModelCreating para evitar que entity framework ponga en plural o singular los nombre de las tablas, ya que queremos que los deje com el mismo nombre, por ultimo agregamos el mapeo de la tabla de la base de datos a nuestra clase Products.

Antes de continuar debemos de compilar el proyecto, en el solucion explorer, en nuestro proyecto (AppNorthwind)  clic derecho build.

Agregando Controladores 

Los controladores nos ayudaran a exponer las llamadas a nuestra API, vamos a usar el concepto de Scaffolding para que nos genere el CRUD luego podemos agregar nuestros metodos de ser necesarios.

Sobre la Carpeta Controller presionamos clic derecho y luego add y por ultimo Controller.




En la ventana de Scaffolding seleccionamos, Web API 2 Contoller with actions, using Entity Framework, esto nos creara las acciones del CRUD.




Ahora nos solicitara que agreguemos nombre a nuestro controlador, y que seleccionemos el modelo y contexto.

Controller: ProductsController
Model: Products
Context: NorthwindContext





Bueno Ahora nos generara nuestro controlador con sus acciones.

Nos creo varias acciones

Accion	URL	Tipo
GetProducts()	api/Products	Obtiene (GET)
GetProducts(int id)	api/Products/5	Obtiene (GET)
PutProducts(int id, Products products)	api/Products/5	Cambia (PUT)
PostProducts(Products products)	api/Products	Guarda(POST)
DeleteProducts(int id)	api/Products/5	Borra

Agregando Documentación del API

Vamos a revisar la documentación que ha generado el proyecto, ejecutamos el proyecto con F5 o con el boton run.




Cuando haces clic en las acciones, nos muestra mas detalles.

Probando la API 

Hay varias formas de probar la API, 


1.) Una forma sencilla es hacerlo directamente desde la URL


http://localhost:3548/api/Products/1


http://localhost:3548/api/Products





2.) Vamos a iniciar con una simple pagina.

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
</head>
<body>
    <div>
        <h2>Producto</h2>
        <input type="text" id="txtcodigo" size="15"  />
        <input type="button" value="Buscar" onclick="find();" />
        <ul id="respuesta" />
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>

        function find() {
            var codigo = $('#txtcodigo').val();

            var uri = 'api/products/' + codigo;

            $.ajax({
                type: "GET",
                accept: "json",
                url: uri,
                contentType: "application/json",
                cache: false
            }).done(function (data) {
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    $('<li>', { text: JSON.stringify(item) }).appendTo($('#respuesta'));
                });
            }).fail(function (data) {
                var x = JSON.parse(data);

                console.log(x);
            });
        }

    </script>
</body>
</html>

TablaJs es una librería lista para usar por los desarrolladores, enteramente realizadas con jQuery y JSON.   Ofrece diversas funcionalidades básicas, como buscar mientras se escribe, ordenar, entre otras.  También soporta múltiples tipos de datos (string, decimal, int, bool)

Descargar Ejemplo Completo

El ejemplo es muy sencillo, debes tener terminado.

http://www.cjorellana.net/2014/06/mvc-5-modelos.html

1.) Deben de agregar la libreria de tabla3.js a su carpeta Script, puede bajarlo de este sitio.

Descargar Tabla.js





2.) En el Controlador debemos de cambiar índex para que solo retorne la vista y agregar un método que devuelva el json.

        public ActionResult Index() 
        { 
            return View();
        }

        [HttpPost] 
        [ValidateAntiForgeryToken] 
        public JsonResult ObtenerProductos() 
        { 

            var query = from p in db.Products 
                        select new 
                        { 
                            p.ProductID, 
                            p.ProductName, 
                            p.UnitPrice,  
                            p.Discontinued 
                        }; 

            return Json(query.ToList(), JsonRequestBehavior.AllowGet);
        }

3.) Debemos de cambiar la vista  index.

<h2>Index</h2>

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

@Html.AntiForgeryToken()

<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-8 col-md-9">
                        <strong>Listado De Productos</strong>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <div data-tabla="dttabla">
                            <input type="text" class="form-control search-query input-sm" placeholder="Buscar" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed" data-orden="true" data-filtro="true" data-fuente="dtLlenar"
                       id="dttabla" data-seleccion="true">
                    <thead>
                        <tr>
                            <th data-tipo="foto" data-campo="FOTO" data-alineacion="centro"></th>
                            <th data-tipo="int" data-campo="ProductID"
                                data-alineacion="izquierda" style="width:30px">ID</th>
                            <th data-tipo="string" data-campo="ProductName"
                                data-alineacion="izquierda">Nombre</th>

                            <th data-tipo="decimal" data-campo="UnitPrice"
                                data-formato="#,###.00"
                                data-alineacion="izquierda">Precio</th>

                            <th data-tipo="bool" data-campo="Discontinued"
                                data-alineacion="izquierda">Descontinuado</th>

                            <th data-boton="ver" data-alineacion="centro"></th>
                            <th data-boton="editar" data-alineacion="centro"></th>
                            <th data-boton="borrar" data-alineacion="centro"></th>

                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <nav class="text-center">
            <ul class="pagination pagination-sm" data-tabla="dttabla" data-cantidad="10" data-grupo="8"></ul>
        </nav>
       

    </div>
</div>




@section Scripts {
    <script type="text/javascript" src="@Url.Content("/Scripts/tabla.js")"></script>

    <script type="text/javascript">


        $(document).ready(function () {
            $("#dttabla").tabla('@Url.Action("ObtenerProductos", "Products")', null);
        });

        //ver
        $(document).on('click', 'i[title=Ver]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/details/' + codigo;
        });

        $(document).on('click', 'i[title=Editar]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/edit/' + codigo;
        });

        //borrar
        $(document).on('click', 'i[title=Eliminar]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/delete/' + codigo;
        });

    </script>
}

3.) Vamos hacer otro ejemplo para manejar tipos de datos fecha, vamos a crear un metodo que regrese json.

        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult ObtenerOrdenes()
        {

            var query = from  o in db.Orders
                        select new
                        {
                            id=o.CustomerID,
                            Empleado=o.Employees.FirstName + " " + o.Employees.LastName,
                            Cliente=o.Customers.CompanyName,
                            fecha=o.OrderDate,
                            fecha_envio=o.ShippedDate
                        };

            return Json(query.ToList(), JsonRequestBehavior.AllowGet);
        }

4.) Ahora en otra vista.

<h2>orden</h2>

@Html.AntiForgeryToken()

<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-8 col-md-9">
                        <strong>Listado De Ordenes</strong>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <div data-tabla="dttabla">
                            <input type="text" class="form-control search-query input-sm" placeholder="Buscar" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed" data-orden="true" data-filtro="true" data-fuente="dtLlenar"
                       id="dttabla" data-seleccion="true">
                    <thead>
                        <tr>
                    
                            <th data-tipo="string" data-campo="id"
                                data-alineacion="izquierda" style="width:30px">ID</th>

                            <th data-tipo="string" data-campo="Empleado"
                                data-alineacion="izquierda">Empleado</th>

                            <th data-tipo="string" data-campo="Cliente"
                                data-alineacion="izquierda">Cliente</th>

                            <th data-tipo="datetime" data-campo="fecha" data-formato="dd/MM/yyyy" 
                                data-alineacion="centro">Fecha</th>



                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <nav class="text-center">
            <ul class="pagination pagination-sm" data-tabla="dttabla" data-cantidad="10" data-grupo="8"></ul>
        </nav>


    </div>
</div>




@section Scripts {
    <script type="text/javascript" src="@Url.Content("/Scripts/tabla.js")"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#dttabla").tabla('@Url.Action("ObtenerOrdenes", "Products")', null);
        });      

    </script>
}

Northwind sin duda es la base mas utilizada para ejemplos, ya que tiene una buena estructura y datos aceptables para ejemplo sencillos.

Descarga el script de aqui.

Migrar tu proyecto de web form a MCV es de vital importancia para que tu proyecto no se quede obsoleto, el problema es que los proyecto son muy grandes por lo que debes de dedicar muchas horas de migración, algo que no siempre es posible,  pues lo que puedes hacer es dejar ambos productos en un proyecto mvc con la idea de ir migrando poco a poco los web form, a continuación un ejemplo.

Web Forms - Website

Asumiendo que tienes un website con un aspx como el siguiente



Aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
        <h1>Ejemplo Migracion </h1> 
        <asp:Label ID="Label1" runat="server" Text="Ingrese un Numero:"></asp:Label> 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        <asp:Button runat="server" Text="Button" OnClick="Unnamed1_Click" /> 
        <br /> 
        <div id="resultados" runat="server"> 
        </div> 


    </form> 
</body> 
</html> 

Aspx.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

public partial class _Default : System.Web.UI.Page
{ 
    protected void Page_Load(object sender, EventArgs e)
    { 

    } 
    protected void Unnamed1_Click(object sender, EventArgs e)
    { 

        CalcClass cc = new CalcClass(); 
        decimal valor = Convert.ToDecimal(TextBox1.Text); 
        resultados.InnerHtml = cc.Calcular(valor).ToString(); 
    } 
}

Clase - CalcClass.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

/// <summary> 
/// Summary description for CalcClass 
/// </summary> 
public class CalcClass 
{ 
    public CalcClass() 
    { 

        // 
        // TODO: Add constructor logic here 
        // 
    } 
    public decimal Calcular(decimal valor)
    { 
        return valor * 2; 
    } 
}

Model View Controller - MVC 

Bueno ahora vamos a crear nuestro proyecto de mvc, donde alojaremos ambos proyectos.

1.) File --> New project



2.) Ahora seleccionamos el new ASP.NET Project, seleccionamos "Web Form", "MVC"



3.) Ahora vamos a traer  la clase,  para esto debemos de crear una carpeta llamada "Old_App_Code"

3.1) Clic derecho sobre el proyecto --> add --> New Folder


3.2) El nombre del folder debe ser "Old_App_Code"

3.3) Sobre el folder "Old_App_Code", clic derecho add--> Existen Item...



3.4) Buscamos la carpeta donde se aloja la clase "CalcClass.cs"



4.) Ahora abrimos la clase "CalcClass.cs" y le agregamos el namespace del nuestro proyecto, que en este caso es "ejemplo"

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

/// <summary> 
/// Summary description for CalcClass 
/// </summary> 
///  
namespace ejemplo 
{ 
    public class CalcClass 
    { 
        public CalcClass() 
        { 

            // 
            // TODO: Add constructor logic here 
            // 
        } 
        public decimal Calcular(decimal valor)
        { 
            return valor * 2;
        } 
    } 
}

5.)  Ahora vamos a agregar el web form,  clic derecho sobre el proyecto,  add--> Existen Item...






Ya tendremos el webform en el proyecto, sin embargo, aun no funciona tenemos que generar el "designer"


6.) Abre el archivo "Default.aspx", ahora clic en "Project" --> "Convert to Web Application"





6.1)  Se les mostrara, una advertencia, a lo cual diremos "Yes"



Esto cambiara varias cosas en el aspx, pueden ver en las siguientes lineas. La primera es el "web site" y la segunda el proyecto MVC.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" Codebehind="Default.aspx.cs" %>

Casi terminamos, aun no funciona correctamente ya que clase aun mostrara error.



8.) Por ultimo, debemos agregar un "using" en este caso "using ejemplo;"

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using ejemplo; 

public partial class _Default : System.Web.UI.Page
{ 
    protected void Page_Load(object sender, EventArgs e)
    { 

    } 
    protected void Unnamed1_Click(object sender, EventArgs e)
    { 

        CalcClass cc = new CalcClass(); 
        decimal valor = Convert.ToDecimal(TextBox1.Text); 
        resultados.InnerHtml = cc.Calcular(valor).ToString(); 
    } 
}

9.) Ahora tendremos ambos proyectos funcionando y podrás migrar poco a poco.