1 de noviembre de 2012

MVC. Como recuperar datos del servidor desde el cliente (JavaScript JSON)

Imaginemos que desde el cliente (JavaScript) quieres recuperar una lista con la cantidad de proyectos por cada una de las áreas:

image

Para lograrlo necesitaremos:

1. En el controlador (Servidor) recuperar la lista y devolver el JSON correspondiente:

public partial class HomeController : Controller

{

       public virtual ActionResult GetProjectByAreaCount()

       {

             var result = new List<object>();

 

             Random rnd = new Random();

             int length = rnd.Next(10, 17);

             for (int i = 1; i < length; i++)

             {

                    result.Add(new {

                           Area = string.Format("Area {0}", i),

                           Cant = rnd.Next(2, 200)

                    });

             }

 

             return Json(result, JsonRequestBehavior.AllowGet);

       }

 

2. En el cliente realizar la llamada al servidor y procesar la respuesta.

<script type="text/javascript">

       $(document).ready(function () {

 

             $.getJSON('@Url.Action("GetProjectByAreaCount", "Home")', fnShowData);

 

             function fnShowData(response){

                    if (response != null) {

                           for (var i = 0; i < response.length; i++) {

                                  $("#div1").append("<li>" + response[i].Cant + " " + response[i].Area + "</li>")

                           }

                    }

             }

 

       })

</script>

1 de octubre de 2012

Pasando de ASP.NET WebForm a ASP.NET MVC

Si eres un desarrollador acostumbrado a ASP.NET WebForm y estas comenzando con el patrón MVC (ASP.NET MVC) deberías leer este articulo.

MVC en Imagen

image

Equivalencias entre WebForm y MVC

WebForm

MVC

MasterPage

_Layout.cshtml (Se encuentra en Views\Shared)

 

@{

       Layout = "~/Views/Shared/_Layout.cshtml";

       ViewBag.Title = "Dashboard";

}

User Controls
.ascx

Vistas Parciales (forzando la ejecución del controlador)

Existen diferencias importantes:

  • Cuando incluimos vistas compartidas en otra vista, esta son interpretadas por razor sin ejecutarse ningún controlador. Simplemente se renderiza su contenido – no como en los controles ascx donde se ejecuta todo el ciclo de vida del control completo y sus correspondientes eventos

@Html.Partial(“_PartialFooter”);

@Html.Partial(MVC.Shared.Views._PartialFooter);

  • Es posible utilizar una vistas compartida de un modo muy similar al de un control ascx de ASP.NET WebForms, aunque para este debemos forzar la ejecución del controlador a través de los métodos Action y RenderAction del Helper Html:

[ChildActionOnly]

public virtual ActionResult MenuBar(string selectedId)

{

       MenuModel menu = new MenuModel(selectedId);

       return PartialView(menu);

}

@Html.Action("MenuBar")

@Html.Action(MVC.Home.MenuBar())

             *Ejecuta el método "MenuBar" del controlador correspondiente

 


 


Aspectos que no existen en MVC


En ASP.NET MVC desaparecen algunos conceptos que eran muy utilizados en WebForm y que nos obligaran a cambiar el chip:



  • No hay ViewState

  • No hay Eventos

  • No hay PostBack

 


Paquetes utilizados:



 


Nota: Hasta aquí algunos aspectos a tener en cuenta. A medida que encuentre algunas otras diferencias, iré actualizando esta entrada.

2 de febrero de 2012

jQueryUI. Cargar pagina en Dialogo Modal con jQuery UI

Este pequeño post es para mostrar una solución simple de como mostrar el contenido de una pagina (o parte de ella) en un dialogo modal.

Imaginemos que tenemos una pagina Page1 y otra Page2, y que estando en Page1 queremos ver el contenido de Page2, pero sin salir de Page1. Una posible solución es abrir una nueva ventana y asunto resuelto, pero nuestro objetivo es abrir dicho contenido como un dialogo modal propio de Page1, además, puede que no necesites mostrar la Page2 completa, sino solo una parte de ella.

En nuestro ejemplo usaremos la misma pagina (por simplicidad), o sea, desde Page1, abriremos un dialogo con parte del contenido de Page1, veamos una imagen para hacernos una idea mejor:

image

Como vemos en la imagen, desde nuestro primer formulario (El que aparece en el fondo), hemos abierto un dialogo con el contenido de una URL (en nuestro caso coincide que es la misma pagina) pero solo hemos cargado una parte de la pagina, hemos dejado fuera el ToolBar (Barra de botones).

Para lograrlo usaremos las librerías JavaScript:

  • jQuery
  • jQuery UI

Código de Ejemplo jQuery UI Dialog – Cargar Pagina:

Función JavaScript que carga la página en el dialogo:

function fnLoadPageInDialog(url, contID, titleNewDialog, widthNewDialog, heightNewDialog) {  

       var urlWithCont = url;

       if (contID != '')

             urlWithCont = urlWithCont + ' #' + contID;

                   

       var $dialog = $('<div></div>')

             .load(urlWithCont)

             .dialog({

                    autoOpen: false,

                    title: titleNewDialog,

                    width: widthNewDialog,

                    height: heightNewDialog

             });

 

       $dialog.dialog('open');

}

Ejemplo de llamada a la función JavaScript:

fnLoadPageInDialog('FichaDoc.aspx?op=view&Id=5665', 'divDocInfo', 'Documento Información', 820, 350);

 

 Y así de simple logramos el objetivo.