ASP.NET MVC og jQuery Grid

Jeg har testet ASP.NET MVC i Visual Web Developer Express og jQuery Grid. Det er kraftig teknologi som gir gode muligheter for å jobbe strukturert med utvikling i ASP.NET MVC (et rammeverk og paradigme som oppfordrer til strukturert og modularisert webutvikling, optimert mot TDD, test-drevet utvikling), samtidig som man vha. jQuery og jQuery grid kan vise data i en grid.

Jeg vil begynne med å vise et skjermbilde av hva som testløsningen min inneholder.



- ASP.NET MVC er en ny teknologi som ASP.NET kan benytte for å tilby en mer strukturert måte å jobbe på. Man går vekk fra code-behind og rammeverket er meget
datasentrisk. Man har en oppkobling, gjerne til Sql Server (.mdf filer og tilsvarende), altså MS-SQL, hvor man definerer raskt en datamodell. Man bruker så Linq-to-sql for å generere klasser for datalag for å jobbe mot dataene. Videre har man både Model og Model-View klasser etter behov, samt .aspx filer er "View". Partielle view er av typen MVC Web User control (.ascx filer).

For de som har jobbet lenge i ASP.NET vet man farene ved store prosjekter. Det blir fort spaghettikode og monolittisk kode. MVC tvinger en til å jobbe strukturert og modulrisert, samt unngår spaghetti på en mye mer streng måte enn standard ASP.NET.

En stor ulempe med MVC i ASP.NET er mangelen på en skikkelig grid-kontroll m.m., da vanlige ASP.NET kontroller ikke nødvendigvis vil virke i MVC..

Jeg har derfor testet ut jQuery Grid som er en meget bra måte å erstatte ASP.NET GridView. Best av alt, denne javascript baserte kontrollen kan benyttes i MVC-baserte løsninger!

Bortsett fra å tilby interesserte en nedlasting kan jeg kort si hva jQuery Grid er for noe. Det er en javascript plugin til jQuery og en klientbasert kontroll som er lik ASP.NET GridView, men har innebygd støtte for Ajax m.m.

Det tar en tid til å venne seg til å implementer en jQuery Grid. Man har ikke drag and drop på denne komponenten. Men det går temmelig raskt å få opp en løsning. I mitt demoprosjekt har jeg benyttet meg at Dynamisk Linq, som Scott Guthrie (en av de prinsipielle arkitektene bak ASP.NET) har laget. Dere finner implementasjonen i klassen Dynamic.cs. Jeg har i mitt testprosjekt laget en servermetode som spør en tabell i en .mdf fil om innholdet i tabellen Countries, som har alle hovedsteder og land i verden. Videre har jeg laget en Country dataklasse automagisk med Linq-To-Sql. I min HomeController (Controller er C-en i MVC) har jeg en Index funksjon som henter opp tabelldataene vha. Ajax og Json. Testfunksjonen min håndterer både paginering og sortering av databasen og json-dataene overføres tilbake til klienten, som viser dem i jQuery Griden. Denne kontrollen abonnerer på data fra server-side funksjonen som returnerer et ActionResult av type JsonResult.

MVC har en læringskurve og det er noe vanskelig å forstå hva alt dette er vits i å sette seg inn i. Men det vil spare en utvikler i ASP.NETfor mye arbeid, da det støtter TDD og unit testing på en mye bedre måte enn ASP.NET. Endelig går det an å utvikle nettsider profesjonelt og dele opp oppgaver til testere og verifisere at det man lager faktisk virker. Dette har vært enklere i applikasjonsutvikling enn i webutvikling, men med ASP.NET MVC så er det like enkelt å lage unit tester som for f.eks. WPF og WCF..

Ulempen med MVC er som sagt at vanlige ASP.NET serverkontroller ikke er vanligvis støttet. Men jQuery og jQuery Grid er sentral i MVC. Man har kontroller som er mer klient-orienterte enn de klassiske ASP.NET server-kontrollene. Med Json som kommunikasjon er det minimalt med data som går mellom klienten og serveren. Serveren leverer selvsagt data fortsatt ut til klient, men klienten "drar" dataene fra serveren oftere. Dermed blir det oftere requests, men disse er mindre i størrelse..

Dette gjør det mulig å utvikle webapplikasjoner som er repsonsive og tillater et vell av interaksjon. MVC i ASP.NET er en alternativ modell til Silverlight og den lekre jQuery Grid viser at dette er absolutt tilfelle.

I mitt demoprosjekt så er paginering og sortering støttet. Jeg har ikke testet enda hvordan man får til redigering i jQuery Grid eller har templates for celler, column reordering og annen avansert funksjonalitet, men dette er altså støttet i jQuery Grid. Dere finner jQuery Grid lett med et kjapt søkt med Google. Jeg anbefaler å sjekke ut vedlagte .zip fil for å se hele koden..

Til slutt før lenken til nedlastingen, så legger jeg ved koden for server-funksjonen i ASP.NET MVC som gir paginering og sortering. Den benytter som sagt Scott Guthrie sin Dynamic Linq klasse, som gir noen tilleggsfunksjoner som spytter inn SQL i linq-spørringer og gir det man trenger for akkurat dette..


public ActionResult DynamicGridData
(string sidx, string sord, int page, int rows)
{
var context = new GeografiTestDbDataContext();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = context.Countries.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

var countries = context.Countries.OrderBy(sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize);

var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from c in countries
select new
{
i = c.Id,
cell = new string[] {
c.Id.ToString(), c.Capital, c.Country1
}
}).ToArray()
};
return Json(jsonData);
}


Linq-spørringene over virker ikke uten at man har Dynamics.cs filen som Scott Guthrie har laget, 81 kB stor. Her er det masse extension methods som gjør det mulig å spørre databasen inne i Linq-spørringer.. Dynamic Linq er helt vilt bra for de som tenker på hvordan det faktisk virker..

Til slutt, slik ser .aspx filen ut hvor man lager et jQuery Grid objekt:



jQuery(document).ready(function() {

jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Uniktnummer', 'Hovedstad', 'Land'],
colModel: [
{ name: 'Id', index: 'Id', width: 120, align: 'left' },
{ name: 'Capital', index: 'Capital', width: 120, align: 'left' },
{ name: 'Country1', index: 'Country1', width: 220, align: 'left' }
],
pager: jQuery('#gridpager'),
pgtext: "Side {0} av {1}",
pginput: true,
recordpos: 'left',
rowNum: 20,
width: 900,
multiSelect:true,
hidegrid: false,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
imgpath: '/scripts/themes/redmond/images',
caption: 'Hovedsteder i ulike land. Demotest.'
});
});



Man ser i json-egenskapen url hvordan jQuery Griden kobles mot server metoden
Index i HomeController.cs, som er tilgjengelig i route /Home/Index. MVC er litt
spesielt for ASP.NET utviklere, men etter å ha brukt det kun noen få dager ser
jeg vesentlige fordeler med det. En ulempe er at det kan bli litt vanskeligere på
klienten siden, men implementasjonen på server siden blir mye mer strukturert. Utfordringene ligger i at ferdige komponenter som ASP.NET GridView ikke er tilgjengelig. Skal man bruke MVC må man lære seg javascript godt og benytte jQuery
og nye komponenter. Dette er noe av den mest spennende teknologien, sammen med Linq, som Microsoft har laget på år og dag.


Visual Studio 2008 løsning:
Last ned prosjekt [Zip-fil, 711 kB] her.

Framgangsmåte for å kjøre mitt demoprosjekt:
1. Lagre zip fil på C:\minmappe
2. Pakk ut zip fil fra pkt 1.
3. Dobbeltklikk på .sln fil og se at Visual Studio laster..
4. Når pkt 3. er ferdig, trykk på knappen F5 på tastaturet ditt.
5. Be amazed.

:o)