Creați tabele personalizate cu WebGrid
Dacă creați tabele de date cu paginare și sortare de la zero atunci când utilizați ASP.NET MVC, pierdeți unul dintre cele mai ușor de utilizat ajutoare. WebGrid vă oferă suport încorporat pentru anteturi care pot fi făcute clic pentru sortare și paginare în subsol. Dar există o mulțime de dezinformări despre ceea ce puteți și ce nu puteți face cu WebGrid.
Acest articol acoperă crearea unui tabel complet formatat cu o vizualizare puternic tastată utilizând ajutorul WebGrid. Codul complet pentru acest proiect include vizualizări care arată WebGrid fără formatare, cu formatarea CSS de subsol singur, cu formatarea tabelelor și subiectul nostru principal - personalizarea subsolului cu paginare și alte informații.
Datele pentru acest proiect sunt o listă enumerabilă creată în controler; De obicei, aș folosi SQL Server și aș accesa datele cu Entity Framework. Am creat datele din controler pentru a le menține suficient de scurte pentru un articol. Veți utiliza un model de date în acest exemplu, așa cum ați utiliza cu Entity Framework, dar nu veți stoca sau accesa datele într-o bază de date.
Înțelegerea modelului
Asistentul WebGrid returnează un tabel HTML obișnuit. Puteți aplica stiluri CSS pentru a-l formata așa cum ați face cu orice alt tabel. Mai întâi, veți construi grila și veți vedea cum să formatați coloanele, rândurile și subsolul. Apoi, veți vedea cum să personalizați subsolul paginării cu informații suplimentare, printr-o tehnică frumoasă pe care am dezvoltat-o. Pentru acest exemplu, veți utiliza datele într-un model numit Tranzacție - este pur și simplu: tranzacție de clasă publică
public class Tranzacție
{public int TransactionID {get; a stabilit; }
public DateTime TranDate {get; a stabilit; }
șir public Descriere {get; a stabilit; }
public int Unități {get; a stabilit; }
public double UnitPrice {get; a stabilit; }
public double Total {get; a stabilit; }}
Aceasta ar trebui să se afle în folderul Modele din descărcare suport pentru tutorialul cu numele Transaction.cs. În controler, veți completa acest model cu următorul cod (pentru a economisi spațiu, acesta este doar un eșantion de trei înregistrări):
public IEnumerable GetList ()
(var tr = Listă nouă () {
tranzacție nouă {TransactionID = 1, Descriere = „Latte mare”,
TranDate = System.DateTime.Parse ('01.06.2012'), Units = 5, UnitPrice = 3.5},
tranzacție nouă {TransactionID = 2, Descriere = „Skinny Latte”,
TranDate = System.DateTime.Parse ('6/5/2012'), Units = 7, UnitPrice = 3,25},
………
tranzacție nouă {TransactionID = 14, Descriere = „Cafea medie a zilei”, TranDate = System.DateTime.Parse („13.09.2012”), Units = 58, UnitPrice = 2.15}};
returnează tr;}
În codul complet al proiectului, apelez această metodă din toate vizualizările pentru a completa datele pentru a le trimite vizualizării. De asemenea, este posibil să fi observat că modelul are un câmp Total care nu este completat; Am decis să nu completez acest lucru în controler, astfel încât să vă pot arăta cum să aveți un câmp calculat într-un WebGrid. În codul complet al proiectului am două unde este calculat în controler.
Codul controlerului pentru vizualizare este doar câteva linii, deoarece paginarea și sortarea sunt gestionate de ajutorul WebGrid. Deoarece vizualizarea include un formular pentru filtrarea datelor, există două proceduri ActionResult în controler pentru această vizualizare.
HttpPost ActionResult face doar o redirecționare și include parametrii pentru intervalul de date. Dacă ați face acest lucru, intervalul de date ar fi încorporat automat în anteturile care pot fi făcute clic automat de către ajutorul WebGrid; dacă tocmai ați returnat vizualizarea filtrată, atunci când ați făcut clic pe antet, acesta va elimina filtrul.
public ActionResult Grid (DateTime? Begin, DateTime? End)
{var tr = GetList ();
if (Începe! = nul && End! = nul)
{DateTime begindt = Convert.ToDateTime (Begin);
DateTime enddt = Convert.ToDateTime (End) .AddDays (1);
var tr2 = tr.Where (a => a.TranDate> = begindt && a.TranDate< enddt);
return View (tr2);}
return View (tr);}
[HttpPost]
public ActionResult Grid (FormCollection fc)
{return RedirectToAction ('Grid', nou {Begin = fc ['begin'], End = fc ['end']});}
Primul ActionResult are doi parametri opționali (desemnați prin semnul întrebării după tipul de date) și funcționează destul de simplu. În primul rând, lista este recuperată cu codul afișat anterior.
Dacă ambii parametri Begin și End nu sunt nuli, aceștia sunt convertiți pentru a funcționa cu interogarea. Deoarece câmpul DateTime poate include porțiunea de timp, data de încheiere va avea o zi adăugată, iar filtrul este setat pentru mai puțin decât parametrul End plus o zi.
Filtrarea se face folosind expresii lambda, care sunt foarte utile atunci când se lucrează cu date.
Următorul ActionResult ia FormCollection, iar parametrii Begin și End sunt readuși la acțiunea principală. Dacă comparați acest lucru cu încercarea de a pune toate paginările și sortarea în controler, veți vedea că acesta este un cod foarte compact. Acum sunteți gata să lucrați la vedere. Prima linie de cod din vizualizare îl configurează ca o vizualizare puternic tastată. Aceasta spune:
@model IEnumerable
Aceasta înseamnă că vizualizarea se așteaptă ca controlerul să transmită o colecție enumerabilă a modelului Tranzacție către vizualizare. Acestea sunt datele transmise către ajutorul WebGrid. Următoarea secțiune de cod este blocul de stil care include clasele CSS pe care le veți utiliza în WebGrid.
.tranlist tr: nth-child (impar) {background-color: # afc1d9; }
.tranlist tr: nth-child (even) {background-color: white; }
.tranlist th {fundal-culoare: Negru; culoare: alb; }
.tranlist a {color: White; }
.smallcolumn {min-width: 20px;}
.medcolumn {min-width: 50px;}. bigcolumn {min-width: 100px; }
.linkcolumn {min-width: 90px; text-align: centru; } .linkcolumn a a {color: Black;
} .linkcolumn a: hover {color: Blue; }
.footstuff {fundal-culoare: Alb; culoare: Roșu; }
.footstuff a: vizitat {culoare: albastru; } .footstuff a {color: Blue;}
.footstuff td {fundal-culoare: Alb; culoarea chenarului: alb; }
.headerstyle th {text-transform: capitalizează; text-align: centru;}
Aceste stiluri fac următoarele: setarea diferitelor culori de fundal pentru rânduri alternative, setarea antetului tabelului negru cu text alb, setarea lățimilor și stilurilor minime pentru anumite coloane și setarea stilului pentru subsol. Stilurile reale de aici nu sunt atât de importante; ceea ce este important este modul în care îi spuneți WebGrid cum să utilizeze aceste stiluri, la care vom analiza în curând.
Crearea unui WebGrid
Următoarea secțiune de cod creează un WebGrid cu modelul și setează variabile de pagină pentru a păstra valorile din șirul de interogare, dacă acestea există.
@ {var grid = new WebGrid (Model, defaultSort: 'TransactionID', rowsPerPage: 5);
if (Request.QueryString [grid.SortDirectionFieldName] .IsEmpty ())
{grid.SortDirection = SortDirection.Descending;}
DateTime beg = System.DateTime.Now; DateTime end = System.DateTime.
Acum;
if (Model.Count ()! = 0) {beg = Model.Min (a => a.TranDate);
end = Model.Max (b => b.TranDate);}}
Aceasta creează doar obiectul grilă, transmite datele din model, setează câmpul de sortare la TransactionID și configurează paginarea pentru cinci rânduri pe pagină. Trebuie să apelați o altă metodă pentru a returna codul HTML în browser. Celălalt cod setează o direcție inițială de sortare descendentă pentru a afișa mai întâi cele mai noi tranzacții și primește datele pentru cele mai noi și mai vechi tranzacții. Dacă aveți mai multe grile pe pagină, utilizați grid.SortDirectionFieldName în locul valorii implicite sortdir, astfel încât numele câmpului să poată fi schimbat. Următoarea secțiune de cod creează formularul astfel încât să puteți implementa filtrarea în funcție de intervalul de date.
Începe
Sfârșit
type = 'submit' value = 'submit' />
Intervalul de date va afișa data curentă dacă setul de date este gol și prima și ultima dată din setul de date dacă există înregistrări. Există o formatare minimă pe butonul de trimitere. În continuare, suntem pregătiți pentru codul care creează grila:
@ grid.GetHtml (mod: WebGridPagerModes.All, tableStyle: 'tranlist',
headerStyle: 'headerstyle', firstText: 'First', lastText: 'Last',
coloane: grid.Columns (grid.Column ('TranDate', antet: 'Trans Data', format:
@@ item.TranDate.ToShortDateString ()),
grid.Column („Descriere”, antet: „Descriere tranzacție”, stil:
'bigcolumn'), grid.Column ('Units', header: 'Units', style: 'smallcolumn'),
grid.Column („UnitPrice”, antet: „Preț unitar”, format: @@ item.UnitPrice.
ToString („0,00 USD”), stil: „medcolumn”),
grid.Column („Total”, canSort: false, antet: „Preț total”, format: @@
{double q = (item.Units * item.UnitPrice);} @ q.ToString („0,00 USD”), stil:
„coloană mediană”),
grid.Column ('ID tranzacție', antet: 'Acțiune', stil: 'linkcolumn', canSort:
fals,
format: @ @ Html.ActionLink („Editați”, „Editați”, nou {id = item.TransactionID})
| @ Html.ActionLink („Ștergeți”, „Ștergeți”, nou {id = item.TransactionID}))))
Crearea unui subsol de paginare personalizat
Codul precedent vă va oferi vizualizarea cu paginare normală în subsol. Apoi vom personaliza subsolul paginării, plasând paginarea în ultima coloană și numărul total de înregistrări în a doua, prin editarea codului HTML produs de ajutorul WebGrid. Dacă luați această vizualizare în browser și apăsați View Source, veți vedea că paginarea se află în interiorul etichetelor
.ToString (). Înlocuiți ('
Număr total de înregistrări '+ grilă. TotalRowCount +'
Aceasta aplică clasa footstuff la subsol, creează atât o coloană goală, cât și una cu textul pe care am vrut să-l adăugăm, apoi pune alte trei coloane goale și se termină cu ultima
@ {int firstRecord = (grid.PageIndex * grid.RowsPerPage) + 1;
int lastRecord = (grid.PageIndex * grid.RowsPerPage) + grid.Rows.Count ();
}
Aceasta creează două variabile de pagină care conțin valori pentru prima și ultima înregistrare afișate pe pagina curentă. Proprietatea PageIndex este un index bazat pe zero al paginii curente, deci nu trebuie să scădeați unul înainte de a vă înmulți cu RowsPerPage pentru a obține ultima înregistrare de pe pagina anterioară. Apoi adăugați unul pentru a obține prima înregistrare și adăugați numărul de rânduri de pe pagina curentă pentru a obține ultima înregistrare de pe pagină. În subsol, veți folosi următorul cod în locul codului în care este codul actual pentru Numărul total de înregistrări:
Dacă doriți ca textul pentru numărul de înregistrări să aibă o culoare diferită, puteți aplica o altă clasă sau chiar puteți utiliza doar o etichetă de stil, cum ar fi linia de mai jos.
Învelire
Asistentul WebGrid simplifică paginarea și sortarea și aveți o mare flexibilitate folosind metoda C # Replace de pe șirul de rezultate al asistentului WebGrid. Dacă puteți face ceva cu un tabel folosind HTML obișnuit, nu există niciun motiv pentru care nu ar trebui să puteți face același lucru cu WebGrid - și veți beneficia de funcțiile de paginare și sortare încorporate în helper.
Cuvinte: Michael Schmaltz
Acest articol a apărut inițial în revista .net numărul 237
I-a plăcut asta? Citiți acestea!
- Cum să creați o aplicație : încercați aceste tutoriale minunate
- Sclipitor Tutorial Wordpress selecţie
- Exemple fantastice de Design UI
Alte intrebari? Trageți departe în comentariile de mai jos.
