Este documento presenta una introducción a ASP.NET, incluyendo sus componentes principales como el controlador, modelo y vista. También describe técnicas de AJAX como jQuery y JSON para habilitar la interacción dinámica en la interfaz de usuario sin recargar la página. Además, explica cómo utilizar las herramientas de jQuery UI como autocompletado, calendario y diálogos en aplicaciones ASP.NET.

1. ASP.NET
Guido Ticona Hurtado
guidoti@gmail.com

2. Cliente
Controlador
Modelo Vista
.cs
SERVIDOR CLIENTE
Entity Framework
LINQ
Objetos
.cs .cshtml
ViewData
ViewBag
Model
POST
GET
HTML
Javascript
CSS
HTTP
AJAX
TempData

3. AJAX
 Javascript, DOM, CSS y
XMLHttpRequest
 Exhibición e interacción dinámica
usando el Document Object Model
 Intercambio y manipulación de datos

4. Modelo clásico Web
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web
Solicitud
HTTP
Datos
HTML + CSS

5. Modelo Request
GET /inicio.html HTTP/1.1
Accept: */*
Accept-Language:...
Accept-Encoding:...
If-Modified-Since:...
If-None-Match:...
User-Agent: Mozilla/4.0...
Host: www.elfec.com
Connection: Keep-Alive
[blank line]

6. Modelo Response
GET /inicio.html HTTP/1.1
Accept: */*
Accept-Language:...
Accept-Encoding:...
If-Modified-Since:...
If-None-Match:...
User-Agent: Mozilla/4.0...
Host: www.elfec.com
Connection: Keep-Alive
[blank line]

7. Modelo AJAX
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web / XML
Javascript Datos
HTML + CSS
Motor AJAX
Solicitud
HTTP
Datos
HTML/JSON/XML/Texto

8. Donde usar AJAX
 Comunicación rápida entre usuarios
 Interacción a través de formularios
 Filtrado, búsqueda
 Autocompletado de campos
 Etc

9. Ejemplo búsqueda
@using(Ajax.BeginForm(
new AjaxOptions{HttpMethod =“get”,
InsertionMode =
InsertionMode.Replace,
UpdateTargetId = “div”
}))
Request.IsAjaxRequest

10. Framework AJAX
 AJAXHelper (jquery unobtrusive)
 Jquery
 Mootools
 Prototype & script.aculo.us
 Dojo – Ext JS
 YUI
 ZK
 GWT

11. AjaxHelper
 Archivo jquery-unobtrusive-ajax.js
 Ajax.BeginForm
 Ajax.ActionLink
 AjaxOptions

12. AjaxOptions
 HttpMethod (GET,POST)
 InsertionMode
 Replace
 InsertBefore
 InsertAfter
 UpdateTargetId
 LoadingElementId
 Confirm
 OnBegin, OnComplete, OnFailure,
OnSuccess

13. JSON

14. Ejemplo JSON
{
“nombre": “Juan",
“apellido": “Perez",
“edad": 25,
“direccion": {
“calle": “Av Heroinas #343",
“ciudad": “Cbba",
“pais": “BO",
“casilla": 123
},
“telefonos": [
{
“tipo": “casa",
“numero": “4452458"
},
{
“tipo": “celular",
“numero": “70724854"
}
]
}

15. JQueryUI
 JQueryUIHelper
 Install-package jqueryuihelpers.mvc4
 Crear bundle jquery-ui.unobtrusive-
{version}.js
 @Html.JQueryUI()

16. JqueryUIHelper
 Widget
 Button
 AutoComplete
 DatePicker
 ProgressBar
 Slider
 Spinner
 Tabs

17. JqueryUIHelper
 Menu
 Dialog
 Draggable
 Resizable

18. Autocomplete
 Si es ajax, necesita 2 campos label y
value de tipo JSON
 Direccionar con Url.Action()
 AutoFocus
 AppendTo
 MinLength
 OnSelect

19. DatePicker
 MinDate
 ShowButtonPanel
 ChangeYear
 ChangeMonth
 NumberOfMonths
 Inline

20. Menu
 Se usa MenuItem para crear items
 new MenuItem(“Nombre”,Accion)

21. Tabs
 Se inicia con BeginTabs
 Se puede usar Tabs estaticos con
beginPanel
 Tabs Ajax con AjaxTab
@using (var t = Html.JQueryUI().BeginTabs())
{
t.Tab("Tab 1", "tab1");
t.AjaxTab("Ajax tab", Url.Action(“url"));
using (t.BeginPanel())
{
</p>
}
}

22. Diálogos
 Se inicia con Begin(new Dialog())
 AutoOpen
 Modal
 Button
 CloseOnEscape
 Draggable
 Position
 Resizable