Wprowadzenie do pracy z bazą danych w witrynach ASP.NET Web Pages (Razor)

Autor: Tom FitzMacken

W tym artykule opisano sposób używania narzędzi Microsoft WebMatrix do tworzenia bazy danych w witrynie internetowej ASP.NET Web Pages (Razor) oraz tworzenia stron, które umożliwiają wyświetlanie, dodawanie, edytowanie i usuwanie danych.

Czego nauczysz się:

  • Jak utworzyć bazę danych.
  • Jak nawiązać połączenie z bazą danych.
  • Jak wyświetlać dane na stronie internetowej.
  • Jak wstawiać, aktualizować i usuwać rekordy bazy danych.

Oto funkcje wprowadzone w artykule:

  • Praca z bazą danych Microsoft SQL Server Compact Edition.
  • Praca z zapytaniami SQL.
  • Klasa Database.

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 2

Ten samouczek działa również z programem WebMatrix 3. Można użyć ASP.NET Web Pages 3 i Visual Studio 2013 (lub Visual Studio Express 2013 for Web); interfejs użytkownika będzie jednak inny.

Wprowadzenie do baz danych

Wyobraź sobie typową książkę adresową. Dla każdego wpisu w książce adresowej (czyli dla każdej osoby) masz kilka informacji, takich jak imię, nazwisko, adres, adres e-mail i numer telefonu.

Typowym sposobem na pokazanie takich danych jest tabela z wierszami i kolumnami. W kategoriach bazy danych każdy wiersz jest często określany jako rekord. Każda kolumna (czasami nazywana polami) zawiera wartość dla każdego typu danych: imię, nazwisko itd.

identyfikator Imię Nazwisko adres E-mail Telefon
1 Jim Abrus 210 100th St SE Orcas WA 98031 jim@contoso.com 555 0100
2 Terry Adams 1234 Main St. Seattle WA 99011 terry@cohowinery.com 555 0101

W przypadku większości tabel bazy danych tabela musi mieć kolumnę zawierającą unikatowy identyfikator, taki jak numer klienta, numer konta itp. Jest to nazywane kluczem podstawowym tabeli i służy do identyfikowania każdego wiersza w tabeli. W tym przykładzie kolumna ID jest kluczem podstawowym książki adresowej.

Dzięki tej podstawowej wiedzy na temat baz danych możesz dowiedzieć się, jak utworzyć prostą bazę danych i wykonywać operacje, takie jak dodawanie, modyfikowanie i usuwanie danych.

Wskazówka

Relacyjne bazy danych

Dane można przechowywać na wiele sposobów, w tym pliki tekstowe i arkusze kalkulacyjne. W przypadku większości zastosowań biznesowych dane są jednak przechowywane w relacyjnej bazie danych.

Ten artykuł nie zagłębia się szczegółowo w bazy danych. Jednak możesz uznać to za użyteczne, aby zrozumieć coś na ich temat. W relacyjnej bazie danych informacje są logicznie podzielone na oddzielne tabele. Na przykład baza danych dla szkoły może zawierać oddzielne tabele dla uczniów i oferty zajęć. Oprogramowanie bazy danych (takie jak SQL Server) obsługuje zaawansowane polecenia, które umożliwiają dynamiczne ustanawianie relacji między tabelami. Na przykład możesz użyć relacyjnej bazy danych, aby ustanowić relację logiczną między uczniami i zajęciami w celu utworzenia harmonogramu. Przechowywanie danych w osobnych tabelach zmniejsza złożoność struktury tabeli i zmniejsza potrzebę przechowywania nadmiarowych danych w tabelach.

Tworzenie bazy danych

W tej procedurze pokazano, jak utworzyć bazę danych o nazwie SmallBakery przy użyciu narzędzia projektowego sql Server Compact Database, które jest zawarte w programie WebMatrix. Chociaż bazę danych można utworzyć przy użyciu kodu, bardziej typowe jest utworzenie tabel bazy danych i bazy danych przy użyciu narzędzia projektowego, takiego jak WebMatrix.

  1. Uruchom program WebMatrix, a następnie na stronie Szybki start kliknij pozycję Witryna z szablonu.

  2. Wybierz pozycję Pusta witryna, a następnie w polu Nazwa witryny wprowadź ciąg "SmallBakery", a następnie kliknij przycisk OK. Witryna jest tworzona i wyświetlana w programie WebMatrix.

  3. W okienku po lewej stronie kliknij obszar roboczy Bazy danych .

  4. Na wstążce kliknij pozycję Nowa baza danych. Pusta baza danych jest tworzona z taką samą nazwą jak witryna.

  5. W panelu po lewej stronie rozwiń węzeł SmallBakery.sdf, a następnie kliknij Tabele.

  6. Na wstążce kliknij pozycję Nowa tabela. Program WebMatrix otwiera projektanta tabel.

    [Zrzut ekranu przedstawiający Web Matrix otwierający projektanta tabel.]

  7. Kliknij kolumnę Nazwa i wprowadź ciąg "Id".

  8. W kolumnie Typ danych wybierz pozycję int.

  9. Ustaw opcje Czy klucz podstawowy? i Czy jest identyfikatorem? na Tak.

    Jak sugeruje nazwa, Is Primary Key informuje bazę danych, że będzie to klucz podstawowy tabeli. Identyfikator informuje bazę danych o automatycznym utworzeniu numeru identyfikatora dla każdego nowego rekordu i przypisaniu mu kolejnego numeru w sekwencji (począwszy od 1).

  10. Kliknij w następnym wierszu. Edytor uruchamia nową definicję kolumny.

  11. W polu Nazwa wprowadź wartość "Nazwa".

  12. W polu Typ danych wybierz pozycję "nvarchar" i ustaw długość na 50. Część var informuje nvarchar bazę danych, że dane dla tej kolumny będą ciągiem, którego rozmiar może się różnić od rekordu do rekordu. ( N prefiks reprezentuje wartość krajową, co oznacza, że pole może przechowywać dane znaków reprezentujące dowolny system alfabetu lub zapisu — czyli to, że pole zawiera dane Unicode).

  13. Ustaw opcję Zezwalaj na wartości null na Nie. Spowoduje to wymuszenie, że kolumna Name nie pozostanie pusta.

  14. Korzystając z tego samego procesu, utwórz kolumnę o nazwie Opis. Ustaw Typ danych na "nvarchar" i długość na 50, a następnie ustaw Zezwalaj na wartości null na false.

  15. Utwórz kolumnę o nazwie Price (Cena). Ustaw wartość Typ danych na wartość "money" i ustaw wartość Allow Nulls (Zezwalaj na wartości null) na false.

  16. W polu u góry nadaj tabeli nazwę "Product".

    Po zakończeniu definicja będzie wyglądać następująco:

    [Zrzut ekranu przedstawia wygląd definicji po zakończeniu].

  17. Naciśnij klawisze Ctrl+S, aby zapisać tabelę.

Dodawanie danych do bazy danych

Teraz możesz dodać przykładowe dane do bazy danych, z którymi będziesz pracować w dalszej części artykułu.

  1. W panelu po lewej stronie rozwiń węzeł SmallBakery.sdf, a następnie kliknij pozycję Tabele.

  2. Kliknij prawym przyciskiem myszy tabelę Product (Produkt), a następnie kliknij pozycję Dane.

  3. W okienku edycji wprowadź następujące rekordy:

    Nazwa Opis Cena
    Chleb Pieczony świeżo każdego dnia. 2,99
    Torcik truskawkowy Wykonane z organicznych truskawek z naszego ogrodu. 9.99
    Szarlotka Nie dorównuje tylko ciastu twojej mamy. 12.99
    Pecan Pie Jeśli lubisz pecans, to jest dla Ciebie. 10.99
    Tarta cytrynowa Wykonane z najlepszych cytryn na świecie. 11.99
    Cupcakes Twoje dzieci i dziecko w tobie będą je kochać. 7.99

    Pamiętaj, że nie musisz wprowadzać niczego dla kolumny Id . Po utworzeniu kolumny Id należy ustawić jej właściwość Is Identity na true, co powoduje automatyczne wypełnienie.

    Po zakończeniu wprowadzania danych projektant tabel będzie wyglądać następująco:

    [Zrzut ekranu przedstawia wygląd projektanta tabel po zakończeniu wprowadzania danych].

  4. Zamknij kartę zawierającą dane bazy danych.

Wyświetlanie danych z bazy danych

Po utworzeniu bazy danych z danymi możesz wyświetlić je na stronie internetowej ASP.NET. Aby wybrać wiersze tabeli do wyświetlenia, należy użyć instrukcji SQL, która jest poleceniem przekazywanym do bazy danych.

  1. W okienku po lewej stronie kliknij obszar roboczy Pliki .

  2. W katalogu głównym witryny internetowej utwórz nową stronę CSHTML o nazwie ListProducts.cshtml.

  3. Zastąp istniejący znacznik następującym kodem:

    @{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";
 }
<!DOCTYPE html>
<html>
 <head>
   <title>Small Bakery Products</title>
   <style>
       table, th, td {
         border: solid 1px #bbbbbb;
         border-collapse: collapse;
         padding: 2px;
       }
    </style>
 </head>
 <body>
   <h1>Small Bakery Products</h1>
   <table>
       <thead>
           <tr>
               <th>Id</th>
               <th>Product</th>
               <th>Description</th>
       <th>Price</th>
           </tr>
       </thead>
       <tbody>
           @foreach(var row in db.Query(selectQueryString)){
            <tr>
               <td>@row.Id</td>
                   <td>@row.Name</td>
                   <td>@row.Description</td>
                   <td>@row.Price</td>
            </tr>
           }
       </tbody>
   </table>
 </body>
</html>

    W pierwszym bloku kodu otwórz utworzony wcześniej plik SmallBakery.sdf (baza danych). Metoda Database.Open zakłada, że plik sdf znajduje się w folderze App_Data witryny internetowej. (Zwróć uwagę, że nie musisz określać rozszerzenia sdf — w rzeczywistości, jeśli to zrobisz, Open metoda nie będzie działać).

    Uwaga / Notatka

    Folder App_Data to specjalny folder w ASP.NET używany do przechowywania plików danych. Aby uzyskać więcej informacji, zobacz Nawiązywanie połączenia z bazą danych w dalszej części tego artykułu.

    Następnie należy wysłać żądanie zapytania do bazy danych przy użyciu następującej instrukcji SQL Select :

    SELECT * FROM Product ORDER BY Name

    W instrukcji Product identyfikuje tabelę do zapytania. Znak * określa, że zapytanie powinno zwrócić wszystkie kolumny z tabeli. (Możesz również wyświetlić kolumny pojedynczo, rozdzielone przecinkami, jeśli chcesz wyświetlić tylko niektóre kolumny). Klauzula Order By wskazuje sposób sortowania danych — w tym przypadku według kolumny Nazwa . Oznacza to, że dane są sortowane alfabetycznie na podstawie wartości kolumny Name dla każdego wiersza.

    W treści strony znaczniki tworzą tabelę HTML, która będzie używana do wyświetlania danych. Wewnątrz elementu <tbody> używasz pętli foreach, aby pobierać poszczególne wiersze danych zwrócone przez zapytanie. Dla każdego wiersza danych należy utworzyć wiersz tabeli HTML (<tr> element). Następnie utworzysz komórki tabeli HTML (<td> elementy) dla każdej kolumny. Za każdym razem, gdy przechodzisz przez pętlę, następny dostępny wiersz z bazy danych znajduje się w row zmiennej (można to skonfigurować w instrukcji foreach ). Aby uzyskać pojedynczą kolumnę z wiersza, możesz użyć row.Name, row.Description lub jakiejkolwiek innej nazwy kolumny, której potrzebujesz.

  4. Uruchom stronę w przeglądarce. (Przed uruchomieniem strony upewnij się, że strona jest zaznaczona w obszarze roboczym Pliki ). Na stronie zostanie wyświetlona lista podobna do następującej:

    [Zrzut ekranu przedstawia listę wyświetlaną na stronie w przeglądarce.]

Wskazówka

Język zapytań strukturalnych (SQL)

SQL to język używany w większości relacyjnych baz danych do zarządzania danymi w bazie danych. Zawiera polecenia, które umożliwiają pobieranie i aktualizowanie danych oraz umożliwia tworzenie, modyfikowanie i zarządzanie tabelami bazy danych. Język SQL różni się od języka programowania (takiego jak używany w programie WebMatrix), ponieważ w programie SQL chodzi o to, że informujesz bazę danych o tym, co chcesz, i zadaniem bazy danych jest ustalenie, jak uzyskać dane lub wykonać zadanie. Oto przykłady niektórych poleceń SQL i ich działania:

SELECT Id, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

Spowoduje to pobranie kolumn Identyfikator, Nazwa i Cena z rekordów w tabeli Product , jeśli wartość Price jest większa niż 10, i zwraca wyniki w kolejności alfabetycznej na podstawie wartości kolumny Name . To polecenie zwróci zestaw wyników zawierający rekordy spełniające kryteria lub pusty zestaw, jeśli rekordy nie są zgodne.

INSERT INTO Product (Name, Description, Price) VALUES ("Croissant", "A flaky delight", 1.99)

Spowoduje to wstawienie nowego rekordu do tabeli Product, ustawienie kolumny Name na "Croissant", kolumny Description na "A flaky delight" oraz ceny na 1.99.

DELETE FROM Product WHERE ExpirationDate < "01/01/2008"

To polecenie usuwa rekordy w tabeli Product , których kolumna daty wygaśnięcia jest wcześniejsza niż 1 stycznia 2008 r. (Zakłada się, że tabela Product ma taką kolumnę, oczywiście). Data jest wprowadzana tutaj w formacie MM/DD/RRRR, ale powinna zostać wprowadzona w formacie używanym dla ustawień regionalnych.

Polecenia Insert Into i Delete nie zwracają zestawów wyników. Zamiast tego zwracają one liczbę, która informuje o liczbie rekordów, których dotyczyło polecenie .

W przypadku niektórych z tych operacji (takich jak wstawianie i usuwanie rekordów) proces, który żąda operacji, musi mieć odpowiednie uprawnienia w bazie danych. Dlatego w przypadku produkcyjnych baz danych często trzeba podać nazwę użytkownika i hasło podczas nawiązywania połączenia z bazą danych.

Istnieją dziesiątki poleceń SQL, ale wszystkie są zgodne ze wzorcem takim. Polecenia SQL umożliwiają tworzenie tabel baz danych, liczenie liczby rekordów w tabeli, obliczanie cen i wykonywanie wielu innych operacji.

Wstawianie danych w bazie danych

W tej sekcji pokazano, jak utworzyć stronę, która umożliwia użytkownikom dodawanie nowego produktu do tabeli bazy danych Product . Po wstawieniu nowego rekordu produktu na stronie zostanie wyświetlona zaktualizowana tabela przy użyciu strony ListProducts.cshtml utworzonej w poprzedniej sekcji.

Strona zawiera walidację, aby upewnić się, że dane wprowadzone przez użytkownika są prawidłowe dla bazy danych. Na przykład kod na stronie zapewnia wprowadzenie wartości dla wszystkich wymaganych kolumn.

  1. W witrynie internetowej utwórz nowy plik CSHTML o nazwie InsertProducts.cshtml.

  2. Zastąp istniejący znacznik następującym kodem:

    @{
    Validation.RequireField("Name", "Product name is required.");
    Validation.RequireField("Description", "Product description is required.");
    Validation.RequireField("Price", "Product price is required.");

    var db = Database.Open("SmallBakery");
    var Name = Request.Form["Name"];
    var Description = Request.Form["Description"];
    var Price = Request.Form["Price"];

    if (IsPost && Validation.IsValid()) {
        // Define the insert query. The values to assign to the
        // columns in the Product table are defined as parameters
        // with the VALUES keyword.
        if(ModelState.IsValid) {
            var insertQuery = "INSERT INTO Product (Name, Description, Price) " +
                "VALUES (@0, @1, @2)";
            db.Execute(insertQuery, Name, Description, Price);
            // Display the page that lists products.
            Response.Redirect("~/ListProducts");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
 <title>Add Products</title>
 <style type="text/css">
    label {float:left; width: 8em; text-align: right;
           margin-right: 0.5em;}
    fieldset {padding: 1em; border: 1px solid; width: 50em;}
    legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
    .validation-summary-errors {font-weight:bold; color:red;
           font-size: 11pt;}
 </style>
</head>
<body>
 <h1>Add New Product</h1>

 @Html.ValidationSummary("Errors with your submission:")

 <form method="post" action="">
   <fieldset>
     <legend>Add Product</legend>
     <div>
       <label>Name:</label>
       <input name="Name" type="text" size="50" value="@Name" />
     </div>
     <div>
       <label>Description:</label>
       <input name="Description" type="text" size="50"
           value="@Description" />
     </div>
     <div>
       <label>Price:</label>
       <input name="Price" type="text" size="50" value="@Price" />
     </div>
     <div>
       <label>&nbsp;</label>
       <input type="submit" value="Insert" class="submit" />
     </div>
   </fieldset>
 </form>
</body>
</html>

    Treść strony zawiera formularz HTML z trzema polami tekstowymi, które umożliwiają użytkownikom wprowadzanie nazwy, opisu i ceny. Gdy użytkownicy klikną przycisk Wstaw , kod w górnej części strony otworzy połączenie z bazą danych SmallBakery.sdf . Następnie uzyskasz wartości przesłane przez użytkownika przy użyciu Request obiektu i przypiszesz te wartości do zmiennych lokalnych.

    Aby sprawdzić, czy użytkownik wprowadził wartość dla każdej wymaganej kolumny, należy zarejestrować każdy <input> element, który chcesz zweryfikować:

    Validation.RequireField("Name", "Product name is required.");
Validation.RequireField("Description", "Product description is required.");
Validation.RequireField("Price", "Product price is required.");

    Pomocnik Validation sprawdza, czy w każdym z zarejestrowanych pól znajduje się wartość. Możesz sprawdzić, czy wszystkie pola przeszły walidację, sprawdzając Validation.IsValid(), co zwykle robisz przed przetworzeniem informacji uzyskanych od użytkownika.

    if (IsPost && Validation.IsValid()) {
    // Process information here
}

    (Operator && oznacza AND — ten test to Jeśli jest to przesyłanie formularza ORAZ wszystkie pola zostały zweryfikowane.)

    Jeśli wszystkie kolumny zostały zweryfikowane (żadna nie była pusta), utwórz instrukcję SQL, aby wstawić dane, a następnie ją wykonać, jak pokazano poniżej.

    var insertQuery =
    "INSERT INTO Product (Name, Description, Price) VALUES (@0, @1, @2)";

    Aby wstawić wartości, należy użyć symboli zastępczych parametrów (@0, @1, @2).

    Uwaga / Notatka

    Jako środek ostrożności zabezpieczeń zawsze przekazuj wartości do instrukcji SQL za pomocą parametrów, jak widać w poprzednim przykładzie. Daje to szansę na zweryfikowanie danych użytkownika, a także pomaga chronić przed próbami wysyłania złośliwych poleceń do bazy danych (czasami nazywanych atakami polegającymi na wstrzyknięciu kodu SQL).

    Aby wykonać zapytanie, użyj tej instrukcji, przekazując do niej zmienne zawierające wartości, które mają zastąpić symbole zastępcze:

    db.Execute(insertQuery, Name, Description, Price);

    Po wykonaniu instrukcji Insert Into należy wysłać użytkownika do strony zawierającej listę produktów przy użyciu tego wiersza:

    Response.Redirect("~/ListProducts");

    Jeśli walidacja nie powiodła się, pomiń wstawianie. Zamiast tego na stronie jest pomocnik, który może wyświetlać skumulowane komunikaty o błędach (jeśli istnieją):

    @Html.ValidationSummary("Errors with your submission:")

    Zwróć uwagę, że blok stylu w znaczniku zawiera definicję klasy CSS o nazwie .validation-summary-errors. Jest to nazwa klasy CSS, która jest domyślnie używana dla elementu <div> zawierającego błędy walidacji. W takim przypadku klasa CSS określa, że błędy podsumowania weryfikacji są wyświetlane na czerwono i pogrubionie, ale można zdefiniować klasę .validation-summary-errors tak, aby wyświetlała dowolne formatowanie.

Testowanie strony wstawiania

  1. Wyświetl stronę w przeglądarce. Na stronie zostanie wyświetlony formularz podobny do przedstawionego na poniższej ilustracji.

    [Zrzut ekranu przedstawia formularz, który będzie wyświetlany na stronie w przeglądarce.]

  2. Wprowadź wartości dla wszystkich kolumn, ale upewnij się, że kolumna Price (Cena ) jest pusta.

  3. Kliknij przycisk Wstaw. Na stronie zostanie wyświetlony komunikat o błędzie, jak pokazano na poniższej ilustracji. (Nie utworzono nowego rekordu).

    [Zrzut ekranu przedstawia komunikat o błędzie.]

  4. Wypełnij formularz całkowicie, a następnie kliknij przycisk Wstaw. Tym razem zostanie wyświetlona strona ListProducts.cshtml z nowym rekordem.

Aktualizowanie danych w bazie danych

Po wprowadzeniu danych do tabeli może być konieczne ich zaktualizowanie. W tej procedurze pokazano, jak utworzyć dwie strony podobne do utworzonych wcześniej na potrzeby wstawiania danych. Pierwsza strona wyświetla produkty i pozwala użytkownikom wybrać jeden do zmiany. Druga strona umożliwia użytkownikom wprowadzanie zmian i zapisywanie ich.

Uwaga / Notatka

Ważne W produkcyjnej witrynie internetowej zazwyczaj ograniczasz, kto może wprowadzać zmiany w danych. Aby uzyskać informacje o sposobie konfigurowania członkostwa oraz sposobach autoryzacji użytkowników do wykonywania zadań w witrynie, zobacz Dodawanie zabezpieczeń i członkostwa do witryny ASP.NET Web Pages.

  1. W witrynie internetowej utwórz nowy plik CSHTML o nazwie EditProducts.cshtml.

  2. Zastąp istniejący znacznik w pliku następującym kodem:

    @{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";

}
<!DOCTYPE html>
<html>
<head>
    <title>Edit Products</title>
    <style type="text/css">
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
    </style>
</head>
<body>
    <h1>Edit Small Bakery Products</h1>
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
            <td>@row.Name</td>
            <td>@row.Description</td>
            <td>@row.Price</td>
          </tr>
        }
      </tbody>
    </table>
</body>
</html>

    Jedyną różnicą między tą stroną a stroną ListProducts.cshtml z wcześniejszej strony jest to, że tabela HTML na tej stronie zawiera dodatkową kolumnę, która wyświetla link Edytuj . Po kliknięciu tego linku nastąpi przejście do strony UpdateProducts.cshtml (którą utworzysz dalej), gdzie można edytować wybrany rekord.

    Przyjrzyj się kodowi, który tworzy link Edytuj :

    <a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>

    Spowoduje to utworzenie elementu HTML <a> , którego href atrybut jest ustawiany dynamicznie. Atrybut href określa stronę do wyświetlenia, gdy użytkownik kliknie link. Przekazuje również wartość Id bieżącego wiersza do łącza. Po uruchomieniu strony źródło strony może zawierać linki podobne do następujących:

    <a href="UpdateProducts/1">Edit</a></td>
<a href="UpdateProducts/2">Edit</a></td>
<a href="UpdateProducts/3">Edit</a></td>

    Zwróć uwagę, że href atrybut jest ustawiony na UpdateProducts/n, gdzie n jest numerem produktu. Gdy użytkownik kliknie jeden z tych linków, wynikowy adres URL będzie wyglądać mniej więcej tak:

    http://localhost:18816/UpdateProducts/6

    Innymi słowy, numer produktu do edycji zostanie przekazany w adresie URL.

  3. Wyświetl stronę w przeglądarce. Na stronie są wyświetlane dane w formacie w następujący sposób:

    [Zrzut ekranu przedstawia dane wyświetlane na stronie w przeglądarce.]

    Następnie utworzysz stronę umożliwiającą użytkownikom aktualizowanie danych. Strona aktualizacji zawiera walidację w celu zweryfikowania danych wprowadzonych przez użytkownika. Na przykład kod na stronie zapewnia wprowadzenie wartości dla wszystkich wymaganych kolumn.

  4. W witrynie internetowej utwórz nowy plik CSHTML o nazwie UpdateProducts.cshtml.

  5. Zastąp istniejący znacznik w pliku następującym kodem.

    @{
    Validation.RequireField("Name", "Product name is required.");
    Validation.RequireField("Description", "Product description is required.");
    Validation.RequireField("Price", "Product price is required.");

    var Name = "";
    var Description = "";
    var Price = Decimal.Zero;

    var ProductId  = UrlData[0];
    if (ProductId.IsEmpty()) {
         Response.Redirect("~/EditProducts");
    }

    var db = Database.Open("SmallBakery");

    if (IsPost && Validation.IsValid()) {
        var updateQueryString =
            "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ;
        Name = Request["Name"];
        Description = Request["Description"];
        Price = Request["Price"].AsDecimal();
        db.Execute(updateQueryString, Name, Description, Price, ProductId);
        Response.Redirect(@Href("~/EditProducts"));
    }
    else {
        var selectQueryString = "SELECT * FROM Product WHERE Id=@0";

        var row = db.QuerySingle(selectQueryString, ProductId);
        Name = row.Name;
        Description = row.Description;
        Price = row.Price;
    }

}

<!DOCTYPE html>
<html>
<head>
  <title>Add Products</title>
  <style type="text/css">
     label { float: left; width: 8em; text-align: right;
             margin-right: 0.5em;}
     fieldset { padding: 1em; border: 1px solid; width: 35em;}
     legend { padding: 2px 4px;  border: 1px solid; font-weight: bold;}
     .validation-summary-errors {font-weight:bold; color:red; font-size:11pt;}
  </style>
</head>
<body>
  <h1>Update Product</h1>
   @Html.ValidationSummary("Errors with your submission:")
   <form method="post" action="">
     <fieldset>
       <legend>Update Product</legend>
       <div>
         <label>Name:</label>
         <input name="Name" type="text" size="50" value="@Name" />
       </div>
       <div>
         <label>Description:</label>
         <input name="Description" type="text" size="50"
            value="@Description" />
       </div>
       <div>
          <label>Price:</label>
          <input name="Price" type="text" size="50" value="@Price" />
       </div>
       <div>
          <label>&nbsp;</label>
          <input type="submit" value="Update" class="submit" />
       </div>
    </fieldset>
  </form>
</body>
</html>

    Treść strony zawiera formularz HTML, w którym jest wyświetlany produkt i gdzie użytkownicy mogą go edytować. Aby wyświetlić produkt, użyj następującej instrukcji SQL:

    SELECT * FROM Product WHERE Id=@0

    Spowoduje to wybranie produktu, którego identyfikator odpowiada wartości przekazanej w parametrze @0 . (Ponieważ Id jest kluczem podstawowym i dlatego musi być unikatowy, można w ten sposób wybrać tylko jeden rekord produktu). Aby uzyskać wartość Id do przekazania do tej Select instrukcji, możesz odczytać wartość przekazaną do strony jako część adresu URL, używając następującej składni:

    var ProductId  = UrlData[0];

    Aby faktycznie pobrać rekord produktu, należy użyć QuerySingle metody , która zwróci tylko jeden rekord:

    var row = db.QuerySingle(selectQueryString, ProductId);

    Pojedynczy wiersz jest zwracany do zmiennej row . Możesz pobrać dane z każdej kolumny i przypisać je do zmiennych lokalnych w następujący sposób:

    var Name = row.Name;
var Description = row.Description;
var Price = row.Price;

    W znaczniku formularza te wartości są wyświetlane automatycznie w poszczególnych polach tekstowych przy użyciu osadzonego kodu, takiego jak poniższy:

    <input name="Name" type="text" size="50" value="@Name" />

    Ta część kodu wyświetla rekord produktu do zaktualizowania. Po wyświetleniu rekordu użytkownik może edytować poszczególne kolumny.

    Gdy użytkownik prześle formularz, klikając przycisk Aktualizuj , kod w if(IsPost) bloku jest uruchamiany. Spowoduje to pobranie wartości użytkownika z Request obiektu, zapisanie wartości w zmiennych i sprawdzenie, czy każda kolumna została wypełniona. Jeśli weryfikacja zakończy się pomyślnie, kod tworzy następującą instrukcję SQL Update:

    UPDATE Product SET Name=@0, Description=@1, Price=@2, WHERE ID=@3

    W instrukcji SQL Update należy określić każdą kolumnę do zaktualizowania i wartość, na którą ma być ustawiona. W tym kodzie wartości są określane przy użyciu symboli zastępczych parametrów @0, @1, @2i tak dalej. (Jak wspomniano wcześniej, w przypadku zabezpieczeń należy zawsze przekazywać wartości do instrukcji SQL przy użyciu parametrów).

    Podczas wywoływania db.Execute metody należy przekazać zmienne zawierające wartości w kolejności odpowiadającej parametrom w instrukcji SQL:

    db.Execute(updateQueryString, Name, Description, Price, ProductId);

    Po wykonaniu instrukcji Update wywołasz następującą metodę, aby przekierować użytkownika z powrotem do strony edycji:

    Response.Redirect(@Href("~/EditProducts"));

    Efekt polega na tym, że użytkownik widzi zaktualizowaną listę danych w bazie danych i może edytować inny produkt.

  6. Zapisz tę stronę.

  7. Uruchom stronę EditProducts.cshtml (nie stronę aktualizacji), a następnie kliknij przycisk Edytuj , aby wybrać produkt do edycji. Zostanie wyświetlona strona UpdateProducts.cshtml z wybranym rekordem.

    [Zrzut ekranu przedstawia stronę Aktualizuj produkty wraz z wybranym rekordem].

  8. Wprowadź zmianę i kliknij przycisk Aktualizuj. Lista produktów zostanie ponownie wyświetlona ze zaktualizowanymi danymi.

Usuwanie danych w bazie danych

W tej sekcji pokazano, jak umożliwić użytkownikom usunięcie produktu z tabeli bazy danych Product . Przykład składa się z dwóch stron. Na pierwszej stronie użytkownicy wybierają rekord do usunięcia. Rekord do usunięcia jest następnie wyświetlany na drugiej stronie, co pozwala im potwierdzić, że chce usunąć rekord.

Uwaga / Notatka

Ważne W produkcyjnej witrynie internetowej zazwyczaj ograniczasz, kto może wprowadzać zmiany w danych. Aby uzyskać informacje o sposobach konfigurowania członkostwa, oraz o sposobach autoryzowania użytkowników do wykonywania zadań na witrynie, zobacz Dodawanie zabezpieczeń i członkostwa do witryny ASP.NET.

  1. W witrynie internetowej utwórz nowy plik CSHTML o nazwie ListProductsForDelete.cshtml.

  2. Zastąp istniejący znacznik następującym kodem:

    @{
  var db = Database.Open("SmallBakery");
  var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<!DOCTYPE html>
<html>
<head>
    <title>Delete a Product</title>
    <style>
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
     </style>
</head>
<body>
  <h1>Delete a Product</h1>
  <form method="post" action="" name="form">
    <table border="1">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("~/DeleteProduct", row.Id)">Delete</a></td>
            <td>@row.Name</td>
            <td>@row.Description</td>
            <td>@row.Price</td>
          </tr>
        }
      </tbody>
    </table>
  </form>
</body>
</html>

    Ta strona jest podobna do strony EditProducts.cshtml z wcześniejszej wersji. Jednak zamiast wyświetlać link Edytuj dla każdego produktu, zostanie wyświetlony link Usuń . Link Usuń jest tworzony przy użyciu następującego osadzonego kodu w znaczniku:

    <a href="@Href("~/DeleteProduct", row.Id)">Delete</a>

    Spowoduje to utworzenie adresu URL, który wygląda następująco, gdy użytkownicy klikną link:

    http://<server>/DeleteProduct/4

    Adres URL wywołuje stronę o nazwie DeleteProduct.cshtml (którą utworzysz dalej) i przekazuje identyfikator produktu do usunięcia (tutaj, 4).

  3. Zapisz plik, ale pozostaw go otwarty.

  4. Utwórz inny plik CHTML o nazwie DeleteProduct.cshtml. Zastąp istniejącą zawartość następującymi elementami:

    @{
  var db = Database.Open("SmallBakery");
  var ProductId = UrlData[0];
  if (ProductId.IsEmpty()) {
    Response.Redirect("~/ListProductsForDelete");
  }
  var prod = db.QuerySingle("SELECT * FROM PRODUCT WHERE ID = @0", ProductId);
  if( IsPost && !ProductId.IsEmpty()) {
    var deleteQueryString = "DELETE FROM Product WHERE Id=@0";
    db.Execute(deleteQueryString, ProductId);
    Response.Redirect("~/ListProductsForDelete");
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Delete Product</title>
</head>
<body>
  <h1>Delete Product - Confirmation</h1>
  <form method="post" action="" name="form">
    <p>Are you sure you want to delete the following product?</p>

    <p>Name: @prod.Name <br />
       Description: @prod.Description <br />
       Price: @prod.Price</p>
    <p><input type="submit" value="Delete" /></p>
  </form>
</body>
</html>

    Ta strona jest wywoływana przez listProductsForDelete.cshtml i umożliwia użytkownikom potwierdzenie, że chce usunąć produkt. Aby wyświetlić listę produktów do usunięcia, należy uzyskać identyfikator produktu do usunięcia z adresu URL przy użyciu następującego kodu:

    var ProductId = UrlData[0];

    Następnie strona prosi użytkownika o kliknięcie przycisku w celu faktycznego usunięcia rekordu. Jest to ważna miara zabezpieczeń: podczas wykonywania poufnych operacji w witrynie internetowej, takich jak aktualizowanie lub usuwanie danych, te operacje powinny być zawsze wykonywane przy użyciu operacji POST, a nie operacji GET. Jeśli witryna została skonfigurowana tak, aby można było wykonać operację usuwania przy użyciu operacji GET, każdy może przekazać adres URL, taki jak http://<server>/DeleteProduct/4 i usunąć dowolne elementy z bazy danych. Dodając potwierdzenie i kodując stronę w taki sposób, aby usunięcie mogło być wykonane tylko przy użyciu metody POST, zwiększasz bezpieczeństwo swojej witryny.

    Rzeczywista operacja usuwania jest wykonywana przy użyciu następującego kodu, który najpierw potwierdza, że jest to operacja POST i że identyfikator nie jest pusty.

    if( IsPost && !ProductId.IsEmpty()) {
    var deleteQueryString = "DELETE FROM Product WHERE Id=@0";
    db.Execute(deleteQueryString, ProductId);
    Response.Redirect("~/ListProductsForDelete");
}

    Kod uruchamia instrukcję SQL, która usuwa określony rekord, a następnie przekierowuje użytkownika z powrotem do strony listy.

  5. Uruchom plik ListProductsForDelete.cshtml w przeglądarce.

    [Zrzut ekranu przedstawia uruchomione produkty listy do usunięcia kropki CSHTML w przeglądarce.]

  6. Kliknij link Usuń dla jednego z produktów. Zostanie wyświetlona strona DeleteProduct.cshtml , aby potwierdzić, że chcesz usunąć ten rekord.

  7. Kliknij przycisk Usuń. Rekord produktu zostanie usunięty i strona zostanie odświeżona ze zaktualizowaną listą produktów.

Wskazówka

Nawiązywanie połączenia z bazą danych

Połączenie z bazą danych można nawiązać na dwa sposoby. Pierwszym z nich jest użycie Database.Open metody i określenie nazwy pliku bazy danych (mniej rozszerzenia sdf ):

var db = Database.Open("SmallBakery");

Metoda Open zakłada, że element .Plik sdf znajduje się w folderze App_Data witryny internetowej. Ten folder jest przeznaczony specjalnie do przechowywania danych. Na przykład ma odpowiednie uprawnienia, aby umożliwić witrynie internetowej odczytywanie i zapisywanie danych, a jako środek zabezpieczający program WebMatrix nie zezwala na dostęp do plików z tego folderu.

Drugim sposobem jest użycie parametrów połączenia. Parametry połączenia zawierają informacje o sposobie nawiązywania połączenia z bazą danych. Może to obejmować ścieżkę pliku lub może zawierać nazwę bazy danych programu SQL Server na serwerze lokalnym lub zdalnym wraz z nazwą użytkownika i hasłem w celu nawiązania połączenia z tym serwerem. (W przypadku przechowywania danych w centralnie zarządzanej wersji programu SQL Server, takiej jak w lokacji dostawcy hostingu, zawsze należy użyć parametrów połączenia, aby określić informacje o połączeniu z bazą danych).

W programie WebMatrix parametry połączenia są zwykle przechowywane w pliku XML o nazwie Web.config. Jak wskazuje nazwa, można użyć pliku Web.config w katalogu głównym witryny internetowej do przechowywania informacji o konfiguracji witryny, w tym wszelkich parametrów połączenia, których może wymagać witryna. Przykład parametrów połączenia w pliku Web.config może wyglądać następująco. Uwaga $CREDENTIAL_PLACEHOLDER$ jest symbolem zastępczym pary klucz/wartość hasła:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <connectionStrings>
   <add
     name="SQLServerConnectionString"
     connectionString= "server=myServer;database=myDatabase;uid=username;$CREDENTIAL_PLACEHOLDER$"
     providerName="System.Data.SqlClient" />
  </connectionStrings>
</configuration>

W tym przykładzie parametry połączenia wskazują na bazę danych w instancji SQL Server, która jest uruchomiona na jakimś zdalnym serwerze (w przeciwieństwie do lokalnego pliku sdf). Należy zastąpić odpowiednie nazwy dla myServer i myDatabase, a następnie określić wartości logowania SQL Server dla username i password. (Wartości nazwy użytkownika i hasła nie muszą być takie same jak poświadczenia systemu Windows lub wartości podane przez dostawcę hostingu w celu zalogowania się na ich serwerach. Sprawdź z administratorem dokładne wartości, których potrzebujesz).

Metoda jest elastyczna Database.Open , ponieważ umożliwia przekazanie nazwy pliku sdf bazy danych lub nazwy parametrów połączenia przechowywanych w pliku Web.config . W poniższym przykładzie pokazano, jak nawiązać połączenie z bazą danych przy użyciu parametrów połączenia przedstawionych w poprzednim przykładzie:

@{
    var db = Database.Open("SQLServerConnectionString");
}

Jak wspomniano, Database.Open metoda umożliwia przekazanie nazwy bazy danych lub parametrów połączenia i określenie, które z nich ma być używane. Jest to bardzo przydatne podczas wdrażania (publikowania) witryny internetowej. Podczas tworzenia i testowania witryny można użyć pliku sdf w folderze App_Data . Następnie po przeniesieniu lokacji na serwer produkcyjny można użyć parametrów połączenia w pliku Web.config , który ma taką samą nazwę jak plik sdf , ale wskazuje bazę danych dostawcy hostingu — wszystko bez konieczności zmiany kodu.

Na koniec, jeśli chcesz pracować bezpośrednio z parametrami połączenia, możesz wywołać Database.OpenConnectionString metodę i przekazać do niej rzeczywiste parametry połączenia, a nie tylko nazwę jednego w pliku Web.config . Może to być przydatne w sytuacjach, gdy z jakiegoś powodu nie masz dostępu do parametrów połączenia (lub wartości w nim, takich jak nazwa pliku sdf ), dopóki strona nie zostanie uruchomiona. Jednak w większości scenariuszy można używać Database.Open, tak jak opisano w tym artykule.

Dodatkowe zasoby

  • Last updated on