TorinoTechnologiesGroup             Javascript to IQueryablehttp://www.linqitalia.com/ricerca/super.aspx?action=author&key...
TorinoTechnologiesGroup              JavaScript e’ bello/brutto ???                     ( e’ come il vino: bere con modera...
TorinoTechnologiesGroup  Lintroduzione di MVC ha cambiato lapproccio che abbiamo nello sviluppare le  nostre applicazioni;...
TorinoTechnologiesGroup  Una delle problematiche piu comuni che si deve affrontare e visualizzare una view  MVC al cui int...
TorinoTechnologiesGroup   Iqueryable e’ potente, purtroppo accetta come parametro solo delle “lambda   expression” che per...
TorinoTechnologiesGroup      Dynamic Expressions and Queries in LINQ            var query = db.Customers.            Where...
TorinoTechnologiesGroup                         Requisiti del progetto1) Poter effettuare delle query in cui linq e’ abili...
TorinoTechnologiesGroup   (*) L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso   impostare un...
TorinoTechnologiesGroup                            DemoStefano Marchisio          http://Javascriptiqueryable.codeplex.com
TorinoTechnologiesGroup   Contratti request (linq abilitato/linq non abilitato)   var reqmessage = {    "groupresult": val...
TorinoTechnologiesGroup Contratti response (comuni linq abilitato/linq non abilitato)                                 var ...
TorinoTechnologiesGroup    Riepilogando, a fronte dei 2 contratti utilizzati per le richieste (e di cio che ci puo    rest...
TorinoTechnologiesGroup                           Where clause/1   var index = 0; var where = "";   var param = new Array(...
TorinoTechnologiesGroup                          Where clause/2      context.beginWhere("and");      if (text1!= "") {    ...
TorinoTechnologiesGroup     3) context.linqEnabled = false;     context.from("/Grid3/GetDataJson"). where(swhere). orderBy...
TorinoTechnologiesGroup   Tra i requisiti iniziali abbiamo detto che si possono ottenere sia dati in formato   “json” che ...
TorinoTechnologiesGroup   (*) L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso   impostare un...
TorinoTechnologiesGroup   Esistono 2 tipi di richieste che possono arrivare sul server (linq abilitato/linq non   abilitat...
TorinoTechnologiesGroup Visto che gli oggetti "RequestLinq" e " RequestRest" devono essere instanziati e popolati con cio ...
TorinoTechnologiesGroup   Il metodo     "JQuery(IRequestQuery)” e’ un extension method dell’ interfaccia   IQueryable ed a...
TorinoTechnologiesGroup   1) Link abilitato lato client e solo template lato client   public ActionResult GetDataJson(Requ...
TorinoTechnologiesGroup   Nel caso venga applicato un template lato server (una partialview) devo far   ritornare solo il ...
TorinoTechnologiesGroup   L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso   impostare un map...
TorinoTechnologiesGroup   3) Link non abilitato lato client e template lato client o lato server   public ActionResult Get...
TorinoTechnologiesGroup                            DemoStefano Marchisio          http://Javascriptiqueryable.codeplex.com
Upcoming SlideShare
Loading in …5
×

How create a single page apps using html5 and javascript

2,227 views

Published on

Create a html5/javascript apps with mvc/ajax using knockout.js/mvvm. Javascript to IQueryable is a framework that allows you to write a simple query in javascript client side and then execute it server side with EntityFramework or a linq provider that implement IQueryable. On the server is used "Dynamic Expressions and Queries in LINQ by Microsoft" to compose dynamically your query. In this way you can create a grid with filter, paging and sort functions. There is also support for: mvc3 unobtrusive jquery validation and jquery mobile/phonegap. - http://Javascriptiqueryable.codeplex.com - http://www.youtube.com/watch?v=qjwyKwsXHKs - http://www.linqitalia.com/articoli/entity-framework/sfruttare-javascript-eseguire-query-linq-server-tramite-dynamic-iqueryable.aspx

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,227
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How create a single page apps using html5 and javascript

  1. 1. TorinoTechnologiesGroup Javascript to IQueryablehttp://www.linqitalia.com/ricerca/super.aspx?action=author&key=Stefano+Marchisio http://Javascriptiqueryable.codeplex.com www.TorinoTechnologiesGroup.itStefano Marchisio http://Javascriptiqueryable.codeplex.com
  2. 2. TorinoTechnologiesGroup JavaScript e’ bello/brutto ??? ( e’ come il vino: bere con moderazione !!!) Esistono situazioni in cui siamo “costretti” ad utilizzare in linguaggio Javascript in alcuni parti delle nostre applicazioni. 1) PhoneGap applications 2) MVC / Web applications Che ci piaccia o no ... In alcuni casi dobbiamo usarlo !!! Windows 8 ? – Se uno conosce XAML e C# meglio evitarlo Pertanto dobbiamo prendere confidenza con questo “signore”Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  3. 3. TorinoTechnologiesGroup Lintroduzione di MVC ha cambiato lapproccio che abbiamo nello sviluppare le nostre applicazioni; infatti se con le "webform" si fa largo uso dei "postback" (con i vantaggi e gli svantaggi che essi comportano), con MVC non abbiamo piu i "postback" per cui dobbiamo sviluppare le nostre applicazioni dando un maggior peso alla porzione di codice javascript presente nelle nostre pagine.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  4. 4. TorinoTechnologiesGroup Una delle problematiche piu comuni che si deve affrontare e visualizzare una view MVC al cui inteno ce del codice javascript che legge dei dati dal server in formato "json" per poi paginarli (eventualmente applicando dei filtri su tali dati). Infatti e necessario: 1) Creare una chiamata rest in modalita ajax. 2) Sul server ci deve essere un “action method“ che elabori la richiesta. 3) Il browser deve elaborare la risposta. Cio’ comporta la scrittura di una certa dose di codice (da entrambe le parti) spesso ripetitiva. Come fare a non dover reinventare la ruota tutte le volte ? Magari avendo la possibilita’ di poter effettuare delle query dinamiche ?Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  5. 5. TorinoTechnologiesGroup Iqueryable e’ potente, purtroppo accetta come parametro solo delle “lambda expression” che per loro natura sono tipizzate per cui risulta difficoltoso poter lavorare in modo dinamico (senza dover ricorrere ad ODATA). Come risolvere il problema ? Siamo disposti a portare Iqueryable nel Controller ? Se si ... Anche se non e inclusa nel framework esiste una libreria scritta da Microsoft "Dynamic Expressions and Queries in LINQ" con la quale e possibile comporre delle query in modo dinamico; infatti invece di usare le "lambda expression" allinterno delle varie clausole (where, orderby e select) vengono usate della stringhe.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  6. 6. TorinoTechnologiesGroup Dynamic Expressions and Queries in LINQ var query = db.Customers. Where("City = @0 and Orders.Count >= @1", "London", 10). OrderBy("CompanyName"). Select("new(CompanyName as Name, Phone)"); Saranno poi i metodi di "Dynamic Expressions and Queries in LINQ" che parsando le stringhe inserite creano l "expression tree" corrispondente. Dynamic Expressions.htmlStefano Marchisio http://Javascriptiqueryable.codeplex.com
  7. 7. TorinoTechnologiesGroup Requisiti del progetto1) Poter effettuare delle query in cui linq e’ abilitato lato client (reqmessage).2) Poter effettuare delle query in cui linq non e’ abilitato lato client (querystring).3) Avere delle funzionalita per la paginazione.4) Ottenere un risultato in formato dati json da manipolare poi sul client.5) Ottenere un risultato in formato dati html da manipolare poi sul client.6) Per i 2 punti precedenti avere la possibilita di impostare dei template (client o server)7) Il tutto utilizzando una sintassi "metodo punto metodo" tipo jquery.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  8. 8. TorinoTechnologiesGroup (*) L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso impostare un mapping tra i parametri dellurl ed i campi dell entity al fine di poter comporre localmente la queryStefano Marchisio http://Javascriptiqueryable.codeplex.com
  9. 9. TorinoTechnologiesGroup DemoStefano Marchisio http://Javascriptiqueryable.codeplex.com
  10. 10. TorinoTechnologiesGroup Contratti request (linq abilitato/linq non abilitato) var reqmessage = { "groupresult": value, "enablepaging": value, "where":{"value": "", "param": "", ptype: "" }, "order":{"value": "", "param": ""}, "select":{"value":"", "param": ""}, "skip": n, "take": n } a url?currpage=n&currsize=n&param1=valore2&param2=valore2"&orderby=value N.B. Nel caso linq non sia abilitato verra’ creato un url contente solo dei parametri, le varie clausole di select, where e orderby verranno create poi sul server.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  11. 11. TorinoTechnologiesGroup Contratti response (comuni linq abilitato/linq non abilitato) var resmessage = { "total": n, "records": n, "rows":[{},{}, ... ,{}] }N.B. Il server puo restituire sia dati grezzi che testo in formato html.1) Se sono restituiti dati grezzi la proprieta rows conterra’ un array di dati in formato “json“2) Se sono restituiti dati testo in formato html la proprieta rows (non sara piu un array)conterra tali dati.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  12. 12. TorinoTechnologiesGroup Riepilogando, a fronte dei 2 contratti utilizzati per le richieste (e di cio che ci puo restiture il server json/html) esistono sostanzialmente 4 tipi di richieste e 2 tipi di risposte. 1) context.linqEnabled = true; context.from("/Grid1/GetDataJson").where(" ... slide/succ ...").orderBy( "CustomerID").skip(3).take(6).applyTempClient(); 2) context.linqEnabled = true; context.from("/Grid1/GetDataJson").where(" ... slide/succ ...").orderBy( "CustomerID").pagingWithSize(10).applyTempClient(); N.B. In entrambi i casi linq e abilitato lato client (context.linqEnabled = true;) GetDataJson?message={"groupresult":false,"enablepaging":true,"select":{"value":"","par am":""},"order":{"value":"CustomerID","param":null},"where":{"value":"Country=@0"," param":["spain"],"ptype":["str"]},"skip":0,"take":10}Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  13. 13. TorinoTechnologiesGroup Where clause/1 var index = 0; var where = ""; var param = new Array(); if (text1!= "") { if (where != "") where = where + " and City = @" + index; else where = where + " City = @" + index ; param[index] = text1; index++; } if (text2 != "") { if (where != "") where = where + " and Country = @" + index; else where = where + " Country = @" + index; param[index] = text2; index++; } context.from("/Grid1/GetDataJson").where(where,param).orderBy("CustomerID"). pagingWithSize(10).applyTempClient();Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  14. 14. TorinoTechnologiesGroup Where clause/2 context.beginWhere("and"); if (text1!= "") { context.addWhereClauseStr( "City" , "=", text1); //context.addWhereClause( "City" , "=", text1); } if (text2 != "") { context.addWhereClauseStr("Country", "=", text2); //context.addWhereClause("Country", "=", text2); } var r = context.endWhere(); context.from("/Grid1/GetDataJson").where(r.value,r.param,r.ptype).orderBy( "CustomerID").pagingWithSize(10).applyTempClient();Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  15. 15. TorinoTechnologiesGroup 3) context.linqEnabled = false; context.from("/Grid3/GetDataJson"). where(swhere). orderBy( “CustomerID") .skip(3).take(6).applyTempClient(); 4) context.linqEnabled = false; context.from("/Grid3/GetDataJson"). where(swhere).OrderBy( “CustomerID") PagingWithSize(10).applyTempClient(); N.B. In entrambi i casi linq non e abilitato lato client (context.linqEnabled = false;) “/GetDataJson?pagecurr=n&pagesize=n&p1=valore2&p2=valore2&orderby=value “ La substringa “p1=valore2&p2=valore2” e’ passata tramite il metodo “where(swhere)”Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  16. 16. TorinoTechnologiesGroup Tra i requisiti iniziali abbiamo detto che si possono ottenere sia dati in formato “json” che dati in formato testo “html”. L’ una o l’ altra opzione e’ gestita tramite il metodo con cui si copleta la query lato client. applyTempClient (“x")/applyTempServer(“x")Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  17. 17. TorinoTechnologiesGroup (*) L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso impostare un mapping tra i parametri dellurl ed i campi dell entity al fine di poter comporre localmente la queryStefano Marchisio http://Javascriptiqueryable.codeplex.com
  18. 18. TorinoTechnologiesGroup Esistono 2 tipi di richieste che possono arrivare sul server (linq abilitato/linq non abilitato) per cui parametro presente sullaction method del controller e rappresentato da 2 oggetti distinti “RequestLinq” e “RequestRest”. Entrambe le richieste devono invocare i metodi che effettuano la query, i quali necessitato che venga passato come parametro loggetto presente sullaction method. Onde evitare una duplicazione del codice sottostante ho creato un interfaccia "IRequestQuery" che viene usata per invocare l "extension method" di IQueryable "JQuery(IRequestQuery)", che contiene la logica per lavorare con gli "expression tree" al fine di poter comporre la nostra query. Inoltre tale interfaccia viene anche implementata da "RequestLinq" e " RequestRest".Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  19. 19. TorinoTechnologiesGroup Visto che gli oggetti "RequestLinq" e " RequestRest" devono essere instanziati e popolati con cio che e presente sullurl, e non andando bene il "ModelBinder" di default, ho creato 2 ModelBinder custom: "ModelBinderLinqRequest" e "ModelBinderRestRequest" (che mappano tali oggetti). In questo modo a fronte dei 2 tipi di richieste che possono giungere sul server, sara il ModelBinder custom associato al tipo di richiesta che mi crea e configura il parametro dellaction method. Lavorando poi con uninterfaccia comune "IRequestQuery" faccio in modo che cio che ce sotto non sia influenzato dai 2 contesti diversi di esecuzione.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  20. 20. TorinoTechnologiesGroup Il metodo "JQuery(IRequestQuery)” e’ un extension method dell’ interfaccia IQueryable ed accetta come parametro oggetti di tipo (RequestLinq/RequestRest). Ritorna un oggetto managed con il seguente formato (la proprieta’ data contiene un array di dati grezzi): result = new { total = total, records = count, rows = data, };Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  21. 21. TorinoTechnologiesGroup 1) Link abilitato lato client e solo template lato client public ActionResult GetDataJson(RequestLinq linq) { var query = Repository.GetRepository<Customer>().Query(); return Json(query.JQuery(linq), JsonRequestBehavior.AllowGet); } 2) Link abilitato lato client e template lato client o lato server public ActionResult GetDataJson(RequestLinq linq) { var query = Repository.GetRepository<Customer>().Query(); object data = this.TryApplyView(linq, query.JQuery(linq)); return Json(data, JsonRequestBehavior.AllowGet); }Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  22. 22. TorinoTechnologiesGroup Nel caso venga applicato un template lato server (una partialview) devo far ritornare solo il relativo contenuto html. Per far questo ci viene in aiuto l "extension method" della classe "Controller“. this.TryApplyView(par, query.JQuery(par)) Ritorna un oggetto managed con il seguente formato (la proprieta’ data contiene un array di dati grezzi oppure testo html): result = new { total = total, records = count, rows = data, };Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  23. 23. TorinoTechnologiesGroup L’ oggetto RequestRest ha una serie di proprieta/metodi tramite i quali posso impostare un mapping tra i parametri dellurl ed i campi dell entity al fine di poter comporre localmente la query e fare quello che viene fatto nel browser per le query in cui ce linq abilitato lato client. Cio’ mi permette di usufruire dell’interfaccia comune IRequestQuery.Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  24. 24. TorinoTechnologiesGroup 3) Link non abilitato lato client e template lato client o lato server public ActionResult GetDataJson(RequestRest rest) { rest.Operator = WhereOperator.And; rest.AddWhereMapping( "City“ , "=", "campo1"); rest.AddWhereMapping("Country", "=", "campo2"); rest.DefaultOrderBy("CustomerID"); var query = Repository.GetRepository<Customer>().Query(); object result = this.TryApplyView(rest, query.JQuery(rest)); return Json(result, JsonRequestBehavior.AllowGet); }Stefano Marchisio http://Javascriptiqueryable.codeplex.com
  25. 25. TorinoTechnologiesGroup DemoStefano Marchisio http://Javascriptiqueryable.codeplex.com

×