Sqlserver
 sql >> Baza danych >  >> RDS >> Sqlserver

Używanie INNER JOIN do łączenia tabel programu SQL Server i wyświetlania ich w formularzach sieci Web ASP.NET

W tym artykule opisano sposoby używania INNER JOIN do łączenia wyników z dwóch tabel w bazie danych programu SQL Server i wyświetlania ich w tabeli HTML5 w formularzu sieci Web ASP.NET. Ponadto porusza kwestię wykorzystania CSS3 (kaskadowych arkuszy stylów) do zastosowania stylu do tabeli HTML5 w formularzu internetowym ASP.NET.

Zacznijmy.

Tworzenie fikcyjnych danych

Przed wysłaniem zapytania do bazy danych serwera SQL w celu wyświetlenia wyników w tabeli HTML5, musimy mieć pewne dane w tej bazie danych. Dlatego musimy stworzyć fałszywe dane. Tutaj będziemy pracować z bazą danych biblioteki zawierającą dwie tabele, Autorzy i Książki .

Autorzy i Książki będą odnosić się jako „jeden do wielu” – zakładamy, że jeden autor może napisać kilka książek, ale książka może mieć tylko jednego autora. Oczywiście w rzeczywistości jedna książka może mieć kilku współautorów, ale nie zajmiemy się tutaj tym przypadkiem.

Wykonaj następujący skrypt, aby utworzyć fikcyjną bazę danych o nazwie Biblioteka :

CREATE DATABASE Library

Następny skrypt dodaje Autorów i Książki tabele do Biblioteki Baza danych. Zwróć uwagę, że Książki tabela ma kolumnę AuthorIdF . Użyjemy tej kolumny jako kolumny klucza obcego do przechowywania identyfikatorów autorów od Autorów tabela.

USE Library
CREATE TABLE Authors
(
AuthorId INT PRIMARY KEY,
AuthorName VARCHAR (50) NOT NULL,
AuthorGender VARCHAR (50) NOT NULL,
AuthorNationality VARCHAR (50) NOT NULL
)

USE Library
CREATE TABLE Books
(
BookId INT PRIMARY KEY IDENTITY(1,1),
BookName VARCHAR (50) NOT NULL,
BookPrice INT,
AuthorIdF INT,
)

Poniższy skrypt dodaje fikcyjne rekordy do naszego zbioru danych:

INSERT INTO Authors
VALUES (1, 'Author-XYZ', 'Male', 'UK'),
(2, 'Author-WXY','Female', 'USA'),
(5, 'Author-VWX','Female', 'FRANCE'),
(20, 'Author-UVW','Female', 'USA'),
(25, 'Author-TUV','Male', 'UK')


INSERT INTO Books 
VALUES ( 'Book-ABC', 100, 20),
( 'Book-BCD', 200,  20),
( 'Book-CDE', 150,  1),
( 'Book-EFG', 100,1),
( 'Book-FGH', 200, 8),
( 'Book-GHI', 150, 9),
( 'Book-HIJ', 100, 1),
( 'Book-JKL', 200, 10),
('Book-KLM', 150, 8)

Jak działa SQL Server Zapytanie INNER JOIN działa?

Zapytanie SQL INNER JOIN zwraca wiersze z różnych tabel, które mają określone wspólne wartości pasujące do kilku kolumn, w których stosujemy zapytanie JOIN. To może wydawać się skomplikowane, ale tak nie jest. Zobaczysz to sam, obserwując wyniki zapytania INNER JOIN.

Ponadto utworzymy formularz internetowy ASP.NET, który będzie wyświetlał wyniki zapytania sprzężenia INNER, łącząc dane od obu Autorów i Książki tabele. Jednak najpierw musimy napisać zapytanie INNER JOIN i zobaczyć jego wyniki.

Wykonaj następujący skrypt:

USE Library
SELECT  Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId
FROM Books
INNER JOIN Authors
ON Books.AuthorIdF = Authors.AuthorId

Ten skrypt implementuje zapytanie INNER JOIN w dwóch kolumnach:AuthorId kolumna od Autorzy tabeli i AuthorIdF kolumna z Książki stół. Oto wynik:

Jak widać, zapytanie zwróciło tylko te wiersze, w których oba Książki i Autorzy tabele miały wspólną wartość. To było w AuthorIdF kolumna (Książki tabeli) i Identyfikator autora kolumna (Autorzy tabeli).

Uwaga:oryginalne Książki tabela zawierała takie Identyfikatory autorów jako 8,9 i 10. Jednak w Autorzy nie było autorów z takimi identyfikatorami stół. Dlatego zapytanie nie zwróciło wyników dla odpowiednich książek.

Podobnie Autorzy tabela zawiera takie identyfikatory autorów jak 1, 2 i 25. Jednak tych identyfikatorów nie ma w AuthorIdF kolumna Książki stół. Dlatego zapytanie INNER JOIN nie zwróciło odpowiednich wierszy od Autorów tabela.

Teraz, gdy wyjaśniliśmy, czym jest INNER JOIN i jak działa, utwórzmy aplikację ASP.NET. Połączy się z bazą danych SQL Server i wyświetli tabelę HTML5 z wynikami naszego zapytania INNER JOIN.

Wyświetlanie wyników INNER JOIN w tabeli HTML5 z formularzem internetowym ASP.NET

Stworzymy aplikację ASP.NET webforms z Microsoft Visual Studio IDE.

Otwórz nowy projekt w Visual Studio i wybierz Aplikacja internetowa ASP.NET (.NET Framework) z C# szablon z listy:

Następnie nadaj swojemu projektowi niestandardową nazwę i kliknij Utwórz :

Zobaczysz kilka opcji dla Twojej aplikacji internetowej ASP.NET:

Wybierz Pusty z listy szablonów i kliknij Utwórz :

Łączenie SQL Server z Visual Studio

Utworzone wcześniej dane fikcyjne są przechowywane w instancji SQL Server. Dlatego, aby wykonywać na nich zapytania za pośrednictwem aplikacji Visual Studio, musimy połączyć tę aplikację z instancją SQL Server przechowującą dane fikcyjne.

Aby to zrobić, kliknij Eksplorator serwera > kliknij prawym przyciskiem myszy Połączenia danych aby dostać się do menu:

W Dodaj połączenie wpisz wymagane dane:

  • Źródło danych — Microsoft SQL Server (SqlClient).
  • Nazwa serwera – wprowadź nazwę swojej instancji SQL Server.

Jak tylko wprowadzisz nazwę tej instancji SQL Server, która zawiera fałszywe rekordy Biblioteki bazy danych, ta baza danych pojawi się automatycznie na liście.

Wybierz i kliknij Testuj połączenie . Jeśli się powiedzie, zobaczysz komunikat Połączenie testowe powiodło się wiadomość:

Dodawanie i projektowanie formularza internetowego ASP.NET

Po nawiązaniu połączenia z bazą danych SQL Server z poziomu Visual Studio, musimy dodać do aplikacji formularz webowy. Formularz internetowy wyświetli wyniki zapytania INNER JOIN w tabeli HTML 5.

Aby dodać formularz internetowy, kliknij prawym przyciskiem myszy nazwę projektu> Dodaj> Nowy element :

Na liście elementów kliknij Formularz internetowy> Dodaj . Formularz internetowy o nazwie WebForm1.aspx domyślnie zostanie dodany do Twojej aplikacji:

Otwórz właśnie dodany formularz internetowy ASP.NET. Użyj widoku projektu i przeciągnij i upuść przycisk oraz symbol zastępczy z Przybornika do formularza internetowego, jak pokazano na poniższym zrzucie ekranu.

Zmień nazwę tekstu przycisku na Pokaż rekordy . Po kliknięciu przycisku w symbolu zastępczym zostanie wyświetlona tabela HTML zawierająca wynik zapytania INNER JOIN.

Tworzenie tabeli HTML w locie

Kliknij dwukrotnie przycisk dodany do formularza internetowego w poprzednim kroku. C# plik się otworzy. Zaktualizuj zaimportowane szczegóły u góry pliku tak, aby dokładnie pasowały do ​​następującego skryptu :

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

Jedynym przyciskiem w formularzu internetowym jest chroniony, nieważny Button1_Click . Po kliknięciu uruchomi się procedura obsługi zdarzeń. W metodzie modułu obsługi zdarzeń dodaj logikę, która pobiera wyniki z Biblioteki tabela Twojej instancji SQL Server.

Najpierw utwórz parametry połączenia z instancją SQL Server. Następnie przekaż ciąg do SqlConnection obiekt klasy tj. poł. Na koniec połączenie jest otwierane za pomocą metody Open().

Następnym krokiem jest wykonanie zapytania INNER JOIN.

Napisz zapytanie w formacie ciągu i przypisz je do zmiennej „query”. Ciąg znaków i połączenie są następnie przekazywane do obiektu klasy „SqlCommand”.

Aby odczytać rekordy, wywołuje metodę ExecuteReader() obiektu SqlCommand. Ta metoda zwraca obiekt typu SqlDataReader. Możemy więc użyć obiektu klasy SqlDataReader, aby iteracyjnie przejść przez każdy wiersz rekordu wiersz po wierszu.

Spójrz na następujący skrypt:

// Create Connection with the SQL Server 
            String conn_str = @"Data Source=DESKTOP-XXXXXXXXXXXXX;Initial Catalog=Library;Integrated Security=True";
            SqlConnection conn = new SqlConnection(conn_str);

            conn.Open();

            // Query for INNER Join
            string query = "SELECT  Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId" +
                            " FROM Books" +
                            " INNER JOIN Authors" +
                            " ON Books.AuthorIdF = Authors.AuthorId";

            // SQL Command Reader for reading results
            SqlCommand comm = new SqlCommand(query, conn);
            SqlDataReader reader = comm.ExecuteReader();

            StringBuilder table = new StringBuilder();

Parametry połączenia można uzyskać, klikając instancję SQL Server i przechodząc do Właściwości sekcja:

Następnie musimy napisać kod HTML dla tabeli HTML5, która będzie zawierać wyniki zapytania INNER JOIN. W tym celu możesz użyć obiektu StringBuilder.

Poniższy skrypt tworzy tabelę HTML5 z 4 kolumnami:Nazwa książki, Cena książki, Imię i nazwisko autora oraz Identyfikator autora.

// Creating HTML5 Table on the Fly
            table.Append("<table border=1><tr>");


            table.Append("<th>Book Name</th><th>Book Price</th><th>Author Name</th><th>Author Id</th></tr>");

            while (reader.Read())


            {
                table.Append("<tr>");
                table.Append("<td>" + reader.GetString(0) + "</td>");
                table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
                table.Append("<td>" + reader.GetString(2) + "</td>");
                table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
                table.Append("</tr>");
            }

            table.Append("</table");

            conn.Close();
            
            // Binding Table with the Placeholder
            PlaceHolder1.Controls.Add(new Literal { Text = table.ToString() });

SqlDataReader zwróci każdy rekord z zapytania INNER JOIN aż do Read() metoda zwraca prawdę .

Podczas każdej iteracji pętli while każda wartość kolumny danych jest wyodrębniana za pomocą GetString() i GetInt32() metody w zależności od typu kolumny.

Wreszcie tabela jest przypisywana do atrybutu Text obiektu Literal symbolu zastępczego dodanego do formularza.

Pełny kod obsługi zdarzeń Button1 jest następujący:

protected void Button1_Click(object sender, EventArgs e)
        {
            // Create Connection with the SQL Server 
            String conn_str = @"Data Source=DESKTOP-IIBLKH1\SQLEXPRESS;Initial Catalog=Library;Integrated Security=True";
            SqlConnection conn = new SqlConnection(conn_str);

            conn.Open();

            // Query for Join
            string query = "SELECT  Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId" +
                            " FROM Books" +
                            " INNER JOIN Authors" +
                            " ON Books.AuthorIdF = Authors.AuthorId";

            // SQL Command Reader for reading results
            SqlCommand comm = new SqlCommand(query, conn);
            SqlDataReader reader = comm.ExecuteReader();

            StringBuilder table = new StringBuilder();

            // Creating HTML5 Table on the Fly
            table.Append("<table border=1><tr>");


            table.Append("<th>Book Name</th><th>Book Price</th><th>Author Name</th><th>Author Id</th></tr>");

            while (reader.Read())


            {
                table.Append("<tr>");
                table.Append("<td>" + reader.GetString(0) + "</td>");
                table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
                table.Append("<td>" + reader.GetString(2) + "</td>");
                table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
                table.Append("</tr>");
            }

            table.Append("</table");

            conn.Close();
            
            // Binding Table with the Placeholder
            PlaceHolder1.Controls.Add(new Literal { Text = table.ToString() });

        }

Teraz, jeśli uruchomisz projekt, zobaczysz stronę internetową z jednym przyciskiem zawierającym Pokaż rekordy tekst. Po kliknięciu tego przycisku widzimy wyniki zapytania INNER JOIN, jak pokazano poniżej:

Styl CSS3 tabeli HTML5

Nasz stół wygląda na trochę suchy. Możemy poprawić jego wygląd i styl za pomocą CSS3 (Cascading Style Sheet 3). Służy do dodawania stylów do obiektów HTML na stronie internetowej.

Aby dodać plik CSS3 w Visual Studio, kliknij prawym przyciskiem myszy nazwę projektu> Dodaj> Nowy element :

Na liście elementów kliknij Arkusz stylów . Zmień nazwę arkusza stylów main_stylesheet.css i kliknij Dodaj .

Aby połączyć arkusz stylów z formularzem internetowym, przeciągnij arkusz stylów i upuść go w nagłówku sekcji formularza internetowego. Dodaj też class=mybtn do skryptu Button1 . Ta klasa zmodyfikuje styl przycisku z wnętrza arkusza stylów.

Teraz otwórz arkusz stylów i dodaj następujące style do swojego arkusza stylów.

body {
}

#form1 {
    width: 600px;
    height: 600px;
    background-color: darkkhaki;
    margin: auto;
}

.mybtn {
    width: 100%;
    background-color: cornflowerblue;
    font-size: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

Te style aktualizują szerokość, wysokość, kolor tła i marginesy. Aktualizują również szerokość przycisku, aby został rozszerzony do 100% kontenera nadrzędnego. Kolor tła przycisku również zostanie zaktualizowany, a tabela zostanie rozszerzona do 100%.

Jeśli ponownie uruchomimy formularz internetowy, zobaczysz następującą stronę internetową ze zaktualizowanymi przyciskami i stylami formularzy:

Jeśli klikniesz Pokaż rekordy , zobaczysz wyniki zapytania INNER JOIN w tabeli HTML5, stylizowanej za pomocą skryptu CSS3.

Wniosek

Artykuł wyjaśnia istotę i cel zapytania SQL Server INNER JOIN. Nauczyliśmy się stosować to zapytanie, aby uzyskać i połączyć wyniki z różnych tabel o wspólnych wartościach.

Korzystanie z formularza internetowego ASP.NET pozwala nam wizualizować wyniki zapytania, więc nauczyliśmy się tworzyć taką niestandardową aplikację dla naszych potrzeb. Wreszcie nauczyliśmy się dostosowywać widok wyników za pomocą CSS do naszych preferencji.

Przeczytaj również

Twój ostateczny przewodnik po SQL Join:INNER JOIN – część 1

Podstawy łączenia wewnętrznego SQL Server z przykładami


  1. Database
    2.   
  2. Mysql
    3.   
  3. Oracle
    4.   
  4. Sqlserver
    5.   
  5. PostgreSQL
    6.   
  6. Access
    7.   
  7. SQLite
    8.   
  8. MariaDB

  1. Import SSIS Excel wymuszający nieprawidłowy typ kolumny

  2. SQL Server 2005 Jak stworzyć unikalne ograniczenie?

  3. Co to jest „identyfikator wieloczęściowy” i dlaczego nie można go powiązać?

  4. Wskazówki dotyczące korzystania z SQL Server z Salesforce

  5. Przestawiaj wiele kolumn na podstawie jednej kolumny w SQL Server