Co nowego we wzorcu Web Forms na platformie ASP.NET 4.5
Autor : Web Camps Team
Nowa wersja ASP.NET Web Forms wprowadza szereg ulepszeń skoncentrowanych na ulepszaniu środowiska użytkownika podczas pracy z danymi.
W poprzednich wersjach Web Forms podczas używania powiązania danych do emitowania wartości elementu członkowskiego obiektu użyto wyrażeń powiązania danych Bind() lub Eval(). W nowej wersji ASP.NET można zadeklarować typ danych, z którymi ma być powiązana kontrolka, używając nowej właściwości ItemType. Ustawienie tej właściwości umożliwi użycie silnie typizowanej zmiennej w celu uzyskania pełnych korzyści środowiska programistycznego programu Visual Studio, takiego jak IntelliSense, nawigacja po elementach członkowskich i sprawdzanie czasu kompilacji.
Za pomocą kontrolek powiązanych z danymi można teraz również określić własne niestandardowe metody wybierania, aktualizowania, usuwania i wstawiania danych, upraszczając interakcję między kontrolkami strony a logiką aplikacji. Ponadto możliwości powiązania modelu zostały dodane do ASP.NET, co oznacza, że można mapować dane ze strony bezpośrednio do parametrów typu metody.
Walidacja danych wejściowych użytkownika powinna być również łatwiejsza w przypadku najnowszej wersji Web Forms. Teraz można dodawać adnotacje do klas modelu za pomocą atrybutów walidacji z przestrzeni nazw System.ComponentModel.DataAnnotations i zażądać, aby wszystkie witryny walidować dane wejściowe użytkownika przy użyciu tych informacji. Walidacja po stronie klienta w Web Forms jest teraz zintegrowana z rozwiązaniem jQuery, zapewniając czystszy kod po stronie klienta i nietrudne funkcje języka JavaScript.
W obszarze weryfikacji żądań wprowadzono ulepszenia, aby ułatwić selektywne wyłączanie weryfikacji żądań dla określonych części aplikacji lub odczytywanie unieważnionych danych żądania.
Wprowadzono pewne ulepszenia w celu Web Forms kontrolek serwera w celu korzystania z nowych funkcji html5:
- Właściwość TextMode kontrolki TextBox została zaktualizowana w celu obsługi nowych typów danych wejściowych HTML5, takich jak poczta e-mail, data/godzina itd.
- Kontrolka FileUpload obsługuje teraz wiele plików przekazywanych z przeglądarek, które obsługują tę funkcję HTML5.
- Kontrolki modułu sprawdzania poprawności obsługują teraz weryfikowanie elementów wejściowych HTML5.
- Nowe elementy HTML5, które mają atrybuty reprezentujące adres URL, obsługują teraz element runat="server". W związku z tym można użyć konwencji ASP.NET w ścieżkach url, takich jak operator ~ do reprezentowania katalogu głównego aplikacji (na przykład <video runat="server" src="~/myVideo.emulator"></video>).
- Kontrolka UpdatePanel została naprawiona w celu obsługi publikowania pól wejściowych HTML5.
W oficjalnym portalu ASP.NET można znaleźć więcej przykładów nowych funkcji w programie ASP.NET WebForms 4.5: What's New in ASP.NET 4.5 and Visual Studio 2012 (Co nowego w programie ASP.NET 4.5 i Programie Visual Studio 2012)
Wszystkie przykładowe kod i fragmenty kodu są zawarte w zestawie szkoleniowym Web Camps Training Kit.
Cele
W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:
- Używanie silnie typiowanych wyrażeń powiązania danych
- Korzystanie z nowych funkcji powiązania modelu w Web Forms
- Używanie dostawców wartości do mapowania danych strony na metody za pomocą kodu
- Używanie adnotacji danych na potrzeby weryfikacji danych wejściowych użytkownika
- Korzystaj z niestrudyjnej weryfikacji po stronie klienta za pomocą zapytania jQuery w Web Forms
- Implementowanie szczegółowej weryfikacji żądań
- Implementowanie asynchronicznego przetwarzania stron w Web Forms
Wymagania wstępne
Aby ukończyć to laboratorium, musisz mieć następujące elementy:
- Microsoft Visual Studio Express 2012 dla sieci Web lub superior (przeczytaj dodatek A, aby uzyskać instrukcje dotyczące sposobu instalacji).
Konfigurowanie
Instalowanie fragmentów kodu
Dla wygody większość kodu, którym będziesz zarządzać w tym laboratorium, jest dostępna jako fragmenty kodu programu Visual Studio. Aby zainstalować fragmenty kodu, uruchom plik .\Source\Setup\CodeSnippets.vsi .
Jeśli nie znasz Visual Studio Code fragmentów kodu i chcesz dowiedzieć się, jak ich używać, możesz zapoznać się z dodatkiem z tego dokumentu "Dodatek C: Używanie fragmentów kodu".
Ćwiczenia
To praktyczne laboratorium obejmuje następujące ćwiczenia:
- Ćwiczenie 1. Powiązanie modelu w ASP.NET Web Forms
- Ćwiczenie 2. Sprawdzanie poprawności danych
- Ćwiczenie 3. Asynchroniczne przetwarzanie stron w ASP.NET Web Forms
Uwaga
Każdemu ćwiczeniu towarzyszy folder End zawierający wynikowe rozwiązanie, które należy uzyskać po zakończeniu ćwiczeń. Możesz użyć tego rozwiązania jako przewodnika, jeśli potrzebujesz dodatkowej pomocy podczas wykonywania ćwiczeń.
Szacowany czas ukończenia tego laboratorium: 60 minut.
Ćwiczenie 1. Powiązanie modelu w ASP.NET Web Forms
Nowa wersja ASP.NET Web Forms wprowadza szereg ulepszeń skoncentrowanych na ulepszaniu środowiska podczas pracy z danymi. W tym ćwiczeniu poznasz silnie typizowane kontrolki danych i powiązanie modelu.
Zadanie 1 — używanie Strongly-Typed Data-Bindings
W tym zadaniu odkryjesz nowe silnie typizowane powiązania dostępne w ASP.NET 4.5.
Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex1-ModelBinding/Begin/ .
Zanim przejdziesz dalej, musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (Zarządzaj pakietami NuGet).
W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć , aby pobrać brakujące pakiety.
Na koniec skompiluj rozwiązanie, klikając pozycjęKompiluj rozwiązanie kompilacji | .
Uwaga
Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium należy wykonać te kroki.
Otwórz stronę Customers.aspx . Umieść listę nienumerowaną w głównej kontrolce i dołącz kontrolkę powtarzaną wewnątrz w celu wyświetlenia listy każdego klienta. Ustaw nazwę repeatera na customersRepeater , jak pokazano w poniższym kodzie.
W poprzednich wersjach Web Forms, w przypadku używania powiązania danych do emitowania wartości elementu członkowskiego w obiekcie, do którego jest powiązanie danych, należy użyć wyrażenia powiązania danych wraz z wywołaniem metody Eval, przekazując nazwę elementu członkowskiego jako ciąg.
W czasie wykonywania te wywołania elementu Eval będą używać odbicia względem aktualnie powiązanego obiektu w celu odczytania wartości elementu członkowskiego o podanej nazwie i wyświetlenia wyniku w kodzie HTML. Takie podejście ułatwia powiązanie danych z dowolnymi, nieszkształtymi danymi.
Niestety, w programie Visual Studio utracisz wiele doskonałych funkcji środowiska programistycznego, w tym funkcję IntelliSense dla nazw elementów członkowskich, obsługę nawigacji (np. Przejdź do definicji) i sprawdzanie czasu kompilacji.
... <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> <h3>Customers</h3> <ul> <asp:Repeater ID="customersRepeater" runat="server"> <ItemTemplate> <li> <%# Eval("FirstName") %> <%# Eval("LastName") %> </li> </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Otwórz plik Customers.aspx.cs .
Dodaj następującą instrukcję using.
using System.Linq;W metodzie Page_Load dodaj kod, aby wypełnić repeater listą klientów.
(Fragment kodu — laboratorium Web Forms — Ex01 — Wiązanie źródła danych klientów)
protected void Page_Load(object sender, EventArgs e) { using (var db = new WebFormsLab.Model.ProductsContext()) { this.customersRepeater.DataSource = db.Customers.ToList(); this.customersRepeater.DataBind(); } }Rozwiązanie używa elementu EntityFramework razem z aplikacją CodeFirst do tworzenia bazy danych i uzyskiwania do jej dostępu. W poniższym kodzie klientRepeater jest powiązany z zmaterializowanym zapytaniem, które zwraca wszystkich klientów z bazy danych.
Naciśnij klawisz F5 , aby uruchomić rozwiązanie i przejdź do strony Klienci , aby zobaczyć powtarzanie w działaniu. Ponieważ rozwiązanie korzysta z aplikacji CodeFirst, baza danych zostanie utworzona i wypełniona w lokalnym wystąpieniu programu SQL Express podczas uruchamiania aplikacji.
Wyświetlanie listy klientów za pomocą powtarzania
Uwaga
W programie Visual Studio 2012 IIS Express jest domyślnym serwerem tworzenia aplikacji internetowych.
Zamknij przeglądarkę i wróć do programu Visual Studio.
Teraz zastąp implementację, aby używać silnie typiowanych powiązań. Otwórz stronę Customers.aspx i użyj nowego atrybutu ItemType w repeaterze, aby ustawić typ klienta jako typ powiązania.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul> <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server"> <ItemTemplate> ... </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Właściwość ItemType umożliwia zadeklarowanie typu danych, z którymi ma być powiązana kontrolka, i umożliwia użycie silnie typizowanego powiązania wewnątrz kontrolki powiązanej z danymi.
Zastąp zawartość ItemTemplate następującym kodem.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> ... <ul> <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server"> <ItemTemplate> <li> <a href="CustomerDetails.aspx?id=<%#: Item.Id %>"> <%#: Item.FirstName %> <%#: Item.LastName %> </a> </li> </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Jedną z wad powyższych podejść jest to, że wywołania funkcji Eval() i Bind() są opóźnione — co oznacza, że przekazujesz ciągi reprezentujące nazwy właściwości. Oznacza to, że nie uzyskujesz funkcji IntelliSense dla nazw elementów członkowskich, obsługi nawigacji po kodzie (takiej jak Przejdź do definicji), ani obsługi sprawdzania czasu kompilacji.
Ustawienie właściwości ItemType powoduje wygenerowanie dwóch nowych zmiennych typowych w zakresie wyrażeń powiązania danych: Item i BindItem. Możesz użyć tych silnie typiowanych zmiennych w wyrażeniach powiązania danych i uzyskać pełne korzyści wynikające z programowania w programie Visual Studio.
Wyrażenie ": " używane w wyrażeniu spowoduje automatyczne kodowanie HTML danych wyjściowych w celu uniknięcia problemów z zabezpieczeniami (na przykład ataków skryptowych między witrynami). Ta notacja była dostępna od platformy .NET 4 do zapisywania odpowiedzi, ale teraz jest również dostępna w wyrażeniach powiązania danych.
Uwaga
Element członkowski elementu działa na potrzeby powiązania jednokierunkowego. Jeśli chcesz wykonać powiązanie dwukierunkowe, użyj elementu członkowskiego BindItem .
Obsługa funkcji IntelliSense w silnie typizowanym powiązaniu
Naciśnij klawisz F5 , aby uruchomić rozwiązanie i przejdź do strony Klienci, aby upewnić się, że zmiany działają zgodnie z oczekiwaniami.
Wyświetlanie szczegółów klienta
Zamknij przeglądarkę i wróć do programu Visual Studio.
Zadanie 2 . Wprowadzenie do powiązania modelu w Web Forms
W poprzednich wersjach ASP.NET Web Forms, gdy chcesz wykonać dwukierunkowe powiązanie danych, zarówno pobieranie i aktualizowanie danych, trzeba użyć obiektu Źródła danych. Może to być źródło danych obiektu, źródło danych SQL, źródło danych LINQ itd. Jeśli jednak w scenariuszu wymagany jest niestandardowy kod do obsługi danych, konieczne jest użycie źródła danych obiektu i spowodowało to pewne wady. Na przykład trzeba było uniknąć złożonych typów i trzeba było obsługiwać wyjątki podczas wykonywania logiki walidacji.
W nowej wersji ASP.NET Web Forms kontrolki powiązane z danymi obsługują powiązanie modelu. Oznacza to, że można określić metody wybierania, aktualizowania, wstawiania i usuwania bezpośrednio w kontrolce powiązanej z danymi w celu wywołania logiki z pliku za pomocą kodu lub z innej klasy.
Aby dowiedzieć się więcej na ten temat, użyjesz kontrolki GridView, aby wyświetlić listę kategorii produktów przy użyciu nowego atrybutu SelectMethod . Ten atrybut umożliwia określenie metody pobierania danych GridView.
Otwórz stronę Products.aspx i dołącz element GridView. Skonfiguruj element GridView, jak pokazano poniżej, aby używać silnie typicznych powiązań i włączyć sortowanie i stronicowanie.
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> <asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryID"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </asp:Content>Użyj nowego atrybutu SelectMethod , aby skonfigurować element GridView w celu wywołania metody GetCategories w celu wybrania danych.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>Otwórz plik Products.aspx.cs code-behind i dodaj następujące instrukcje using.
(Fragment kodu — Web Forms Lab — Ex01 — Przestrzenie nazw)
using System.Collections.Generic; using System.Data.Entity; using System.Data.Entity.Infrastructure; using System.Linq; using WebFormsLab.Model;Dodaj prywatny element członkowski w klasie Products i przypisz nowe wystąpienie elementu ProductsContext. Ta właściwość będzie przechowywać kontekst danych programu Entity Framework, który umożliwia nawiązanie połączenia z bazą danych.
public partial class Products : System.Web.UI.Page { private ProductsContext db = new ProductsContext(); ...Utwórz metodę GetCategories , aby pobrać listę kategorii przy użyciu LINQ. Zapytanie będzie zawierać właściwość Products , aby kontrolka GridView mogła wyświetlać ilość produktów dla każdej kategorii. Zwróć uwagę, że metoda zwraca nieprzetworzonego obiektu IQueryable, który reprezentuje zapytanie do wykonania w dalszej części cyklu życia strony.
(Fragment kodu — Web Forms Lab — Ex01 — GetCategories)
public IQueryable<Category> GetCategories() { var query = this.db.Categories .Include(c => c.Products); return query; }Uwaga
W poprzednich wersjach ASP.NET Web Forms włączanie sortowania i stronicowania przy użyciu własnej logiki repozytorium w kontekście źródła danych obiektu, wymagane do pisania własnego kodu niestandardowego i odbierania wszystkich niezbędnych parametrów. Teraz, ponieważ metody powiązania danych mogą zwracać zapytania IQueryable i reprezentuje to zapytanie, które nadal ma zostać wykonane, ASP.NET może dbać o modyfikowanie zapytania w celu dodania odpowiednich parametrów sortowania i stronicowania.
Naciśnij klawisz F5 , aby rozpocząć debugowanie witryny i przejdź do strony Produkty. Powinna zostać wyświetlona informacja, że element GridView jest wypełniany kategoriami zwróconymi przez metodę GetCategories.
Wypełnianie elementu GridView przy użyciu powiązania modelu
Naciśnij klawisze SHIFT+F5 Zatrzymaj debugowanie.
Zadanie 3 — Dostawcy wartości w powiązaniu modelu
Powiązanie modelu umożliwia nie tylko określenie metod niestandardowych do pracy z danymi bezpośrednio w kontrolce powiązanej z danymi, ale także umożliwia mapowanie danych ze strony na parametry z tych metod. W parametrze metody można użyć atrybutów dostawcy wartości, aby określić źródło danych wartości. Na przykład:
- Kontrolki na stronie
- Wartości ciągu zapytania
- Wyświetlanie danych
- Stan sesji
- Pliki cookie
- Dane formularza opublikowanego
- Wyświetl stan
- Dostawcy wartości niestandardowych są również obsługiwani
Jeśli użyto ASP.NET MVC 4, zauważysz, że obsługa powiązań modelu jest podobna. Rzeczywiście, te funkcje zostały pobrane z ASP.NET MVC i przeniesione do zestawu System.Web, aby móc ich używać również w Web Forms.
W tym zadaniu zaktualizujesz element GridView, aby filtrować wyniki według ilości produktów dla każdej kategorii, odbierając parametr filtru z powiązaniem modelu.
Wstecz na stronę Products.aspx.
W górnej części kontrolki GridView dodaj etykietę i pole ComboBox , aby wybrać liczbę produktów dla każdej kategorii, jak pokazano poniżej.
<h3>Categories</h3> <asp:Label ID="Label1" runat="server" AssociatedControlID="minProductsCount"> Show categories with at least this number of products: </asp:Label> <asp:DropDownList runat="server" ID="minProductsCount" AutoPostBack="true"> <asp:ListItem Value="" Text="-" /> <asp:ListItem Text="1" /> <asp:ListItem Text="3" /> <asp:ListItem Text="5" /> </asp:DropDownList> <br/>Dodaj element EmptyDataTemplate do elementu GridView, aby wyświetlić komunikat, gdy nie ma żadnych kategorii z wybraną liczbą produktów.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> <EmptyDataTemplate> No categories found with a product count of <%#: minProductsCount.SelectedValue %> </EmptyDataTemplate> </asp:GridView>Otwórz plik Products.aspx.cs code-behind i dodaj następującą instrukcję using.
using System.Web.ModelBinding;Zmodyfikuj metodę GetCategories , aby otrzymywać argument minProductsCount liczby całkowitej i filtrować zwrócone wyniki. W tym celu zastąp metodę następującym kodem.
(Fragment kodu — Web Forms Lab — Ex01 — GetCategories 2)
public IQueryable<Category> GetCategories([Control]int? minProductsCount) { var query = this.db.Categories .Include(c => c.Products); if (minProductsCount.HasValue) { query = query.Where(c => c.Products.Count >= minProductsCount); } return query; }Nowy atrybut [Control] w argumencie minProductsCount powiadomi ASP.NET, że jego wartość musi zostać wypełniona za pomocą kontrolki na stronie. ASP.NET wyszuka dowolną kontrolkę zgodną z nazwą argumentu (minProductsCount) i wykona niezbędne mapowanie i konwersję, aby wypełnić parametr wartością kontrolki.
Alternatywnie atrybut udostępnia przeciążony konstruktor, który umożliwia określenie kontrolki, z której ma być pobierana wartość.
Uwaga
Jednym z celów funkcji powiązania danych jest zmniejszenie ilości kodu, który należy napisać na potrzeby interakcji ze stroną. Oprócz dostawcy wartości [Control] można użyć innych dostawców powiązań modelu w parametrach metody. Niektóre z nich są wymienione w wprowadzeniu zadania.
Naciśnij klawisz F5 , aby rozpocząć debugowanie witryny i przejdź do strony Produkty. Wybierz wiele produktów z listy rozwijanej i zwróć uwagę na sposób aktualizacji kontrolki GridView.
Filtrowanie elementu GridView przy użyciu wartości listy rozwijanej
Zatrzymaj debugowanie.
Zadanie 4 . Używanie powiązania modelu do filtrowania
W tym zadaniu dodasz drugi element GridView podrzędny, aby wyświetlić produkty w wybranej kategorii.
Otwórz stronę Products.aspx i zaktualizuj kategorię GridView, aby automatycznie wygenerować przycisk Wybierz.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories" AutoGenerateSelectButton="true">Dodaj drugi element GridView o nazwie productsGrid u dołu. Ustaw wartość ItemType na WebFormsLab.Model.Product, wartości DataKeyNames na ProductId i SelectMethod na GetProducts. Ustaw wartość AutoGenerateColumns na wartość false i dodaj kolumny ProductId, ProductName, Description i UnitPrice.
<h3>Products</h3> <asp:GridView ID="productsGrid" runat="server" CellPadding="4" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Product" DataKeyNames="ProductId" SelectMethod="GetProducts"> <Columns> <asp:BoundField DataField="ProductId" HeaderText="ID" /> <asp:BoundField DataField="ProductName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" /> <asp:BoundField DataField="UnitPrice" HeaderText="Price" /> </Columns> <EmptyDataTemplate> Select a category above to see its products </EmptyDataTemplate> </asp:GridView>Otwórz plik Products.aspx.cs code-behind. Zaimplementuj metodę GetProducts , aby odebrać identyfikator kategorii z kategorii GridView i przefiltrować produkty. Powiązanie modelu spowoduje ustawienie wartości parametru przy użyciu wybranego wiersza w kategoriachSrid. Ponieważ nazwa argumentu i nazwa kontrolki nie są zgodne, należy określić nazwę kontrolki u dostawcy wartości kontrolki.
(Fragment kodu — Web Forms Lab — Ex01 — GetProducts)
public IEnumerable<Product> GetProducts([Control("categoriesGrid")]int? categoryId) { return this.db.Products.Where(p => p.CategoryId == categoryId); }Uwaga
Takie podejście ułatwia jednostkowe testowanie tych metod. W kontekście testu jednostkowego, w którym Web Forms nie jest wykonywana, atrybut [Control] nie wykona żadnej konkretnej akcji.
Otwórz stronę Products.aspx i znajdź produkty GridView. Zaktualizuj produkt GridView, aby wyświetlić link do edycji wybranego produktu.
<h3>Products</h3> <asp:GridView ID="productsGrid" runat="server" CellPadding="4" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Product" DataKeyNames="ProductId" SelectMethod="GetProducts"> <Columns> <asp:TemplateField> <ItemTemplate> <a href="ProductDetails.aspx?productId=<%#: Item.ProductId %>">View</a> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductId" HeaderText="ID" /> <asp:BoundField DataField="ProductName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" /> <asp:BoundField DataField="UnitPrice" HeaderText="Price" /> </Columns> <EmptyDataTemplate> Select a category above to see its products </EmptyDataTemplate> </asp:GridView>Otwórz stronę ProductDetails.aspx code-behind i zastąp metodę SelectProduct poniższym kodem.
(Fragment kodu — Web Forms Lab — Ex01 — SelectProduct, metoda)
public Product SelectProduct([QueryString]int? productId) { return this.db.Products.Find(productId); }Uwaga
Zwróć uwagę, że atrybut [QueryString] jest używany do wypełnienia parametru metody z parametru productId w ciągu zapytania.
Naciśnij klawisz F5 , aby rozpocząć debugowanie witryny i przejdź do strony Produkty. Wybierz dowolną kategorię z kategorii GridView i zwróć uwagę, że produkty GridView są aktualizowane.
Pokazywanie produktów z wybranej kategorii
Kliknij link Wyświetl w produkcie, aby otworzyć stronę ProductDetails.aspx.
Zwróć uwagę, że strona pobiera produkt z parametrem SelectMethod przy użyciu parametru productId z ciągu zapytania.
Wyświetlanie szczegółów produktu
Uwaga
Możliwość wpisywania opisu HTML zostanie zaimplementowana w następnym ćwiczeniu.
Zadanie 5 . Używanie powiązania modelu dla operacji aktualizacji
W poprzednim zadaniu użyto powiązania modelu głównie do wybierania danych. W tym zadaniu dowiesz się, jak używać powiązania modelu w operacjach aktualizacji.
Zaktualizujesz kategorie GridView, aby umożliwić użytkownikom aktualizowanie kategorii.
Otwórz stronę Products.aspx i zaktualizuj kategorie GridView, aby automatycznie wygenerować przycisk Edytuj i użyć nowego atrybutu UpdateMethod , aby określić metodę UpdateCategory w celu zaktualizowania wybranego elementu.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories" AutoGenerateSelectButton="true" AutoGenerateEditButton="true" UpdateMethod="UpdateCategory">Atrybut DataKeyNames w elemecie GridView definiuje, które są elementami członkowskimi, które jednoznacznie identyfikują obiekt powiązany z modelem, a zatem które są parametrami, które metoda aktualizacji powinna otrzymać co najmniej.
Otwórz plik Products.aspx.cs code-behind i zaimplementuj metodę UpdateCategory . Metoda powinna otrzymać identyfikator kategorii, aby załadować bieżącą kategorię, wypełnić wartości z elementu GridView, a następnie zaktualizować kategorię.
(Fragment kodu — Web Forms Lab — Ex01 — UpdateCategory)
public void UpdateCategory(int categoryId) { var category = this.db.Categories.Find(categoryId); this.TryUpdateModel(category); if (this.ModelState.IsValid) { this.db.SaveChanges(); } }Nowa metoda TryUpdateModel w klasie Page odpowiada za wypełnianie obiektu modelu przy użyciu wartości z kontrolek na stronie. W takim przypadku zastąpi zaktualizowane wartości z bieżącego wiersza GridView edytowanego w obiekcie kategorii .
Uwaga
W następnym ćwiczeniu wyjaśniono użycie elementu ModelState.IsValid do sprawdzania poprawności danych wprowadzonych przez użytkownika podczas edytowania obiektu.
Uruchom witrynę i przejdź do strony Produkty. Edytuj kategorię. Wpisz nową nazwę, a następnie kliknij przycisk Aktualizuj , aby utrwały zmiany.
Edytowanie kategorii
Ćwiczenie 2. Walidacja danych
W tym ćwiczeniu poznasz nowe funkcje sprawdzania poprawności danych w ASP.NET 4.5. W Web Forms wyewidencjonujesz nowe nietrudne funkcje sprawdzania poprawności. Adnotacje danych będą używane w klasach modelu aplikacji na potrzeby walidacji danych wejściowych użytkownika, a na koniec dowiesz się, jak włączyć lub wyłączyć walidację żądania do poszczególnych kontrolek na stronie.
Zadanie 1 — Nietrusywna walidacja
Formularze z złożonymi danymi, w tym modułami sprawdzania poprawności, zwykle generują zbyt dużo kodu JavaScript na stronie, co może reprezentować około 60% kodu. Po włączeniu walidacji niestrudzonej kod HTML będzie wyglądał czystszy i idier.
W tej sekcji włączysz walidację nietrusywną w ASP.NET, aby porównać kod HTML wygenerowany przez obie konfiguracje.
Otwórz program Visual Studio 2012 i otwórz rozwiązanie Begin znajdujące się w folderze Source\Ex2-Validation\Begin tego laboratorium. Alternatywnie możesz kontynuować pracę nad istniejącym rozwiązaniem z poprzedniego ćwiczenia.
Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. W tym celu w Eksplorator rozwiązań kliknij projekt WebFormsLabZarządzaj pakietami NuGet.
W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.
Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.
Uwaga
Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego należy uruchomić te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.
Naciśnij klawisz F5 , aby uruchomić aplikację internetową. Przejdź do strony Klienci i kliknij link Dodaj nowego klienta .
Kliknij prawym przyciskiem myszy stronę przeglądarki i wybierz opcję Wyświetl źródło , aby otworzyć kod HTML wygenerowany przez aplikację.
Wyświetlanie kodu HTML strony
Przewiń kod źródłowy strony i zwróć uwagę, że ASP.NET wstrzyknął kod JavaScript i moduły sprawdzania poprawności danych na stronie, aby wykonać walidacje i wyświetlić listę błędów.
Walidacja kodu JavaScript na stronie CustomerDetails
Zamknij przeglądarkę i wróć do programu Visual Studio.
Teraz włączysz nieuprawialne sprawdzanie poprawności. Otwórz Web.Config i znajdź klucz ValidationSettings:UnobtrusiveValidationMode w sekcji AppSettings. Ustaw wartość klucza na WebForms.
<configuration> ... <appSettings> <add key="aspnet:uselegacysynchronizationcontext" value="false" /> <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>Uwaga
Tę właściwość można również ustawić w zdarzeniu "Page_Load", jeśli chcesz włączyć nietruzną walidację tylko dla niektórych stron.
Otwórz plik CustomerDetails.aspx i naciśnij klawisz F5 , aby uruchomić aplikację internetową.
Naciśnij klawisz F12, aby otworzyć narzędzia deweloperskie IE. Po otwarciu narzędzi deweloperskich wybierz kartę skryptu. Wybierz pozycję CustomerDetails.aspx z menu i zanotuj, że skrypty wymagane do uruchomienia zapytania jQuery na stronie zostały załadowane do przeglądarki z witryny lokalnej.
Ładowanie plików JavaScript jQuery bezpośrednio z lokalnego serwera usług IIS
Zamknij przeglądarkę, aby powrócić do programu Visual Studio. Otwórz ponownie plik Site.Master i znajdź skryptManager. Dodaj właściwość EnableCdn atrybutu z wartością True. Spowoduje to wymusi załadowanie zapytania jQuery z adresu URL online, a nie z adresu URL witryny lokalnej.
Otwórz plik CustomerDetails.aspx w programie Visual Studio. Naciśnij klawisz F5, aby uruchomić witrynę. Po otwarciu programu Internet Explorer naciśnij klawisz F12, aby otworzyć narzędzia deweloperskie. Wybierz kartę Skrypt , a następnie przyjrzyj się liście rozwijanej. Zwróć uwagę, że pliki JavaScript jQuery nie są już ładowane z lokacji lokalnej, ale raczej z usługi jQuery CDN w trybie online.
Ładowanie plików JavaScript jQuery z sieci CDN
Otwórz ponownie kod źródłowy strony HTML, używając opcji Wyświetl źródło w przeglądarce. Zwróć uwagę, że włączenie niestrudyjnej weryfikacji ASP.NET zastąpiło wstrzyknięty kod JavaScript danymi — *atrybuty.
Nieuprawialny kod weryfikacji
Uwaga
W tym przykładzie pokazano, jak podsumowanie walidacji z adnotacjami danych zostało uproszczone tylko do kilku wierszy HTML i JavaScript. Wcześniej bez niestrudyjnej weryfikacji, tym więcej kontrolek walidacji dodajesz, tym większy będzie wzrost kodu sprawdzania poprawności języka JavaScript.
Zadanie 2 . Weryfikowanie modelu za pomocą adnotacji danych
ASP.NET 4.5 wprowadza walidację adnotacji danych dla Web Forms. Zamiast kontrolować walidację poszczególnych danych wejściowych, można teraz definiować ograniczenia w klasach modelu i używać ich we wszystkich aplikacjach internetowych. W tej sekcji dowiesz się, jak używać adnotacji danych do sprawdzania poprawności formularza nowego/edytowania klienta.
Otwórz stronę CustomerDetail.aspx . Zwróć uwagę, że imię i drugie imię klienta w sekcjach EditItemTemplate i InsertItemTemplate są weryfikowane przy użyciu kontrolek RequiredFieldValidator. Każdy moduł sprawdzania poprawności jest skojarzony z określonym warunkiem, dlatego należy uwzględnić dowolną liczbę modułów sprawdzania poprawności.
Dodaj adnotacje danych, aby zweryfikować klasę Modelu klienta. Otwórz klasę Customer.cs w folderze Model i dekoruj każdą właściwość przy użyciu atrybutów adnotacji danych.
(Fragment kodu — Web Forms Lab — Ex02 — Adnotacje danych)
namespace WebFormsLab.Model { using System.Collections.Generic; using System.ComponentModel.DataAnnotations; public class Customer { [Key] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Range(0, 130)] public int Age { get; set; } public Address Address { get; set; } [Phone] public string DaytimePhone { get; set; } [EmailAddress, StringLength(256)] public string EmailAddress { get; set; } } }Uwaga
.NET Framework 4.5 rozszerzyła istniejącą kolekcję adnotacji danych. Oto niektóre adnotacje danych, których można użyć: [CreditCard], [Phone], [EmailAddress], [Range], [Compare], [Url], [FileExtensions], [Required], [Key], [RegularExpression].
Przykłady użycia:
[Klucz]: Określa, że atrybut jest unikatowym identyfikatorem
[Range(0.4, 0.5, ErrorMessage="{Napisz komunikat o błędzie}"]: Podwójny zakres
[EmailAddress(ErrorMessage="Invalid Email"), MaxLength(56)]: Dwie adnotacje w tym samym wierszu.
Możesz również zdefiniować własne komunikaty o błędach w ramach każdego atrybutu.
Otwórz plik CustomerDetails.aspx i usuń wszystkie pola RequiredFieldValidator dla pól pierwszego i nazwiska w sekcjach EditItemTemplate i InsertItemTemplate kontrolki FormView.
<EditItemTemplate> <fieldset> <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" /> </p> <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" /> </p> ... <InsertItemTemplate> <fieldset> <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" /> </p> <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" /> </p> ...Uwaga
Jedną z zalet używania adnotacji danych jest to, że logika walidacji nie jest duplikowana na stronach aplikacji. Zdefiniujesz go raz w modelu i użyjesz go na wszystkich stronach aplikacji, które manipulują danymi.
Otwórz plik CustomerDetails.aspx code-behind i znajdź metodę SaveCustomer. Ta metoda jest wywoływana podczas wstawiania nowego klienta i odbiera parametr Customer z wartości kontrolki FormView. Gdy nastąpi mapowanie między kontrolkami strony a obiektem parametru, ASP.NET wykona walidację modelu względem wszystkich atrybutów adnotacji danych i wypełni słownik ModelState z napotkanymi błędami, jeśli istnieją.
Parametr ModelState.IsValid zwróci wartość true tylko wtedy, gdy wszystkie pola w modelu są prawidłowe po przeprowadzeniu walidacji.
public void SaveCustomer(Customer customer) { if (this.ModelState.IsValid) { using (var db = new ProductsContext()) { ...Dodaj kontrolkę ValidationSummary na końcu strony CustomerDetails, aby wyświetlić listę błędów modelu.
</fieldset> </InsertItemTemplate> </asp:FormView> <asp:ValidationSummary runat="server" ShowModelStateErrors="true" ForeColor="Red" HeaderText="Please check the following errors:"/> </asp:Content>Właściwość ShowModelStateErrors jest nową właściwością kontrolki ValidationSummary, która po ustawieniu wartości true kontrolka pokaże błędy ze słownika ModelState. Te błędy pochodzą z weryfikacji adnotacji danych.
Naciśnij klawisz F5 , aby uruchomić aplikację internetową. Wypełnij formularz kilkoma błędnymi wartościami i kliknij przycisk Zapisz , aby wykonać walidację. Zwróć uwagę na podsumowanie błędu u dołu.
Walidacja przy użyciu adnotacji danych
Zadanie 3 . Obsługa niestandardowych błędów bazy danych za pomocą klasy ModelState
W poprzedniej wersji Web Forms obsługa błędów bazy danych, takich jak zbyt długi ciąg lub unikatowe naruszenie klucza, może obejmować zgłaszanie wyjątków w kodzie repozytorium, a następnie obsługę wyjątków w kodzie w celu wyświetlenia błędu. Aby wykonać coś stosunkowo prostego, wymagana jest duża ilość kodu.
W Web Forms 4.5 obiekt ModelState może służyć do wyświetlania błędów na stronie z modelu lub z bazy danych w spójny sposób.
W tym zadaniu dodasz kod, aby prawidłowo obsługiwać wyjątki bazy danych i wyświetlić użytkownikowi odpowiedni komunikat przy użyciu obiektu ModelState.
Gdy aplikacja jest nadal uruchomiona, spróbuj zaktualizować nazwę kategorii przy użyciu zduplikowanej wartości.
Aktualizowanie kategorii ze zduplikowaną nazwą
Zwróć uwagę, że wyjątek jest zgłaszany z powodu ograniczenia "unikatowego" kolumny CategoryName .
Wyjątek dla zduplikowanych nazw kategorii
Zatrzymaj debugowanie. W pliku Products.aspx.cs code-behind zaktualizuj metodę UpdateCategory , aby obsłużyć wyjątki zgłaszane przez bazę danych. Wywołanie metody SaveChanges() i dodanie błędu do obiektu ModelState .
Nowa metoda TryUpdateModel aktualizuje obiekt kategorii pobrany z bazy danych przy użyciu danych formularza dostarczonych przez użytkownika.
(Fragment kodu — laboratorium Web Forms — Ex02 — Błędy obsługi updateCategory)
public void UpdateCategory(int categoryId) { var category = this.db.Categories.Find(categoryId); this.TryUpdateModel(category); if (this.ModelState.IsValid) { try { this.db.SaveChanges(); } catch (DbUpdateException) { var message = string.Format("A category with the name {0} already exists.", category.CategoryName); this.ModelState.AddModelError("CategoryName", message); } } }Uwaga
W idealnym przypadku należy zidentyfikować przyczynę błędu DbUpdateException i sprawdzić, czy główną przyczyną jest naruszenie ograniczenia unikatowego klucza.
Otwórz plik Products.aspx i dodaj kontrolkę ValidationSummary poniżej kategorii GridView, aby wyświetlić listę błędów modelu.
<asp:GridView ID="categoriesGrid" runat="server" ... </asp:GridView> <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowModelStateErrors="true" /> <h3>Products</h3>Uruchom witrynę i przejdź do strony Produkty. Spróbuj zaktualizować nazwę kategorii przy użyciu zduplikowanej wartości.
Zwróć uwagę, że wyjątek został obsłużony, a komunikat o błędzie pojawia się w kontrolce ValidationSummary .
Błąd zduplikowanej kategorii
Zadanie 4 . Walidacja żądania w ASP.NET Web Forms 4.5
Funkcja weryfikacji żądań w ASP.NET zapewnia pewien poziom domyślnej ochrony przed atakami skryptów między witrynami (XSS). W poprzednich wersjach ASP.NET walidacja żądania została domyślnie włączona i może być wyłączona tylko dla całej strony. Dzięki nowej wersji ASP.NET Web Forms można teraz wyłączyć walidację żądania dla pojedynczej kontrolki, przeprowadzić walidację leniwych żądań lub uzyskać dostęp do niezwalidowanych danych żądania (należy zachować ostrożność, jeśli to zrobisz!).
Naciśnij klawisze Ctrl+F5 , aby uruchomić witrynę bez debugowania i przejdź do strony Produkty. Wybierz kategorię, a następnie kliknij link Edytuj na dowolnym z produktów.
Wpisz opis zawierający potencjalnie niebezpieczną zawartość, na przykład tagi HTML. Zwróć uwagę na zgłoszony wyjątek z powodu weryfikacji żądania.
Edytowanie produktu z potencjalnie niebezpieczną zawartością
Zgłoszony wyjątek z powodu weryfikacji żądania
Zamknij stronę i w programie Visual Studio naciśnij klawisze SHIFT+F5 , aby zatrzymać debugowanie.
Otwórz stronę ProductDetails.aspx i znajdź pole tekstowe Opis .
Dodaj nową właściwość ValidateRequestMode do kontrolki TextBox i ustaw jej wartość na Wartość Disabled.
Nowy atrybut ValidateRequestMode umożliwia szczegółowe wyłączenie weryfikacji żądania dla każdej kontrolki. Jest to przydatne, gdy chcesz użyć danych wejściowych, które mogą odbierać kod HTML, ale chcesz zachować walidację działającą dla pozostałej części strony.
<p> <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>' ValidateRequestMode="Disabled" /> </p>Naciśnij klawisz F5 , aby uruchomić aplikację internetową. Otwórz ponownie stronę edytowania produktu i uzupełnij opis produktu, w tym tagi HTML. Zwróć uwagę, że możesz teraz dodać zawartość HTML do opisu.
Żądanie weryfikacji wyłączone dla opisu produktu
Uwaga
W aplikacji produkcyjnej należy odczytać kod HTML wprowadzony przez użytkownika, aby upewnić się, że wprowadzono tylko bezpieczne tagi HTML (na przykład nie <ma tagów skryptów> ). W tym celu można użyć biblioteki microsoft Web Protection.
Ponownie zmodyfikuj produkt. Wpisz kod HTML w polu Nazwa i kliknij przycisk Zapisz. Zwróć uwagę, że walidacja żądania jest wyłączona tylko dla pola Opis, a pozostałe pola są nadal weryfikowane pod kątem potencjalnie niebezpiecznej zawartości.
Walidacja żądania włączona w pozostałych polach
ASP.NET Web Forms 4.5 zawiera nowy tryb weryfikacji żądania w celu przeprowadzenia weryfikacji żądania w sposób leniwy. Jeśli w trybie weryfikacji żądania ustawiono wartość 4.5, jeśli fragment kodu uzyskuje dostęp do elementu Request.Form["key"], walidacja żądania ASP.NET 4.5 spowoduje wyzwolenie weryfikacji żądania tylko dla tego określonego elementu w kolekcji formularzy.
Ponadto ASP.NET 4.5 zawiera teraz podstawowe procedury kodowania z biblioteki Microsoft Anti-XSS Library 4.0. Procedury kodowania Anti-XSS są implementowane przez nowy typ AntiXssEncoder znaleziony w nowej przestrzeni nazw System.Web.Security.AntiXss . W przypadku parametru encoderType skonfigurowanego do używania antiXssEncoder wszystkie kodowanie danych wyjściowych w ASP.NET automatycznie używa nowych procedur kodowania.
ASP.NET weryfikacji żądań 4.5 obsługuje również niewalidowany dostęp do danych żądań. ASP.NET 4.5 dodaje nową właściwość kolekcji do obiektu HttpRequest o nazwie Unvalidated. Po przejściu do pliku HttpRequest.Unvalidated masz dostęp do wszystkich typowych elementów danych żądania, w tym formularzy, QueryStrings, Cookies, URL itd.
Request.Unvalidated, obiekt
Uwaga
Użyj właściwości HttpRequest.Unvalidated ostrożnie! Upewnij się, że starannie przeprowadzasz niestandardową walidację na nieprzetworzonych danych żądania, aby upewnić się, że niebezpieczny tekst nie jest zaokrąglony i renderowany z powrotem do nie podejrzewających klientów.
Ćwiczenie 3. Asynchroniczne przetwarzanie stron w ASP.NET Web Forms
W tym ćwiczeniu zapoznasz się z nowymi funkcjami asynchronicznego przetwarzania stron w ASP.NET Web Forms.
Zadanie 1 . Aktualizowanie strony szczegółów produktu w celu przekazania i pokazania obrazów
W tym zadaniu zaktualizujesz stronę szczegółów produktu, aby umożliwić użytkownikowi określenie adresu URL obrazu produktu i wyświetlenie go w widoku tylko do odczytu. Utworzysz lokalną kopię określonego obrazu, pobierając ją synchronicznie. W następnym zadaniu zaktualizujesz tę implementację, aby działała asynchronicznie.
Otwórz program Visual Studio 2012 i załaduj rozwiązanie Begin znajdujące się w folderze Source\Ex3-Async\Begin z tego laboratorium. Alternatywnie możesz kontynuować pracę nad istniejącym rozwiązaniem z poprzednich ćwiczeń.
Jeśli otwarto podane rozwiązanie Begin , przed kontynuowanie należy pobrać brakujące pakiety NuGet. W tym celu w Eksplorator rozwiązań kliknij projekt WebFormsLab i wybierz pozycję Zarządzaj pakietami NuGet.
W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć , aby pobrać brakujące pakiety.
Na koniec skompiluj rozwiązanie, klikając pozycjęKompiluj rozwiązanie kompilacji | .
Uwaga
Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium należy wykonać te kroki.
Otwórz źródło strony ProductDetails.aspx i dodaj pole w elemencie ItemTemplate obiektu FormView, aby wyświetlić obraz produktu.
<ItemTemplate> <fieldset> <p><b><asp:Label ID="Label2" runat="server" AssociatedControlID="itemProductName">Name:</asp:Label></b></p> <p><asp:Label runat="server" ID="itemProductName" Text='<%#: Item.ProductName %>' /></p> <p><b><asp:Label ID="Label3" runat="server" AssociatedControlID="itemDescription">Description (HTML):</asp:Label></b></p> <p><asp:Label runat="server" ID="itemDescription" Text='<%# Item.Description %>' /></p> <p><b><asp:Label ID="Label4" runat="server" AssociatedControlID="itemUnitPrice">Price:</asp:Label></b></p> <p><asp:Label runat="server" ID="itemUnitPrice" Text='<%#: Item.UnitPrice %>' /></p> <p><b><asp:Label ID="Label5" runat="server" AssociatedControlID="itemUnitPrice">Image:</asp:Label></b></p> <p> <img src="<%# string.IsNullOrEmpty(Item.ImagePath) ? "/Images/noimage.jpg" : Item.ImagePath %>" alt="Image" /> </p> <br /> <p> <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" /> <asp:HyperLink NavigateUrl="~/Products.aspx" Text="Back" runat="server" /> </p> </fieldset> </ItemTemplate>Dodaj pole, aby określić adres URL obrazu w elemecie EditTemplate obiektu FormView.
<fieldset> <p><asp:Label ID="Label2" runat="server" AssociatedControlID="ProductName">Name:</asp:Label></p> <p><asp:TextBox runat="server" ID="ProductName" Text='<%#: BindItem.ProductName %>' /></p> <p><asp:Label ID="Label3" runat="server" AssociatedControlID="Description">Description (HTML):</asp:Label></p> <p> <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>' ValidateRequestMode="Disabled" /> </p> <p><asp:Label ID="Label4" runat="server" AssociatedControlID="UnitPrice">Price:</asp:Label></p> <p><asp:TextBox runat="server" ID="UnitPrice" Text='<%#: BindItem.UnitPrice %>' /></p> <p><asp:Label ID="Label1" runat="server" AssociatedControlID="ImagePath">Image URL:</asp:Label></p> <p><asp:TextBox runat="server" ID="ImagePath" Text='<%#: BindItem.ImagePath %>' /></p> <br /> <p> <asp:Button runat="server" CommandName="Update" Text="Save" /> <asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" /> </p> </fieldset>Otwórz plik ProductDetails.aspx.cs code-behind i dodaj następujące dyrektywy przestrzeni nazw.
(Fragment kodu — Web Forms Lab — Ex03 — Przestrzenie nazw)
using System.IO; using System.Net; using System.Web;Utwórz metodę UpdateProductImage do przechowywania obrazów zdalnych w lokalnym folderze Images i zaktualizuj jednostkę produktu przy użyciu nowej wartości lokalizacji obrazu.
(Fragment kodu — Web Forms Lab — Ex03 — UpdateProductImage)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); using (var wc = new WebClient()) { wc.DownloadFile(imageUrl, Server.MapPath(product.ImagePath)); } } }Zaktualizuj metodę UpdateProduct , aby wywołać metodę UpdateProductImage .
(Fragment kodu — laboratorium Web Forms — Ex03 — Wywołanie UpdateProductImage)
public void UpdateProduct(int productId) { var product = this.db.Products.Find(productId); this.TryUpdateModel(product); this.UpdateProductImage(product); if (this.ModelState.IsValid) { this.db.SaveChanges(); } }Uruchom aplikację i spróbuj przekazać obraz dla produktu.
Ustawianie obrazu dla produktu
Zadanie 2 . Dodawanie przetwarzania asynchronicznego do strony szczegółów produktu
W tym zadaniu zaktualizujesz stronę szczegółów produktu, aby działała asynchronicznie. Rozszerzysz długotrwałe zadanie — proces pobierania obrazu — przy użyciu ASP.NET 4.5 asynchronicznego przetwarzania stron.
Metody asynchroniczne w aplikacjach internetowych mogą służyć do optymalizowania sposobu użycia pul wątków ASP.NET. W ASP.NET w puli wątków istnieje ograniczona liczba wątków do obsługi żądań, dlatego gdy wszystkie wątki są zajęte, ASP.NET zaczyna odrzucać nowe żądania, wysyła komunikaty o błędach aplikacji i sprawia, że witryna jest niedostępna.
Czasochłonne operacje w witrynie internetowej są doskonałymi kandydatami do programowania asynchronicznego, ponieważ zajmują przypisany wątek przez długi czas. Obejmuje to długotrwałe żądania, strony z wieloma różnymi elementami i stronami, które wymagają operacji offline, takich jak wykonywanie zapytań względem bazy danych lub uzyskiwanie dostępu do zewnętrznego serwera internetowego. Zaletą jest to, że jeśli używasz metod asynchronicznych dla tych operacji, podczas gdy strona jest przetwarzana, wątek jest zwalniany i zwracany do puli wątków i może służyć do udziału w nowym żądaniu strony. Oznacza to, że strona rozpocznie przetwarzanie w jednym wątku z puli wątków i może zakończyć przetwarzanie w innym po zakończeniu przetwarzania asynchronicznego.
Otwórz stronę ProductDetails.aspx . Dodaj atrybut Async w elemecie Page i ustaw go na wartość true. Ten atrybut informuje ASP.NET o zaimplementowaniu interfejsu IHttpAsyncHandler.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails" Async="true" %>Dodaj etykietę w dolnej części strony, aby wyświetlić szczegóły wątków uruchomionych na stronie.
<EmptyDataTemplate>Product not found</EmptyDataTemplate> </asp:FormView> <asp:Label ID="threadsMessageLabel" runat="server" /> </asp:Content>Otwórz plik ProductDetails.aspx.cs i dodaj następujące dyrektywy przestrzeni nazw.
(Fragment kodu — Web Forms Lab — Ex03 — Przestrzenie nazw 2)
using System.Web.UI; using System.Threading;Zmodyfikuj metodę UpdateProductImage , aby pobrać obraz za pomocą zadania asynchronicznego. Zastąp metodę WebClientDownloadFile metodą DownloadFileTaskAsync i dołączysz słowo kluczowe await .
(Fragment kodu — Web Forms Lab — Ex03 — UpdateProductImage Async)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); this.RegisterAsyncTask(new PageAsyncTask(async (t) => { using (var wc = new WebClient()) { await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath)); } })); } }Obiekt RegisterAsyncTask rejestruje nowe zadanie asynchroniczne strony do wykonania w innym wątku. Otrzymuje wyrażenie lambda z zadaniem (t) do wykonania. Słowo kluczowe await w metodzie DownloadFileTaskAsync konwertuje pozostałą część metody na wywołanie zwrotne wywoływane asynchronicznie po zakończeniu metody DownloadFileTaskAsync . ASP.NET wznowi wykonanie metody, automatycznie zachowując wszystkie oryginalne wartości żądania HTTP. Nowy model programowania asynchronicznego na platformie .NET 4.5 umożliwia pisanie asynchronicznego kodu, który wygląda bardzo podobnie jak kod synchroniczny, i umożliwia kompilatorowi obsługę komplikacji funkcji wywołania zwrotnego lub kodu kontynuacji.
Uwaga
RegisterAsyncTask i PageAsyncTask były już dostępne od wersji .NET 2.0. Słowo kluczowe await to nowe słowo kluczowe z modelu programowania asynchronicznego platformy .NET 4.5 i może być używane razem z nowymi metodami TaskAsync z obiektu .NET WebClient.
Dodaj kod, aby wyświetlić wątki, na których rozpoczęto i zakończono wykonywanie kodu. W tym celu zaktualizuj metodę UpdateProductImage przy użyciu następującego kodu.
(Fragment kodu — Web Forms Lab — Ex03 — Pokaż wątki)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); this.RegisterAsyncTask(new PageAsyncTask(async (t) => { var startThread = Thread.CurrentThread.ManagedThreadId; using (var wc = new WebClient()) { await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath)); } var endThread = Thread.CurrentThread.ManagedThreadId; this.threadsMessageLabel.Text = string.Format("Started on thread: {0}<br /> Finished on thread: {1}", startThread, endThread); })); } }Otwórz plik Web.config witryny sieci Web. Dodaj następującą zmienną appSetting.
<add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/>Naciśnij klawisz F5 , aby uruchomić aplikację i przekazać obraz produktu. Zwróć uwagę na identyfikator wątków, w których kod został uruchomiony i zakończony, może się różnić. Dzieje się tak, ponieważ zadania asynchroniczne są uruchamiane w osobnym wątku od puli wątków ASP.NET. Po zakończeniu zadania ASP.NET umieszcza zadanie z powrotem w kolejce i przypisuje dowolne z dostępnych wątków.
Pobieranie obrazu asynchronicznie
Uwaga
Ponadto możesz wdrożyć tę aplikację na platformie Azure w następującym dodatku B: Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy.
Podsumowanie
W tym praktycznym laboratorium zostały rozwiązane i pokazano następujące koncepcje:
- Używanie silnie typiowanych wyrażeń powiązań danych
- Korzystanie z nowych funkcji powiązania modelu w Web Forms
- Używanie dostawców wartości do mapowania danych strony do metod za pomocą kodu
- Używanie adnotacji danych na potrzeby walidacji danych wejściowych użytkownika
- Korzystaj z niestrudnej weryfikacji po stronie klienta za pomocą zapytania jQuery w Web Forms
- Implementowanie szczegółowej weryfikacji żądania
- Implementowanie asynchronicznego przetwarzania stron w Web Forms
Dodatek A: Instalowanie Visual Studio Express 2012 dla sieci Web
Można zainstalować Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje zawierają instrukcje opisane w krokach wymaganych do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.
Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Jeśli instalator platformy sieci Web został już zainstalowany, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Azure SDK" (Visual Studio Express 2012 for Web with Azure SDK).
Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej , nastąpi przekierowanie do pobrania i zainstalowania go najpierw.
Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.
Instalowanie Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów i kliknij przycisk Akceptuję , aby kontynuować.
Akceptowanie postanowień licencyjnych
Poczekaj na zakończenie procesu pobierania i instalacji.
Postęp instalacji
Po zakończeniu instalacji kliknij przycisk Zakończ.
Instalacja została ukończona
Kliknij przycisk Zakończ, aby zamknąć Instalatora platformy sieci Web.
Aby otworzyć Visual Studio Express dla sieci Web, przejdź do ekranu startowego i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.
Kafelek programu VS Express dla sieci Web
Dodatek B: publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy
W tym dodatku pokazano, jak utworzyć nową witrynę internetową w witrynie Azure Portal i opublikować aplikację uzyskaną za pomocą laboratorium, korzystając z funkcji publikowania web deploy udostępnionej przez platformę Azure.
Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Azure Portal
Przejdź do portalu zarządzania Azure i zaloguj się przy użyciu poświadczeń firmy Microsoft skojarzonych z subskrypcją.
Uwaga
Za pomocą platformy Azure możesz hostować 10 ASP.NET witryn internetowych bezpłatnie, a następnie skalować w miarę wzrostu ruchu. Możesz zarejestrować się tutaj.
Zaloguj się do portalu
Kliknij pozycję Nowy na pasku poleceń.
Tworzenie nowej witryny sieci Web
Kliknij pozycję Compute Web Site ( Obliczanie | witryny sieci Web). Następnie wybierz opcję Szybkie tworzenie . Podaj dostępny adres URL nowej witryny sieci Web i kliknij pozycję Utwórz witrynę sieci Web.
Uwaga
Platforma Azure jest hostem aplikacji internetowej działającej w chmurze, którą możesz kontrolować i zarządzać. Opcja Szybkie tworzenie umożliwia wdrożenie ukończonej aplikacji internetowej na platformie Azure spoza portalu. Nie obejmuje on kroków konfigurowania bazy danych.
Tworzenie nowej witryny sieci Web przy użyciu szybkiego tworzenia
Poczekaj na utworzenie nowej witryny sieci Web .
Po utworzeniu witryny sieci Web kliknij link w kolumnie ADRES URL . Sprawdź, czy nowa witryna sieci Web działa.
Przechodzenie do nowej witryny sieci Web
Uruchomiona witryna sieci Web
Wstecz do portalu i kliknij nazwę witryny sieci Web w kolumnie Nazwa, aby wyświetlić strony zarządzania.
Otwieranie stron zarządzania witrynami sieci Web
Na stronie Pulpit nawigacyjny w sekcji Szybki rzut oka kliknij link Pobierz profil publikowania .
Uwaga
Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji internetowej na platformie Azure dla każdej metody publikacji z włączoną obsługą. Profil publikowania zawiera adresy URL, poświadczenia użytkownika i ciągi bazy danych wymagane do nawiązania połączenia z poszczególnymi punktami końcowymi, dla których jest włączona metoda publikacji. Program Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Program Microsoft Visual Studio 2012 obsługują odczytywanie profilów publikowania w celu zautomatyzowania konfiguracji tych programów do publikowania aplikacji internetowych na platformie Azure.
Pobieranie profilu publikowania witryny sieci Web
Pobierz plik profilu publikowania do znanej lokalizacji. W tym ćwiczeniu zobaczysz, jak używać tego pliku do publikowania aplikacji internetowej na platformie Azure z poziomu programu Visual Studio.
Zapisywanie pliku profilu publikowania
Zadanie 2 — Konfigurowanie serwera bazy danych
Jeśli aplikacja korzysta z SQL Server baz danych, musisz utworzyć serwer SQL Database. Jeśli chcesz wdrożyć prostą aplikację, która nie używa SQL Server możesz pominąć to zadanie.
Do przechowywania bazy danych aplikacji będzie potrzebny serwer SQL Database. Serwery SQL Database można wyświetlić z subskrypcji w portalu zarządzania Azure napulpicie nawigacyjnym serwera | baz danych | Sql. Jeśli nie masz utworzonego serwera, możesz go utworzyć przy użyciu przycisku Dodaj na pasku poleceń. Zanotuj nazwę i adres URL serwera, nazwę logowania administratora i hasło, ponieważ będą one używane w następnych zadaniach. Nie twórz jeszcze bazy danych, ponieważ zostanie ona utworzona w późniejszym etapie.
Pulpit nawigacyjny serwera SQL Database
W następnym zadaniu przetestujesz połączenie z bazą danych z programu Visual Studio, dlatego musisz uwzględnić lokalny adres IP na liście dozwolonych adresów IP serwera. Aby to zrobić, kliknij przycisk Konfiguruj, wybierz adres IP z bieżącego adresu IP klienta i wklej go w polach tekstowych Początkowy adres IP i Końcowy adres IP , a następnie kliknij
.
Dodawanie adresu IP klienta
Po dodaniu adresu IP klienta do listy dozwolonych adresów IP kliknij pozycję Zapisz , aby potwierdzić zmiany.
Potwierdzanie zmian
Zadanie 3 . Publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy
Wstecz do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt witryny internetowej i wybierz polecenie Publikuj.
Publikowanie witryny sieci Web
Zaimportuj profil publikowania zapisany w pierwszym zadaniu.
Importowanie profilu publikowania
Kliknij pozycję Zweryfikuj połączenie. Po zakończeniu walidacji kliknij przycisk Dalej.
Uwaga
Walidacja zostanie ukończona po wyświetleniu zielonego znacznika wyboru obok przycisku Weryfikuj połączenie.
Weryfikowanie połączenia
Na stronie Ustawienia w sekcji Bazy danych kliknij przycisk obok pola tekstowego połączenia bazy danych (tj. DefaultConnection).
Konfiguracja narzędzia Web Deploy
Skonfiguruj połączenie z bazą danych w następujący sposób:
W polu Nazwa serwera wpisz adres URL serwera SQL Database przy użyciu prefiksu tcp: .
W polu Nazwa użytkownika wpisz nazwę logowania administratora serwera.
W polu Hasło wpisz hasło logowania administratora serwera.
Wpisz nową nazwę bazy danych.
Konfigurowanie docelowych parametrów połączenia
Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk Tak.
Tworzenie bazy danych
Parametry połączenia, których użyjesz do nawiązania połączenia z SQL Database na platformie Azure, są wyświetlane w polu tekstowym Domyślne połączenie. Następnie kliknij przycisk Dalej.
Parametry połączenia wskazujące SQL Database
Na stronie Podgląd kliknij pozycję Publikuj.
Publikowanie aplikacji internetowej
Po zakończeniu procesu publikowania domyślna przeglądarka otworzy opublikowaną witrynę internetową.
Dodatek C: Używanie fragmentów kodu
Dzięki fragmentom kodu masz cały potrzebny kod na wyciągnięcie ręki. Dokument laboratorium zawiera informacje o tym, kiedy można ich używać, jak pokazano na poniższej ilustracji.
Wstawianie kodu do projektu przy użyciu fragmentów kodu w programie Visual Studio Code
Aby dodać fragment kodu przy użyciu klawiatury (tylko w języku C#)
- Umieść kursor, w którym chcesz wstawić kod.
- Zacznij wpisywać nazwę fragmentu kodu (bez spacji lub łączników).
- Obserwuj, jak funkcja IntelliSense wyświetla pasujące nazwy fragmentów kodu.
- Wybierz poprawny fragment kodu (lub kontynuuj wpisywanie do momentu wybrania nazwy całego fragmentu kodu).
- Naciśnij dwukrotnie klawisz Tab, aby wstawić fragment kodu w lokalizacji kursora.
Zacznij wpisywać nazwę fragmentu kodu
Naciśnij klawisz Tab, aby wybrać wyróżniony fragment kodu
Naciśnij ponownie klawisz Tab, a fragment kodu zostanie rozwinąć
Aby dodać fragment kodu przy użyciu myszy (C#, Visual Basic i XML) 1. Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu.
- Wybierz pozycję Wstaw fragment kodu , a następnie pozycję Moje fragmenty kodu.
- Wybierz odpowiedni fragment kodu z listy, klikając go.
fragment kodu fragment kodu
Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu, a następnie wybierz polecenie Wstaw fragment kodu
Wybierz odpowiedni fragment kodu z listy, klikając go
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla