sql >> Databáze >  >> RDS >> Sqlserver

Použití INNER JOIN ke kombinaci tabulek SQL Server a jejich zobrazení ve webových formulářích ASP.NET

Tento článek popisuje způsoby použití INNER JOIN ke kombinaci výsledků ze dvou tabulek v databázi SQL Server a jejich zobrazení v tabulce HTML5 uvnitř webového formuláře ASP.NET. Navíc se dotýká otázky použití CSS3 (kaskádové šablony stylů) k aplikaci stylu na tabulku HTML5 ve webovém formuláři ASP.NET.

Začněme.

Vytvoření fiktivních dat

Před dotazem na databázi SQL serveru pro zobrazení výsledků v tabulce HTML5 potřebujeme mít v této databázi nějaká data. Musíme tedy vytvořit nějaká fiktivní data. Zde budeme pracovat s databází knihovny obsahující dvě tabulky Autoři a Knihy .

Autoři a Knihy se bude vztahovat jako „one-to-many“ – předpokládáme, že jeden autor může napsat několik knih, ale kniha může mít pouze jediného autora. Ve skutečnosti může mít jedna kniha samozřejmě několik spoluautorů, ale tímto případem se zde zabývat nebudeme.

Spuštěním následujícího skriptu vytvořte fiktivní databázi s názvem Library :

CREATE DATABASE Library

Další skript přidá Autory a Knihy tabulky do knihovny databáze. Všimněte si, že Knihy tabulka má sloupec AuthorIdF . Tento sloupec použijeme jako sloupec cizího klíče k uložení ID autorů od Autorů tabulka.

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

Následující skript přidá fiktivní záznamy do naší datové sady:

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 funguje SQL Server INNER JOIN Query Work?

SQL dotaz INNER JOIN vrací řádky z různých tabulek, které mají specifické společné hodnoty odpovídající v několika sloupcích, kde aplikujeme dotaz JOIN. Může to znít složitě, ale není. Sami to uvidíte při sledování výsledků dotazu INNER JOIN.

Dále vytvoříme webový formulář ASP.NET, který bude zobrazovat výsledky dotazu VNITŘNÍHO spojení a kombinuje data od obou Autorů a Knihy tabulky. Nejprve však musíme napsat dotaz INNER JOIN a podívat se na výsledky, které poskytuje.

Spusťte následující skript:

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

Tento skript implementuje dotaz INNER JOIN ve dvou sloupcích:AuthorId ze sloupce Autoři tabulka a AuthorIdF ze sloupce Knihy stůl. Zde je výsledek:

Jak vidíte, dotaz vrátil pouze ty řádky, kde byly obě Knihy a Autoři tabulky měly společnou hodnotu. Bylo to v AuthorIdF sloupec (Knihy tabulka) a ID autora sloupec (Autoři tabulka).

Poznámka:Původní knihy tabulka taková ID autora obsahovala jako 8, 9 a 10. V sekci Autoři však nebyli autoři s takovými ID stůl. Dotaz proto nevrátil výsledky pro odpovídající knihy.

Podobně jsou na tom Autoři tabulka obsahuje taková ID autorů jako 1, 2 a 25. Tato ID však v AuthorIdF chybí. ve sloupci Knihy stůl. Dotaz INNER JOIN tedy nevrátil odpovídající řádky od autorů tabulka.

Nyní, když jsme si ujasnili, co je INNER JOIN a jak funguje, pojďme vytvořit aplikaci ASP.NET. Připojí se k databázi SQL Server a zobrazí tabulku HTML5 s výsledky našeho dotazu INNER JOIN.

Zobrazení výsledku INNER JOIN v tabulce HTML5 pomocí webového formuláře ASP.NET

Vytvoříme ASP.NET webforms aplikaci s Microsoft Visual Studio IDE.

Otevřete nový projekt v sadě Visual Studio a vyberte Webová aplikace ASP.NET (.NET Framework) pomocí C# šablony ze seznamu:

Dále dejte projektu vlastní název a klikněte na Vytvořit :

Uvidíte několik možností pro webovou aplikaci ASP.NET:

Vyberte Prázdné ze seznamu šablon a klikněte na Vytvořit :

Propojení serveru SQL Server se sadou Visual Studio

Falešná data, která jsme vytvořili dříve, jsou uložena v instanci SQL Server. Proto, abychom na ně mohli spouštět dotazy prostřednictvím aplikace Visual Studio, musíme tuto aplikaci připojit k instanci SQL Serveru, kde jsou uložena fiktivní data.

Chcete-li tak učinit, klikněte na Server Explorer > klikněte pravým tlačítkem na Datová připojení se dostanete do nabídky:

V části Přidat připojení okno, vyplňte požadované údaje:

  • Zdroj dat – Microsoft SQL Server (SqlClient).
  • Název serveru – zadejte název instance serveru SQL.

Jakmile zadáte název instance SQL Server, která obsahuje fiktivní záznamy Knihovny databáze, tato databáze se automaticky objeví v seznamu.

Vyberte jej a klikněte na Testovat připojení . Pokud bude úspěšné, zobrazí se Test připojení proběhl úspěšně zpráva:

Přidání a návrh webového formuláře ASP.NET

Po navázání spojení s databází SQL Server z Visual Studia musíme do aplikace přidat webový formulář. Webový formulář zobrazí výsledky dotazu INNER JOIN v tabulce HTML 5.

Chcete-li přidat webový formulář, klikněte pravým tlačítkem na název projektu> Přidat> Nová položka :

V seznamu položek klikněte na Webový formulář> Přidat . Webový formulář s názvem WebForm1.aspx ve výchozím nastavení bude přidáno do vaší aplikace:

Otevřete webový formulář ASP.NET, který jste právě přidali. Použijte zobrazení návrhu a přetáhněte tlačítko a zástupný symbol z panelu nástrojů do webového formuláře, jak je znázorněno na následujícím snímku obrazovky.

Přejmenujte text tlačítka na Zobrazit záznamy . Po kliknutí na tlačítko se v zástupném symbolu zobrazí tabulka HTML obsahující výsledek dotazu INNER JOIN.

Vytvoření tabulky HTML za běhu

Poklepejte na tlačítko, které jste přidali do webového formuláře v předchozím kroku. A C# soubor se otevře. Aktualizujte importované podrobnosti v horní části souboru tak, aby přesně odpovídaly následujícímu skriptu :

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;

Jediné tlačítko na webovém formuláři je chráněné void Button1_Click . Když na něj kliknete, spustí se obslužná rutina události. Do metody pro obsluhu události přidejte logiku, která načítá výsledky z Knihovny tabulky vaší instance SQL Server.

Nejprve vytvořte připojovací řetězec k vaší instanci SQL Server. Dále předejte řetězec do SqlConnection objekt třídy t.j. spoj. Nakonec se spojení otevře pomocí metody Open().

Dalším krokem je provedení dotazu INNER JOIN.

Napište dotaz ve formátu řetězce a přiřaďte jej do proměnné „query“. Řetězec a připojení jsou poté předány objektu třídy „SqlCommand“.

Pro čtení záznamů volá metodu ExecuteReader() objektu SqlCommand. Tato metoda vrací objekt typu SqlDataReader. Můžeme tedy použít objekt třídy SqlDataReader k opakování každého záznamu řádek po řádku.

Podívejte se na následující skript:

// 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();

Připojovací řetězec získáte kliknutím na instanci SQL Server a přechodem na Vlastnosti sekce:

Dále musíme napsat HTML kód pro HTML5 tabulku, která bude obsahovat výsledky dotazu INNER JOIN. K tomuto účelu můžete použít objekt StringBuilder.

Následující skript vytvoří tabulku HTML5 se 4 sloupci:Název knihy, Cena knihy, Jméno autora a ID 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 vrátí každý záznam z dotazu INNER JOIN až do Read() metoda vrací true .

Během každé iterace cyklu while je každá hodnota sloupce dat extrahována pomocí GetString() a GetInt32() metody v závislosti na typu sloupce.

Nakonec je tabulka přiřazena k atributu Text objektu Literal zástupného symbolu přidaného do formuláře.

Úplný kód pro obslužnou rutinu události Button1 je následující:

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() });

        }

Nyní, když projekt spustíte, uvidíte webovou stránku s jediným tlačítkem obsahující Zobrazit záznamy text. Po kliknutí na toto tlačítko uvidíme výsledky dotazu INNER JOIN, jak je uvedeno níže:

Styl CSS3 tabulky HTML5

Náš stůl vypadá trochu suchý. Jeho vzhled a styl můžeme vylepšit pomocí CSS3 (Cascading Style Sheet 3). Slouží k přidávání stylů do HTML objektů na webové stránce.

Chcete-li v sadě Visual Studio přidat soubor CSS3, klikněte pravým tlačítkem na název projektu> Přidat> Nová položka :

V seznamu položek klikněte na Tabulka stylů . Přejmenujte šablonu stylů main_stylesheet.css a klikněte na Přidat .

Chcete-li šablonu stylů připojit k webovému formuláři, přetáhněte šablonu stylů a pusťte ji do hlavy části webového formuláře. Přidejte také class=mybtn do skriptu pro Button1 . Tato třída upraví styl tlačítka ze šablony stylů.

Nyní otevřete šablonu stylů a přidejte do své šablony stylů následující styly.

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

Tyto styly aktualizují šířku, výšku, barvu pozadí a okraje. Také aktualizují šířku tlačítka tak, aby se roztáhlo na 100 % nadřazeného kontejneru. Barva pozadí tlačítka se také aktualizuje a tabulka se rozšíří na 100 %.

Pokud znovu spustíme webový formulář, uvidíte následující webovou stránku s aktualizovaným tlačítkem a styly formuláře:

Pokud kliknete na Zobrazit záznamy , uvidíte výsledky dotazu INNER JOIN v tabulce HTML5, stylizované pomocí skriptu CSS3.

Závěr

Článek objasňuje podstatu a účel dotazu SQL Server INNER JOIN. Naučili jsme se používat tento dotaz k získávání a kombinování výsledků z různých tabulek se společnými hodnotami.

Použití webového formuláře ASP.NET nám umožňuje vizualizovat výsledky dotazů, takže jsme se naučili vytvářet takovou vlastní aplikaci pro naše potřeby. Nakonec jsme se naučili upravit zobrazení výsledků pomocí CSS podle našich preferencí.

Přečtěte si také

Váš dokonalý průvodce SQL Join:INNER JOIN – část 1

Základy SQL Server Inner Join s příklady


  1. Průvodce pro CTE v SQL Server

  2. Srovnávání spravovaných cloudových řešení PostgreSQL – Google Cloud:Část třetí

  3. Indexování databáze v PostgreSQL

  4. SQL Server Azure / 2022 Database Ledger Tables z Linuxu.