Udostępnij za pośrednictwem

Wprowadzenie ASP.NET stron internetowych — wprowadzanie danych bazy danych przy użyciu formularzy

  • Artykuł

– autor Tom FitzMacken

W tym samouczku przedstawiono sposób tworzenia formularza wpisu, a następnie wprowadzania danych pobieranych z formularza do tabeli bazy danych podczas korzystania z ASP.NET Web Pages (Razor). Przyjęto założenie, że seria została ukończona za pomocą języka Basics of HTML Forms w usłudze ASP.NET Web Pages.

Zawartość:

  • Więcej informacji na temat przetwarzania formularzy wejściowych.
  • Jak dodać (wstawić) dane w bazie danych.
  • Jak upewnić się, że użytkownicy wprowadzili wymaganą wartość w formularzu (jak zweryfikować dane wejściowe użytkownika).
  • Jak wyświetlić błędy walidacji.
  • Jak przejść do innej strony z bieżącej strony.

Omówione funkcje/technologie:

  • Metoda Database.Execute .
  • Instrukcja SQL Insert Into
  • Pomocnik Validation .
  • Metoda Response.Redirect .

Co utworzysz

We wcześniejszym samouczku pokazano, jak utworzyć bazę danych, wprowadzono dane bazy danych, edytując bazę danych bezpośrednio w programie WebMatrix, pracując w obszarze roboczym Baza danych . W większości aplikacji nie jest to jednak praktyczny sposób umieszczania danych w bazie danych. W tym samouczku utworzysz interfejs internetowy, który umożliwia wprowadzanie danych lub wszystkim osobom i zapisywanie ich w bazie danych.

Utworzysz stronę, na której można wprowadzać nowe filmy. Strona będzie zawierać formularz wprowadzania zawierający pola (pola tekstowe), w którym można wprowadzić tytuł filmu, gatunek i rok. Strona będzie wyglądać następująco:

Strona

Pola tekstowe będą elementami HTML <input> , które będą wyglądać podobnie do tego znacznika:

<input type="text" name="genre" value="" />

Tworzenie podstawowego formularza wpisu

Utwórz stronę o nazwie AddProduct.cshtml.

Zastąp zawartość pliku następującym znacznikiem. Zastąp wszystko; Wkrótce dodasz blok kodu u góry.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

W tym przykładzie przedstawiono typowy kod HTML do tworzenia formularza. Używa <input> elementów pól tekstowych i przycisku przesyłania. Podpisy pól tekstowych są tworzone przy użyciu standardowych <label> elementów. Elementy <fieldset> i <legend> umieszczają ładne pole wokół formularza.

Zwróć uwagę, <form> że na tej stronie element używa post jako wartości atrybutu method . W poprzednim samouczku utworzono formularz, który używał get metody . To było poprawne, ponieważ mimo że formularz przesłał wartości do serwera, żądanie nie wprowadzało żadnych zmian. Wszystko, co zrobiło, to pobieranie danych na różne sposoby. Jednak na tej stronie wprowadzisz zmiany — dodasz nowe rekordy bazy danych. W związku z tym ten formularz powinien używać post metody . (Aby uzyskać więcej informacji na temat różnic między operacjami GET i POST , zobaczpasek boczny GET, POST i HTTP Verb Safety w poprzednim samouczku).

Należy pamiętać, że każde pole tekstowe ma name element (title, genre, year). Jak pokazano w poprzednim samouczku, te nazwy są ważne, ponieważ musisz mieć te nazwy, aby później można było uzyskać dane wejściowe użytkownika. Możesz użyć dowolnych nazw. Warto użyć znaczących nazw, które ułatwiają zapamiętanie danych, z którymi pracujesz.

Atrybut value każdego <input> elementu zawiera bit kodu Razor (na przykład Request.Form["title"]). W poprzednim samouczku przedstawiono wersję tego sztuczki, aby zachować wartość wprowadzoną w polu tekstowym (jeśli istnieje) po przesłaniu formularza.

Pobieranie wartości formularza

Następnie dodasz kod, który przetwarza formularz. W konspekcie wykonasz następujące czynności:

  1. Sprawdź, czy strona jest publikowana (została przesłana). Chcesz, aby kod był uruchamiany tylko wtedy, gdy użytkownik kliknął przycisk, a nie po pierwszym uruchomieniu strony.
  2. Pobierz wartości wprowadzone przez użytkownika w polach tekstowych. W takim przypadku, ponieważ formularz używa czasownika POST , uzyskujesz wartości formularza z Request.Form kolekcji.
  3. Wstaw wartości jako nowy rekord w tabeli bazy danych Filmy .

W górnej części pliku dodaj następujący kod:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];
    }
}

Kilka pierwszych wierszy tworzy zmienne (title, genrei year) do przechowywania wartości z pól tekstowych. Wiersz if(IsPost) zapewnia, że zmienne są ustawiane tylko wtedy, gdy użytkownicy klikają przycisk Dodaj film — czyli po opublikowaniu formularza.

Jak pokazano we wcześniejszym samouczku, uzyskasz wartość pola tekstowego przy użyciu wyrażenia, takiego jak Request.Form["name"], gdzie nazwa jest nazwą <input> elementu.

Nazwy zmiennych (title, genrei year) są dowolne. Podobnie jak nazwy przypisywane do <input> elementów, możesz wywoływać je w dowolny sposób. (Nazwy zmiennych nie muszą być zgodne z <input> atrybutami nazw elementów w formularzu). Jednak tak jak w przypadku <input> elementów, dobrym pomysłem jest użycie nazw zmiennych, które odzwierciedlają dane, które zawierają. Podczas pisania kodu spójne nazwy ułatwiają zapamiętanie danych, z których pracujesz.

Dodawanie danych do bazy danych

W właśnie dodanym bloku kodu tuż wewnątrz zamykającego nawiasu klamrowego ( } ) if bloku (nie tylko wewnątrz bloku kodu) dodaj następujący kod:

var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);

Ten przykład jest podobny do kodu użytego w poprzednim samouczku do pobierania i wyświetlania danych. Wiersz rozpoczynający się od db = otwiera bazę danych, podobnie jak poprzednio, a następny wiersz ponownie definiuje instrukcję SQL, jak pokazano wcześniej. Jednak tym razem definiuje instrukcję SQL Insert Into . W poniższym przykładzie przedstawiono ogólną składnię Insert Into instrukcji :

INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)

Innymi słowy, należy określić tabelę do wstawiania, a następnie wyświetlić listę kolumn do wstawiania, a następnie wyświetlić listę wartości do wstawienia. (Jak wspomniano wcześniej, język SQL nie uwzględnia wielkości liter, ale niektóre osoby wielką literą tworzą słowa kluczowe, aby ułatwić odczytywanie polecenia).

Wstawione kolumny są już wyświetlane w poleceniu — (Title, Genre, Year). Interesującą częścią jest sposób pobierania wartości z pól tekstowych do VALUES części polecenia. Zamiast rzeczywistych wartości zobaczysz @0symbole zastępcze , @1i @2, które są oczywiście symbolami zastępczymi. Po uruchomieniu polecenia (w db.Execute wierszu) przekazujesz wartości pochodzące z pól tekstowych.

Ważne! Pamiętaj, że jedynym sposobem, w jaki kiedykolwiek powinno być dołączenie danych w trybie online przez użytkownika w instrukcji SQL, jest użycie symboli zastępczych, jak pokazano tutaj (VALUES(@0, @1, @2)). Jeśli połączysz dane wejściowe użytkownika z instrukcją SQL, otworzysz się na atak polegający na wstrzyknięciu kodu SQL, zgodnie z opisem w temacie Podstawy formularza w usłudze ASP.NET Web Pages (poprzedni samouczek).

Nadal wewnątrz if bloku dodaj następujący wiersz po db.Execute wierszu:

Response.Redirect("~/Movies");

Po wstawieniu nowego filmu do bazy danych ten wiersz przeskoczy Cię (przekierowuje) do strony Filmy , aby zobaczyć wprowadzony film. Operator ~ oznacza "katalog główny witryny internetowej". (Operator ~ działa tylko na stronach ASP.NET, a nie w kodzie HTML.

Kompletny blok kodu wygląda następująco:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];

        var db = Database.Open("WebPagesMovies");
        var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
        db.Execute(insertCommand, title, genre, year);
        Response.Redirect("~/Movies");
    }
}

Testowanie polecenia Insert (do tej pory)

Nie skończysz jeszcze, ale teraz jest dobry czas na przetestowanie.

W widoku drzewa plików w programie WebMatrix kliknij prawym przyciskiem myszy stronę AddServer.cshtml , a następnie kliknij polecenie Uruchom w przeglądarce.

Zrzut ekranu przedstawia stronę

(Jeśli w przeglądarce znajduje się inna strona, upewnij się, że adres URL to http://localhost:nnnnn/AddMovie), gdzie nnnnn to numer portu, którego używasz).

Czy została wyświetlona strona błędu? Jeśli tak, dokładnie przeczytaj go i upewnij się, że kod wygląda dokładnie tak, co zostało wymienione wcześniej.

Wprowadź film w formularzu — na przykład użyj wartości "Citizen Kane", "Drama" i "1941". (Lub cokolwiek innego). Następnie kliknij pozycję Dodaj film.

Jeśli wszystko pójdzie dobrze, nastąpi przekierowanie do strony Filmy . Upewnij się, że na liście znajduje się nowy film.

Strona filmów przedstawiająca nowo dodany film

Weryfikowanie danych wejściowych użytkownika

Wstecz na stronę AddTronic lub uruchom ją ponownie. Wprowadź kolejny film, ale tym razem wprowadź tylko tytuł — na przykład wprowadź "Singin' in the Rain". Następnie kliknij pozycję Dodaj film.

Nastąpi ponowne przekierowanie do strony Filmy . Nowy film można znaleźć, ale jest niekompletny.

Strona filmów przedstawiająca nowy film, który brakuje niektórych wartości

Po utworzeniu tabeli Filmy jawnie powiedziano, że żadne z pól nie może mieć wartości null. W tym miejscu masz formularz wpisu dla nowych filmów i pozostawiasz pola puste. Jest to błąd.

W takim przypadku baza danych nie zgłosiła (lub zgłosiła) błędu. Nie podasz gatunku ani roku, więc kod na stronie AddFilm potraktował te wartości jako tak zwane puste ciągi. Po uruchomieniu polecenia SQL Insert Into pola gatunku i roku nie miały przydatnych danych, ale nie miały wartości null.

Oczywiście nie chcesz zezwalać użytkownikom na wprowadzanie do bazy danych półpustych informacji o filmie. Rozwiązaniem jest zweryfikowanie danych wejściowych użytkownika. Początkowo walidacja po prostu upewni się, że użytkownik wprowadził wartość dla wszystkich pól (czyli że żaden z nich nie zawiera pustego ciągu).

Porada

Ciągi o wartości null i puste

W programowaniu istnieje rozróżnienie między różnymi pojęciami "bez wartości". Ogólnie rzecz biorąc, wartość ma wartość null , jeśli nigdy nie została ustawiona lub zainicjowana w jakikolwiek sposób. Natomiast zmienna, która oczekuje danych znaków (ciągów) może być ustawiona na pusty ciąg. W takim przypadku wartość nie ma wartości null; Została ona po prostu jawnie ustawiona na ciąg znaków, którego długość wynosi zero. Te dwie instrukcje pokazują różnicę:

var firstName;       // Not set, so its value is null
var firstName = "";  // Explicitly set to an empty string -- not null

Jest to nieco bardziej skomplikowane, ale ważnym punktem jest to, że null reprezentuje rodzaj nieokreślonego stanu.

Teraz i wtedy ważne jest, aby dokładnie zrozumieć, kiedy wartość ma wartość null i kiedy jest to tylko pusty ciąg. W kodzie strony AddFilm uzyskasz wartości pól tekstowych przy użyciu i Request.Form["title"] tak dalej. Po pierwszym uruchomieniu strony (przed kliknięciem przycisku) wartość ma wartość Request.Form["title"] null. Ale po przesłaniu formularza Request.Form["title"] pobiera wartość pola tekstowego title . Nie jest oczywiste, ale puste pole tekstowe nie ma wartości null; po prostu ma w nim pusty ciąg. Dlatego gdy kod jest uruchamiany w odpowiedzi na kliknięcie przycisku, Request.Form["title"] ma w nim pusty ciąg.

Dlaczego to rozróżnienie jest ważne? Po utworzeniu tabeli Filmy jawnie powiedziano, że żadne z pól nie może mieć wartości null. Ale tutaj masz formularz wpisu dla nowych filmów i pozostawiasz pola puste. Można się spodziewać, że baza danych będzie narzekać podczas próby zapisania nowych filmów, które nie miały wartości dla gatunku lub roku. Ale to jest punkt — nawet jeśli pozostawisz te pola tekstowe puste, wartości nie mają wartości null; są pustymi ciągami. W związku z tym możesz zapisać nowe filmy w bazie danych z pustymi kolumnami — ale nie null! — wartości. W związku z tym należy upewnić się, że użytkownicy nie przesyłają pustego ciągu, co można zrobić, sprawdzając dane wejściowe użytkownika.

Pomocnik weryfikacji

ASP.NET strony sieci Web zawierają pomocnika — Validation pomocnika — którego można użyć, aby upewnić się, że użytkownicy wprowadzają dane spełniające twoje wymagania. Pomocnik Validation jest jednym z pomocników wbudowanych w ASP.NET stron internetowych, więc nie musisz instalować go jako pakietu przy użyciu narzędzia NuGet, tak jak zainstalowano pomocnika Gravatar we wcześniejszym samouczku.

Aby zweryfikować dane wejściowe użytkownika, wykonaj następujące czynności:

  • Użyj kodu, aby określić, że chcesz wymagać wartości w polach tekstowych na stronie.
  • Przeprowadź test w kodzie, aby informacje o filmie zostały dodane do bazy danych tylko wtedy, gdy wszystko zostanie prawidłowo zweryfikowane.
  • Dodaj kod do znaczników, aby wyświetlić komunikaty o błędach.

W bloku kodu na stronie AddFilm w górę w górę przed deklaracjami zmiennych dodaj następujący kod:

Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");

Należy wywołać jednokrotne wywołanie Validation.RequireField dla każdego pola (<input> elementu), w którym chcesz wymagać wpisu. Możesz również dodać niestandardowy komunikat o błędzie dla każdego wywołania, jak pokazano tutaj. (Urozmaiciliśmy wiadomości, aby pokazać, że możesz umieścić tam wszystko, co lubisz).

Jeśli wystąpi problem, chcesz uniemożliwić wstawienie nowych informacji o filmie do bazy danych. if(IsPost) W bloku użyj && (logiczneGO I), aby dodać kolejny warunek, który testuje Validation.IsValid(). Po zakończeniu cały if(IsPost) blok wygląda następująco:

if(IsPost && Validation.IsValid()){
    title = Request.Form["title"];
    genre = Request.Form["genre"];
    year = Request.Form["year"];

    var db = Database.Open("WebPagesMovies");
    var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
    db.Execute(insertCommand, title, genre, year);
    Response.Redirect("~/Movies");
}

Jeśli występuje błąd walidacji z dowolnymi polami zarejestrowanymi przy użyciu Validation pomocnika, Validation.IsValid metoda zwraca wartość false. W takim przypadku żaden z kodu w tym bloku nie zostanie uruchomiony, więc żadne nieprawidłowe wpisy filmowe nie zostaną wstawione do bazy danych. Oczywiście nie nastąpi przekierowanie do strony Filmy .

Kompletny blok kodu, w tym kod weryfikacyjny, wygląda teraz następująco:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

Wyświetlanie błędów walidacji

Ostatnim krokiem jest wyświetlenie komunikatów o błędach. Poszczególne komunikaty można wyświetlić dla każdego błędu weryfikacji lub wyświetlić podsumowanie lub oba te komunikaty. W tym samouczku wykonasz obie czynności, aby zobaczyć, jak to działa.

Obok każdego <input> elementu, który jest weryfikowany, wywołaj metodę Html.ValidationMessage i przekaż jej nazwę <input> elementu, który jest weryfikowany. Umieść metodę w prawo, Html.ValidationMessage w której ma zostać wyświetlony komunikat o błędzie. Po uruchomieniu strony metoda renderuje <span> element, Html.ValidationMessage w którym zostanie zwrócony błąd weryfikacji. (Jeśli nie ma błędu, <span> element jest renderowany, ale nie ma w nim tekstu).

Zmień znaczniki na stronie, tak aby zawierała metodę Html.ValidationMessage dla każdego z trzech <input> elementów na stronie, jak w tym przykładzie:

<p><label for="title">Title:</label>
     <input type="text" name="title" value="@Request.Form["title"]" />
      @Html.ValidationMessage("title")
  </p>

  <p><label for="genre">Genre:</label>
     <input type="text" name="genre" value="@Request.Form["genre"]" />
      @Html.ValidationMessage("genre")
  </p>

  <p><label for="year">Year:</label>
     <input type="text" name="year" value="@Request.Form["year"]" />
      @Html.ValidationMessage("year")
  </p>

Aby zobaczyć, jak działa podsumowanie, dodaj również następujący znacznik i kod bezpośrednio po <h1>Add a Movie</h1> elemecie na stronie:

@Html.ValidationSummary()

Domyślnie Html.ValidationSummary metoda wyświetla wszystkie komunikaty weryfikacji na liście ( <ul> element, który znajduje się wewnątrz <div> elementu). Podobnie jak w przypadku Html.ValidationMessage metody, znaczniki podsumowania weryfikacji są zawsze renderowane. Jeśli nie ma żadnych błędów, nie są renderowane żadne elementy listy.

Podsumowanie może być alternatywnym sposobem wyświetlania komunikatów weryfikacji zamiast przy użyciu Html.ValidationMessage metody wyświetlania każdego błędu specyficznego dla pola. Możesz też użyć podsumowania i szczegółów. Możesz też użyć Html.ValidationSummary metody , aby wyświetlić ogólny błąd, a następnie użyć poszczególnych Html.ValidationMessage wywołań, aby wyświetlić szczegóły.

Kompletna strona wygląda teraz następująco:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
          @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

To wszystko. Teraz możesz przetestować stronę, dodając film, ale pomijając co najmniej jedno pole. Po wykonaniu tej czynności zostanie wyświetlony następujący komunikat o błędzie:

Dodawanie strony filmowej z komunikatami o błędach weryfikacji

Stylowanie komunikatów o błędach weryfikacji

Widać, że są komunikaty o błędach, ale naprawdę nie wyróżniają się bardzo dobrze. Istnieje jednak łatwy sposób na styl komunikatów o błędach.

Aby utworzyć styl poszczególnych komunikatów o błędach wyświetlanych przez Html.ValidationMessageprogram , utwórz klasę stylu CSS o nazwie field-validation-error. Aby zdefiniować wyszukiwanie podsumowania walidacji, utwórz klasę stylu CSS o nazwie validation-summary-errors.

Aby zobaczyć, jak działa ta technika, dodaj <style> element wewnątrz <head> sekcji strony. Następnie zdefiniuj klasy stylów o nazwie field-validation-error i validation-summary-errors zawierające następujące reguły:

<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
  <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>

Zwykle prawdopodobnie informacje o stylu można umieścić w osobnym pliku css , ale dla uproszczenia można je umieścić na stronie na razie. (W dalszej części tego zestawu samouczków przeniesiesz reguły CSS do oddzielnego pliku css ).

Jeśli wystąpi błąd walidacji, Html.ValidationMessage metoda renderuje <span> element, który zawiera class="field-validation-error"element . Dodając definicję stylu dla tej klasy, można skonfigurować wygląd komunikatu. Jeśli występują błędy, ValidationSummary metoda podobnie dynamicznie renderuje atrybut class="validation-summary-errors".

Uruchom ponownie stronę i celowo pozostaw kilka pól. Błędy są teraz bardziej zauważalne. (W rzeczywistości są one overdone, ale to tylko pokazać, co można zrobić).

Dodaj stronę Film z wyświetlonymi błędami walidacji, które zostały stylizowane

Dodawanie linku do strony filmów

Jednym z ostatnich kroków jest zapewnienie wygody, aby przejść do strony AddFilm z oryginalnej listy filmów.

Otwórz ponownie stronę Filmy . Po tagu zamykającym </div> , który jest zgodny z WebGrid pomocnikiem, dodaj następujący znacznik:

<p>
  <a href="~/AddMovie">Add a movie</a>
</p>

Jak pokazano wcześniej, ASP.NET interpretuje ~ operator jako katalog główny witryny internetowej. Nie musisz używać ~ operatora. Możesz użyć znaczników <a href="./AddMovie">Add a movie</a> lub innego sposobu, aby zdefiniować ścieżkę, którą rozumie kod HTML. ~ Jednak operator jest dobrym ogólnym podejściem podczas tworzenia linków dla stron Razor, ponieważ sprawia, że witryna jest bardziej elastyczna — jeśli przeniesiesz bieżącą stronę do podfolderu, link będzie nadal przechodzić do strony AddFilm. (Pamiętaj, że ~ operator działa tylko na stronach cshtml . ASP.NET go rozumie, ale nie jest to standardowy kod HTML).

Po zakończeniu uruchom stronę Filmy . Będzie ona wyglądać następująco:

Strona filmów z linkiem do strony

Kliknij link Dodaj film, aby upewnić się, że przechodzi do strony AddFilm .

Następny etap

W następnym samouczku dowiesz się, jak umożliwić użytkownikom edytowanie danych już w bazie danych.

Ukończ listę dla strony AddShell

@{

    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
      <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
         @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Dodatkowe zasoby

WsteczDalej