Mvcextensions - cum se conectează selectorul de date jquery-ui la mvc

În Yandeks.Metrika au afirmat că pentru o astfel de solicitare de căutare vin pe blogul meu și au decis să scrie un articol despre el. Sarcina este destul de simplă - permite utilizatorului să selecteze o dată dintr-un calendar frumos, cum ar fi jQuery UI Datepicker







Decizia "pe frunte".

Acum, de fiecare dată când scrieți @ Html.EditorFor (x => x.FieldOfDateTimeType), acest șablon va fi folosit.

Această soluție are dezavantaje:

A face viața mai ușoară.

Evident, scriptul duplicat din codul HTML final trebuie să fie luat undeva. Am pus-o în stratul de bază sau într-un fișier separat. Pentru aceasta, trebuie să modificăm selectorul de sizzle astfel încât să găsească toate calendarele. Pentru a face acest lucru, marcați calendarul nostru cu atributul role = "datepicker" și alocați-l tipului "date" pentru a suporta html5:







Această soluție este mai elegantă decât soluția din frunte, dar rămâne aproape aceeași și nu este flexibilă.

Soluția anterioară este deja discontinuă, dar încă nu permite transferul de parametri suplimentari în calendar. Pentru a face acest lucru, prietenii noștri IModelMetadataAdditionalSetting s vor veni în ajutorul nostru. Pentru a le folosi, vom crea o metodă de extensie pentru AsDatePicker:

Aici totul este simplu: se creează un șablon și se creează setări pentru calendar. În șablon, vom face acest lucru după cum urmează:

Aici, setările sunt serializate la atributele de date * ale elementului . În acest caz, convenția va fi observată că sublinierea va fi convertită într-o cratimă.

jQuery-UI pentru setările utilizează notația camelCase, dar, jQuery, din fericire, convertește automat liniuțele din atributele de date * la o astfel de notație. Deci avem nevoie doar de toată lumea ia atributele de date * și doar trece ca setări în datapicker. Acest lucru se va face prin script-ul în _Layout.cshtml:

În metadate, aceasta va fi utilizată astfel:

În loc să încheiem

Această soluție are o flexibilitate absolută și vă permite să gestionați orice proprietăți pentru fiecare calendare (și nu doar pentru calendare) prin intermediul metadatelor de formular.

UPDATE: Exemple adăugate la articol.







Trimiteți-le prietenilor: