Udostępnij za pośrednictwem

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

  • Artykuł

– 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 umożliwiających wyświetlanie, dodawanie, edytowanie i usuwanie danych.

Czego się nauczysz:

  • 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 Stron sieci Web 3 i Visual Studio 2013 (lub Visual Studio Express 2013 for Web), jednak interfejs użytkownika będzie 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 danych, takich jak to, 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.

ID (Identyfikator) FirstName (Imię) LastName (Nazwisko) Adres Poczta 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.

Mając podstawową wiedzę na temat baz danych, możesz dowiedzieć się, jak utworzyć prostą bazę danych i wykonywać operacje, takie jak dodawanie, modyfikowanie i usuwanie danych.

Porada

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 przechodzi bardzo głęboko do baz danych. Jednak przydatne może okazać się zrozumienie ich nieco. 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żna użyć relacyjnej bazy danych, aby ustanowić relację logiczną między uczniami i zajęciami w celu utworzenia harmonogramu. Przechowywanie danych w oddzielnych tabelach zmniejsza złożoność struktury tabel i zmniejsza konieczność 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 bazy danych SQL Server Compact zawartego 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 okienku po lewej stronie rozwiń węzeł SmallBakery.sdf , a następnie kliknij pozycję Tabele.

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

    [Zrzut ekranu przedstawiający tabelę sieci Web otwierającą projektanta tabel].

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

  8. W kolumnie Typ danych wybierz pozycję int.

  9. Ustaw opcję Czy klucz podstawowy? i Czy jest identyfikowany? na wartość Tak.

    Jak sugeruje nazwa, Is Primary Key informuje bazę danych, że będzie to klucz podstawowy tabeli. Czy tożsamość informuje bazę danych o automatycznym utworzeniu numeru identyfikatora dla każdego nowego rekordu i przypisaniu jej kolejnej liczby sekwencyjnej (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ęść zmiennejnvarchar informuje bazę danych, że dane dla tej kolumny będą ciągami, których 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 jest pusta.

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

  15. Utwórz kolumnę o nazwie Price (Cena). W polu Typ danych ustaw 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 okienku po lewej stronie rozwiń węzeł SmallBakery.sdf , a następnie kliknij pozycję Tabele.

  2. Kliknij prawym przyciskiem myszy tabelę Product ,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
    Truskawkowe Wykonane z organicznych truskawek z naszego ogrodu. 9.99
    Szarlotka Drugi tylko do ciasta twojej mamy. 12.99
    Pecan Pie Jeśli lubisz pecans, to jest dla Ciebie. 10.99
    Ciasto z cytryny 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 . Podczas tworzenia kolumny Id należy ustawić jej właściwość Is Identity na wartość true, co powoduje jej 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żna 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ącą adiustację 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 . Metoda Database.Open zakłada, że plik sdf znajduje się w folderze App_Data witryny internetowej. (Zwróć uwagę, że nie trzeba określać rozszerzenia .sdf — w rzeczywistości, jeśli to zrobisz, Open metoda nie będzie działać).

    Uwaga

    Folder App_Data jest folderem specjalnym w ASP.NET używanym 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 wyślij żądanie zapytania do bazy danych przy użyciu następującej instrukcji SQL Select :

    SELECT * FROM Product ORDER BY Name

    W instrukcji identyfikuje tabelę do Product wykonywania zapytań. 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 adiustacja tworzy tabelę HTML, która będzie używana do wyświetlania danych. <tbody> Wewnątrz elementu należy użyć foreach pętli, aby indywidualnie pobrać każdy wiersz danych zwrócony 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 (należy to skonfigurować w instrukcji foreach ). Aby uzyskać pojedynczą kolumnę z wiersza, możesz użyć kolumny lub row.Description innej nazwy kolumny, której chcesz użyćrow.Name.

  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.]

Porada

Język 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 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 pobrać 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 wartość "Croissant", kolumna Description na wartość "A flaky delight" i cena 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. (Przyjęto założenie, że tabela Product ma oczywiście taką kolumnę). Data jest wprowadzana tutaj w formacie MM/DD/RRRR, ale należy wprowadzić ją 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, na które miało wpływ 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 w następujący sposób. Za pomocą poleceń SQL można tworzyć tabele bazy danych, liczyć liczbę rekordów w tabeli, obliczać ceny i wykonywać wiele innych operacji.

Wstawianie danych w bazie danych

W tej sekcji pokazano, jak utworzyć stronę umożliwiającą 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, że dla wszystkich wymaganych kolumn została wprowadzona wartość.

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

  2. Zastąp istniejącą adiustację 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. Po kliknięciu przycisku Wstaw kod w górnej części strony otwiera 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 weryfikację, sprawdzając Validation.IsValid(), które zazwyczaj należy wykonać przed przetworzeniem informacji uzyskanych od użytkownika:

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

    (Operator && oznacza AND — ten test ma wartość Jeśli jest to przesyłanie formularza i wszystkie pola przeszły walidację).

    Jeśli wszystkie kolumny zostały zweryfikowane (żadna z nich nie była pusta), należy utworzyć instrukcję SQL, aby wstawić dane, a następnie wykonać je w następujący sposób:

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

    Aby wstawić wartości, należy uwzględnić symbole zastępcze parametrów (@0, @1, @2).

    Uwaga

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

    Aby wykonać zapytanie, należy użyć tej instrukcji, przekazując do niej zmienne zawierające wartości do zastąpienia symboli zastępczych:

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

    Po wykonaniu instrukcji Insert Into użytkownik zostanie wysłany do strony zawierającej listę produktów przy użyciu tego wiersza:

    Response.Redirect("~/ListProducts");

    Jeśli walidacja nie powiedzie 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 znacznikach zawiera definicję klasy CSS o nazwie .validation-summary-errors. Jest to nazwa klasy CSS, która jest używana domyślnie dla elementu zawierającego <div> błędy walidacji. W takim przypadku klasa CSS określa, że błędy podsumowania weryfikacji są wyświetlane na czerwono i pogrubioną, ale można zdefiniować klasę .validation-summary-errors , aby wyświetlić 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 jest wyświetlany 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. Ta procedura pokazuje, jak utworzyć dwie strony podobne do utworzonych wcześniej na potrzeby wstawiania danych. Pierwsza strona wyświetla produkty i umożliwia użytkownikom wybranie jednego do zmiany. Druga strona umożliwia użytkownikom wprowadzanie zmian i zapisywanie ich.

Uwaga

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

  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óra zostanie utworzona w następnej kolejności), w której będzie 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ę, która ma być wyświetlana po kliknięciu linku przez użytkownika. Przekazuje również Id wartość 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ę, która umożliwia użytkownikom aktualizowanie danych. Strona aktualizacji zawiera walidację w celu zweryfikowania danych wprowadzona przez użytkownika. Na przykład kod na stronie zapewnia, że dla wszystkich wymaganych kolumn została wprowadzona wartość.

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

  5. Zastąp istniejące znaczniki 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 jest zgodny z wartością przekazaną w parametrze @0 . (Ponieważ identyfikator jest kluczem podstawowym i dlatego musi być unikatowy, w ten sposób można wybrać tylko jeden rekord produktu). Aby uzyskać wartość identyfikatora do przekazania do tej Select instrukcji, możesz odczytać wartość przekazaną do strony w ramach adresu URL przy użyciu 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 znacznikach formularza te wartości są automatycznie wyświetlane w poszczególnych polach tekstowych przy użyciu osadzonego kodu, takiego jak:

    <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 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

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

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

  2. Zastąp istniejącą adiustację 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 strony. Jednak zamiast wyświetlać link Edytuj dla każdego produktu, wyświetla link Usuń . Link Usuń jest tworzony przy użyciu następującego osadzonego kodu w znacznikach:

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

    Spowoduje to utworzenie adresu URL, który wygląda następująco po kliknięciu linku przez użytkowników:

    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ącym kodem:

    @{
  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 plik ListProductsForDelete.cshtml i umożliwia użytkownikom potwierdzenie, że chce usunąć produkt. Aby wyświetlić listę produktu 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 rzeczywistego usunięcia rekordu. Jest to ważna miara zabezpieczeń: podczas wykonywania poufnych operacji w witrynie internetowej, takich jak aktualizowanie lub usuwanie danych, te operacje należy zawsze wykonywać przy użyciu operacji POST, a nie operacji GET. Jeśli witryna jest 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ę, aby usunięcie można było wykonać tylko przy użyciu żądania POST, należy dodać miarę zabezpieczeń do witryny.

    Rzeczywista operacja usuwania jest wykonywana przy użyciu następującego kodu, który najpierw potwierdza, że jest to operacja po operacji 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, a strona zostanie odświeżona ze zaktualizowaną listą produktów.

Porada

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 w ramach miary zabezpieczeń 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 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 SQL Server, na przykład w witrynie 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 sieci Web 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 wskazuje bazę danych w wystąpieniu SQL Server uruchomionym na serwerze gdzieś (w przeciwieństwie do lokalnego pliku sdf). Należy zastąpić odpowiednie nazwy i myServer , i określić SQL Server wartości logowania dla usernamepasswordi myDatabase. (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ź się z administratorem pod kątem dokładnych potrzebnych wartości).

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 ustalenie, które z nich należy użyć. 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 do serwera produkcyjnego można użyć parametrów połączenia w pliku Web.config , który ma taką samą nazwę jak plik sdf , ale wskazuje na bazę danych dostawcy hostingu — wszystko bez konieczności zmiany kodu.

Jeśli na koniec chcesz pracować bezpośrednio z parametrami połączenia, możesz wywołać metodę Database.OpenConnectionString i przekazać jej rzeczywiste parametry połączenia, a nie tylko nazwę jednego w pliku Web.config . Może to być przydatne w sytuacjach, w których 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 przypadku większości scenariuszy można użyć go zgodnie z Database.Open opisem w tym artykule.

Dodatkowe zasoby