9 programación web con .net y c#

ARQUITECTURA CLIENTE

ASP.NET

Guido Ticona Hurtadoguidoti@gmail.com

Cliente

Controlador

Modelo Vista

.cs

SERVIDOR CLIENTE

Entity Framework

LINQ

Objetos

.cs .cshtml

ViewDataViewBagModel

POSTGET

HTML

JavascriptCSS

HTTPAJAX

TempData

AJAX Javascript, DOM, CSS y

XMLHttpRequest Exhibición e interacción dinámica

usando el Document Object Model Intercambio y manipulación de datos

Modelo clásico Web

Servidor

Bases de datos

NavegadorInterfaz de usuario

Servidor Web

SolicitudHTTP

DatosHTML + CSS

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

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

Modelo AJAX

Servidor

Bases de datos

NavegadorInterfaz de usuario

Servidor Web / XML

Javascript DatosHTML + CSS

Motor AJAX

SolicitudHTTP

DatosHTML/JSON/XML/Texto

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

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

Request.IsAjaxRequest

Framework AJAX AJAXHelper (jquery unobtrusive) Jquery

MootoolsPrototype & script.aculo.us

Dojo – Ext JSYUIZKGWT

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

AjaxOptions HttpMethod (GET,POST) InsertionMode

ReplaceInsertBeforeInsertAfter

UpdateTargetId LoadingElementId Confirm OnBegin, OnComplete, OnFailure,

OnSuccess

JSON

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" } ] }

JQueryUI JQueryUIHelper

Install-package jqueryuihelpers.mvc4Crear bundle jquery-ui.unobtrusive-

{version}.js @Html.JQueryUI()

JqueryUIHelper Widget

ButtonAutoCompleteDatePickerProgressBarSliderSpinnerTabs

JqueryUIHelper Menu Dialog Draggable Resizable

Autocomplete Si es ajax, necesita 2 campos label y

value de tipo JSON Direccionar con Url.Action() AutoFocus AppendTo MinLength OnSelect

DatePicker MinDate ShowButtonPanel ChangeYear ChangeMonth NumberOfMonths Inline

Menu Se usa MenuItem para crear items

new MenuItem(“Nombre”,Accion)

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>    }}

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