9 programación web con .net y c#
TRANSCRIPT
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