ASP.NET MVC + HTML5: odc.1

Trochę wybranych informacji z tematyki tandemu ASP.NET MVC i HTML5.

ASP.NET MVC

• do udostępniania danych zamiast WCF, jeszcze łatwiej używać danych JSON z poziomu klienta HTML/JS
• własny dependency resolver (np. oparty o Unity.MVC3 zapewniający odpowiednie disposowanie obiektów związanych z aplikacją web)

//kontroler do udostępniania danych w JSON, nie dla widoku HTML/CSS

public class DataServiceController: Controller {

IAppointmentRepository  _appointmentRepository;

//zasilanie z IoC

public DataServiceController(IAppointmentRepository appointmentRepository) {

         _appointmentRepository = appointmentRepository;

}

public ActionResult GetAppointment(int id)  {  //JsonResult dziedziczy po ActionResult

         return Json(_AppointmentRepository.GetAppointment(id), JsonRequestBehavior.AllowGet);

}

}

http://html5boilerplate.com/ – szablony użycia

• najlepsze praktyki
• cross-browser
• HTML5
• optymalizacje dla mobilnych przeglądarek
• wsparcie także dla starszych IE
• rozwiązania dla wydruku
• hostowane w sieci skrypty

BoilerPlate na starcie

• HTML5 doctype
• kodowanie utf-8
• tryb renderowania IE na edge (w ostatniej wersji)
• viewport na device-width
• jQuery pobierane z sieci z lokalnym fallbackiem
• ładowany Modernizr

Modyfikacja _Layout.cshtml

• Wspólny “master” dla wszystkich widoków/stron HTML w ASP.NET MVC
• Możemy umieścić w nim odpowiednie elementy z index.html z BoilerPlate
• obsługa różnych wersji IE
• utf-8
• tryb renderowania IE na edge
• referencje do skryptów (jQuery z lokalnym fallbackiem, Modernizr, …)
• prośba o zainstalowanie przeglądarki zgodnej z HTML5 (IE od wersji 9, Chrome, …) //aplikacja dedykowana dla nowoczesnych przeglądarek
• …

///<reference path=”…” />  - intellisense w VS działa także dla naszych skryptów

Biblioteki dla canvas:

• EaselJS
• Fabric
• Flot
• Gury
• JCanvaScript

Łatwe rysowanie wykresu za pomocą Flot:

var chartOptions = {

series: {

       lines:  { show: true, fill: true },

       points:  { show: true, radius: 5 }

},

grid: {  hoverable: true,  autoHighlight: true },

legend: {  position:  ‘se’ },  //south-east

yaxis:  { max:  maxY, min: minY },

xaxis:  { minTickSize:  [1, ‘hour’],  mode:  ‘time’,  timeformat:  ‘%h %P’,  twelveHourClock: true }

};

$.plot(canvasDiv, [

color: color,

shadowSize:  4,

label: ‘Rytm serca’,

data: heartData

}], chartOptions);

SVG

Biblioteka:  Raphael

Proste rysowanie interaktywnych diagramów kołowych:

raphael(‘Aaa’, x, y)

.pieChart(scene.width / 2,

                   scene.height / 4 + 10,

                    66, values, labels, “#fff”);

Tekst na ścieżce:

<svg>

<defs>

       <path id=”path1” d=”M75,20 a1,1 0 0,0 100,0” />

</defs>

<text x=”10” y=”100” style=”fill:green;”>

          <textPath xlink:href=”#path1”>Koko koko svg spoko</textPath>

</text>

</svg>

Video HTML5

http://www.mirovideoconverter.com/

http://videojs.com/