Mvcextensions - hogyan kapcsolódjon a jquery-ui dátumválasztó az mvc-hez

Yandeks.Metrika arra a következtetésre jutott, hogy egy ilyen keresési kéréshez a blogomhoz érkeznek, és úgy döntöttek, hogy egy cikket írnak róla. A feladat meglehetősen egyszerű - lehetővé téve, hogy a felhasználó kiválasszon egy dátumot egy gyönyörű naptárból, például a jQuery UI Datepicker

A döntés "a homlokán".

Mostantól minden alkalommal, amikor a @ Html.EditorFor (x => x.FieldOfDateTimeType) szót írja, ezt a sablont fogja használni.

Ennek a megoldásnak hátrányai vannak:

Az élet könnyebbé tétele.

Nyilvánvaló, hogy a végleges HTML-ben lévő másolat parancsfájlt valahová kell venni. A bázisrétegbe vagy külön fájlba helyezzük. Ehhez meg kell változtatnunk a sizzle-szelektorunkat, hogy megtalálja az összes naptárt. Ehhez jelölje meg naptárunkat a role = "datepicker" attribútummal és hozzárendelje a "dátum" típushoz a html5 támogatásához:

Ez a megoldás sokkal elegánsabb, mint a homlokoldali megoldás, de szinte ugyanolyan marad, nem rugalmas.

Az előző megoldás már nem hangos, de még nem teszi lehetővé további paraméterek átvitelét a naptárhoz. Ehhez barátaink IModelMetadataAdditionalSetting s segítséget kap. Ezek használatához hozzon létre egy kiterjesztést az AsDatePicker számára:

Itt minden egyszerű: létrehoz egy sablont, és létrehozzák a naptár beállításait. A sablonban ezt a következőképpen fogjuk megjeleníteni:

Itt a beállítások az elem adat- * attribútumainak sorba vannak sorolva . Ebben az esetben az egyezményt megfigyelik, hogy az aláhúzást kötőjellé alakítják át.

A jQuery-UI a beállításokhoz camelCase jelölést használ, de a jQuery szerencsére automatikusan átalakítja az adat- * attribútumok kötőjelét az ilyen jelöléshez. Ezért mindenkinek szüksége van vegye figyelembe adat- * attribútumait, és csak adja át a beállításokat az adattárolóban. Ezt a _Layout.cshtml parancsfájl fogja végrehajtani:

A metaadatokban ez így fog történni:

Ahelyett, hogy befejezné

Ez a megoldás abszolút rugalmasságot biztosít, és lehetővé teszi bármelyik naptár (és nem csak naptárak) tulajdonságainak kezelését az űrlap metaadatain keresztül.

UPDATE: Hozzáadott példák a cikkhez.