Używanie kalendarza podręcznego interfejsu użytkownika HTML5 i jQuery UI z ASP.NET MVC — część 4

Autor : Rick Anderson

Ten samouczek zawiera podstawowe informacje na temat pracy z szablonami edytora, szablonami wyświetlania i kalendarzem podręcznym platformy jQuery UI w aplikacji internetowej MVC ASP.NET.

Dodawanie szablonu do edycji dat

W tej sekcji utworzysz szablon do edycji dat, które będą stosowane, gdy ASP.NET MVC wyświetla interfejs użytkownika do edycji właściwości modelu, które są oznaczone przy użyciu wyliczenia Date atrybutu DataType . Szablon będzie renderować tylko datę; godzina nie zostanie wyświetlona. W szablonie użyjesz kalendarza podręcznego jQuery UI Datepicker , aby zapewnić sposób edytowania dat.

Aby rozpocząć, otwórz plik Movie.cs i dodaj atrybut DataType z wyliczeniem Date do ReleaseDate właściwości, jak pokazano w poniższym kodzie:

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

Ten kod powoduje ReleaseDate , że pole jest wyświetlane bez czasu zarówno w szablonach wyświetlania, jak i edytowaniu szablonów. Jeśli aplikacja zawiera szablon date.cshtml w folderze Views\Shared\EditorTemplates lub w folderze Views\Movies\EditorTemplates , ten szablon będzie używany do renderowania dowolnej DateTime właściwości podczas edytowania. W przeciwnym razie wbudowany system tworzenia szablonów ASP.NET wyświetli właściwość jako datę.

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację. Wybierz link edycji, aby sprawdzić, czy pole wejściowe daty wydania zawiera tylko datę.

W Eksplorator rozwiązań rozwiń folder Widoki, rozwiń folder Udostępnione, a następnie kliknij prawym przyciskiem myszy folder Views\Shared\EditorTemplates.

Kliknij przycisk Dodaj, a następnie kliknij pozycję Wyświetl. Zostanie wyświetlone okno dialogowe Dodawanie widoku .

W polu Nazwa widoku wpisz "Date".

Zaznacz pole wyboru Utwórz jako widok częściowy . Upewnij się, że pole wyboru Użyj układu lub strony wzorcowej i Utwórz silnie typizowane pole wyboru widoku nie jest zaznaczone.

Kliknij pozycję Dodaj. Zostanie utworzony szablon Views\Shared\EditorTemplates\Date.cshtml .

Dodaj następujący kod do szablonu Views\Shared\EditorTemplates\Date.cshtml .

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

Pierwszy wiersz deklaruje model jako DateTime typ. Mimo że nie trzeba deklarować typu modelu w trybie edycji i szablonów wyświetlania, najlepszym rozwiązaniem jest sprawdzenie czasu kompilacji modelu przekazywanego do widoku. (Inną korzyścią jest to, że następnie uzyskasz funkcję IntelliSense dla modelu w widoku w programie Visual Studio). Jeśli typ modelu nie jest zadeklarowany, ASP.NET MVC uważa go za typ dynamiczny i nie ma sprawdzania typów w czasie kompilacji. Zadeklarowanie modelu jako DateTime typu staje się silnie typizowane.

Drugi wiersz to tylko literał znaczników HTML, który wyświetla tekst "Using Date Template" (Używanie szablonu daty) przed polem daty. Użyjesz tego wiersza tymczasowo, aby sprawdzić, czy ten szablon daty jest używany.

Następny wiersz to pomocnik Html.TextBox , który renderuje input pole tekstowe. Trzeci parametr pomocnika używa typu anonimowego, aby ustawić klasę dla pola datefield tekstowego na , a typ na date. (Ponieważ class jest zarezerwowana w języku C#, należy użyć @ znaku , aby uciec od atrybutu class w analizatorze języka C#).

Typ date jest typem wejściowym HTML5, który umożliwia przeglądarkom obsługującym html5 renderowanie kontrolki kalendarza HTML5. Później dodasz kod JavaScript, aby podłączyć platformę jQuery datepicker do Html.TextBox elementu przy użyciu datefield klasy .

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację. Możesz sprawdzić, czy ReleaseDate właściwość w widoku edycji używa szablonu edycji, ponieważ szablon wyświetla tekst "Using Date Template" (Używanie szablonu daty) tuż przed polem wprowadzania tekstu, jak pokazano na poniższej ReleaseDate ilustracji:

W przeglądarce wyświetl źródło strony. (Na przykład kliknij prawym przyciskiem myszy stronę i wybierz polecenie Wyświetl źródło). W poniższym przykładzie pokazano niektóre znaczniki dla strony, ilustrujące class atrybuty i type w renderowanej kodzie HTML.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Wróć do szablonu Views\Shared\EditorTemplates\Date.cshtml i usuń znacznik "Using Date Template". Teraz ukończony szablon wygląda następująco:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

Dodawanie kalendarza podręcznego interfejsu użytkownika jQuery przy użyciu narzędzia NuGet

W tej sekcji dodasz kalendarz podręczny jQuery UI datepicker do szablonu edycji daty. Biblioteka interfejsu użytkownika jQuery zapewnia obsługę animacji, zaawansowanych efektów i dostosowywalnych widżetów. Jest ona oparta na bibliotece języka JavaScript jQuery. Kalendarz podręczny platformy datepicker ułatwia wprowadzanie dat przy użyciu kalendarza zamiast wprowadzania ciągu. Kalendarz podręczny ogranicza również użytkowników do dat prawnych — zwykły wpis tekstowy daty pozwoli wprowadzić coś takiego jak 2/33/1999 ( 33 lutego 1999 r.), ale kalendarz podręczny jQuery UI datepicker nie pozwoli na to.

Najpierw należy zainstalować biblioteki interfejsu użytkownika jQuery. W tym celu użyjesz pakietu NuGet, który jest menedżerem pakietów dołączonym do wersji SP1 programu Visual Studio 2010 i Visual Web Developer.

W programie Visual Web Developer z menu Narzędzia wybierz pozycję Menedżer pakietów NuGet , a następnie wybierz pozycję Zarządzaj pakietami NuGet.

Uwaga: jeśli w menu Narzędzia nie jest wyświetlane polecenie Menedżera pakietów NuGet , musisz zainstalować pakiet NuGet, postępując zgodnie z instrukcjami na stronie Instalowanie pakietu NuGet w witrynie internetowej NuGet.

Jeśli używasz programu Visual Studio zamiast Visual Web Developer, w menu Narzędzia wybierz pozycję Menedżer pakietów NuGet , a następnie wybierz pozycję Dodaj odwołanie do pakietu biblioteki.

W oknie dialogowym MVC Formant — zarządzanie pakietami NuGet kliknij kartę Online po lewej stronie, a następnie wprowadź ciąg "jQuery.UI" w polu wyszukiwania. Wybierz pozycję j Query UI Widgets:Datepicker(Widżety interfejsu użytkownika zapytania:Datepicker), a następnie wybierz przycisk Zainstaluj .

Narzędzie NuGet dodaje te wersje debugowania i minimalne wersje rdzenia interfejsu użytkownika jQuery oraz selektor daty jQuery interfejsu użytkownika do projektu:

• jquery.ui.core.js
• jquery.ui.core.min.js
• jquery.ui.datepicker.js
• jquery.ui.datepicker.min.js

Uwaga: wersje debugowania (pliki bez rozszerzenia .min.js ) są przydatne do debugowania, ale w lokacji produkcyjnej można uwzględnić tylko minimalne wersje.

Aby faktycznie użyć selektora dat jQuery, należy utworzyć skrypt jQuery, który będzie podłączać widżet kalendarza do szablonu edycji. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Scripts (Skrypty) i wybierz polecenie Add (Dodaj), new item (Nowy element), a następnie pozycję JScript File (Plik JScript). Nadaj plikowi nazwęDatePickerReady.js.

Dodaj następujący kod do pliku DatePickerReady.js :

$(function () {
    $(".datefield").datepicker(); 
});

Jeśli nie znasz zestawu jQuery, oto krótkie wyjaśnienie tego, co robi: pierwszy wiersz to funkcja "gotowa do użycia w trybie jQuery", która jest wywoływana, gdy wszystkie elementy DOM na stronie zostały załadowane. Drugi wiersz wybiera wszystkie elementy DOM, które mają nazwę datefieldklasy , a następnie wywołuje datepicker funkcję dla każdego z nich. (Pamiętaj, że klasa dodano do szablonu datefieldViews\Shared\EditorTemplates\Date.cshtml wcześniej w samouczku).

Następnie otwórz plik Views\Shared\_Layout.cshtml . Należy dodać odwołania do następujących plików, które są wymagane, aby można było użyć selektora dat:

• Content/themes/base/jquery.ui.core.css
• Content/themes/base/jquery.ui.datepicker.css
• Content/themes/base/jquery.ui.theme.css
• jquery.ui.core.min.js
• jquery.ui.datepicker.min.js
• DatePickerReady.js

W poniższym przykładzie pokazano rzeczywisty kod, który należy dodać w dolnej części head elementu w pliku Views\Shared\_Layout.cshtml .

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

Pełną head sekcję przedstawiono tutaj:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

Metoda pomocnika zawartości adresu URL konwertuje ścieżkę zasobu na ścieżkę bezwzględną. Należy użyć @URL.Content polecenia , aby poprawnie odwoływać się do tych zasobów, gdy aplikacja jest uruchomiona w usługach IIS.

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację. Wybierz link edycji, a następnie umieść punkt wstawiania w polu ReleaseDate . Zostanie wyświetlony kalendarz podręczny interfejsu użytkownika jQuery.

Podobnie jak w przypadku większości kontrolek jQuery, platforma datepicker umożliwia jej obszerne dostosowywanie. Aby uzyskać informacje, zobacz Dostosowywanie wizualne: projektowanie motywu interfejsu użytkownika jQuery w witrynie interfejsu użytkownika jQuery .

Obsługa kontrolki wprowadzania daty HTML5

Ponieważ więcej przeglądarek obsługuje kod HTML5, należy użyć natywnych danych wejściowych HTML5, takich jak date element wejściowy, i nie używać kalendarza interfejsu użytkownika jQuery. Możesz dodać logikę do aplikacji, aby automatycznie używać kontrolek HTML5, jeśli przeglądarka je obsługuje. W tym celu zastąp zawartość pliku DatePickerReady.js następującym kodem:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

Pierwszy wiersz tego skryptu używa modernizatora do sprawdzania, czy dane wejściowe daty HTML5 są obsługiwane. Jeśli nie jest obsługiwany, zamiast tego zostanie podłączony selektor dat interfejsu użytkownika jQuery. (Modernizr to biblioteka Języka JavaScript typu open source, która wykrywa dostępność natywnych implementacji języków HTML5 i CSS3. Modernizator jest uwzględniony w nowych projektach MVC ASP.NET tworzonych).

Po wprowadzeniu tej zmiany można ją przetestować przy użyciu przeglądarki obsługującej kod HTML5, na przykład Opera 11. Uruchom aplikację przy użyciu przeglądarki zgodnej z językiem HTML5 i edytuj wpis filmu. Kontrolka daty HTML5 jest używana zamiast kalendarza podręcznego interfejsu użytkownika jQuery:

Ponieważ nowe wersje przeglądarek implementują kod HTML5 przyrostowo, dobrym rozwiązaniem jest teraz dodanie kodu do witryny internetowej, który obsługuje szeroką gamę języków HTML5. Na przykład poniżej przedstawiono bardziej niezawodny skrypt DatePickerReady.js , który umożliwia przeglądarkom pomocy technicznej witryny, które obsługują tylko częściowo kontrolkę daty HTML5.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Ten skrypt wybiera elementy date TYPU HTML5input, które nie obsługują w pełni kontrolki daty HTML5. W przypadku tych elementów podłącza on kalendarz podręczny interfejsu użytkownika jQuery, a następnie zmienia type atrybut z date na text. Zmiana atrybutu type z date na text, częściowa obsługa daty HTML5 jest wyeliminowana. Jeszcze bardziej niezawodny skrypt DatePickerReady.js można znaleźć w pliku JSFIDDLE.

Dodawanie dat dopuszczalnych do wartości null do szablonów

Jeśli używasz jednego z istniejących szablonów dat i przekażesz datę o wartości null, zostanie wyświetlony błąd czasu wykonywania. Aby szablony dat są bardziej niezawodne, należy je zmienić tak, aby obsługiwały wartości null. Aby obsługiwać daty dopuszczane do wartości null, zmień kod w pliku Views\Shared\DisplayTemplates\DateTime.cshtml na następujący:

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

Kod zwraca pusty ciąg, gdy model ma wartość null.

Zmień kod w pliku Views\Shared\EditorTemplates\Date.cshtml na następujący:

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Gdy ten kod zostanie uruchomiony, jeśli model nie ma wartości null, zostanie użyta DateTime wartość modelu. Jeśli model ma wartość null, zamiast tego jest używana bieżąca data.

Zawijanie

W tym samouczku omówiono podstawy pomocników ASP.NET szablonów i pokazano, jak używać kalendarza podręcznego interfejsu użytkownika jQuery w aplikacji MVC ASP.NET. Aby uzyskać więcej informacji, wypróbuj następujące zasoby:

• Aby uzyskać informacje o interfejsie użytkownika jQuery, zobacz interfejs użytkownika jQuery.
• Aby uzyskać informacje na temat lokalizowania kontrolki datepicker, zobacz UI/Datepicker/Localization.
• Aby uzyskać więcej informacji na temat szablonów ASP.NET MVC, zobacz serię blogów Brada Wilsona na temat szablonów MVC 2 ASP.NET. Mimo że seria została napisana dla ASP.NET MVC 2, materiał nadal ma zastosowanie do bieżącej wersji ASP.NET MVC.

Poprzednie