Sqlserver
 sql >> Cơ Sở Dữ Liệu >  >> RDS >> Sqlserver

Sử dụng INNER JOIN để kết hợp các bảng của máy chủ SQL và hiển thị chúng trong ASP.NET Webforms

Bài viết này mô tả các cách sử dụng INNER JOIN để kết hợp kết quả từ hai bảng trong cơ sở dữ liệu SQL Server và hiển thị chúng trong bảng HTML5 bên trong biểu mẫu web ASP.NET. Ngoài ra, nó đề cập đến câu hỏi sử dụng CSS3 (các biểu định kiểu xếp tầng) để áp dụng một kiểu cho bảng HTML5 trong một biểu mẫu web ASP.NET.

Hãy bắt đầu.

Tạo dữ liệu giả

Trước khi truy vấn cơ sở dữ liệu máy chủ SQL để hiển thị kết quả trong bảng HTML5, chúng ta cần có một số dữ liệu trong cơ sở dữ liệu đó. Do đó, chúng ta phải tạo một số dữ liệu giả. Ở đây, chúng tôi sẽ làm việc với cơ sở dữ liệu thư viện chứa hai bảng, Tác giả và Sách .

Tác giả và Sách sẽ liên quan đến “một-nhiều” - chúng tôi giả định rằng một tác giả có thể viết nhiều cuốn sách, nhưng một cuốn sách có thể chỉ có một tác giả duy nhất. Tất nhiên, trên thực tế, một cuốn sách có thể có nhiều đồng tác giả, nhưng chúng tôi sẽ không giải quyết trường hợp này ở đây.

Thực thi tập lệnh sau để tạo cơ sở dữ liệu giả có tên Thư viện :

CREATE DATABASE Library

Tập lệnh tiếp theo thêm Tác giả và Sách bảng vào Thư viện cơ sở dữ liệu. Lưu ý rằng Sách bảng có cột AuthorIdF . Chúng tôi sẽ sử dụng cột này làm cột khóa ngoại để lưu trữ ID tác giả từ Tác giả bảng. 

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

Tập lệnh sau thêm các bản ghi giả vào tập dữ liệu của chúng tôi:

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)

SQL Server hoạt động như thế nào Công việc truy vấn INNER JOIN?

Truy vấn SQL INNER JOIN trả về các hàng từ các bảng khác nhau có các giá trị chung cụ thể khớp trong một số cột nơi chúng tôi áp dụng truy vấn JOIN. Nghe có vẻ phức tạp nhưng thực tế không phải vậy. Bạn sẽ tự mình thấy điều đó khi quan sát kết quả truy vấn INNER JOIN.

Hơn nữa, chúng tôi sẽ tạo một biểu mẫu web ASP.NET sẽ hiển thị kết quả truy vấn kết hợp INNER, kết hợp dữ liệu từ cả Tác giả và Sách những cái bàn. Tuy nhiên, trước tiên chúng ta cần viết một truy vấn INNER JOIN và xem kết quả mà nó cung cấp.

Thực thi tập lệnh sau:

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

Tập lệnh này triển khai truy vấn INNER JOIN trên hai cột: AuthorId từ cột Tác giả bảng và AuthorIdF từ Sách bàn. Đây là kết quả:

Như bạn có thể thấy, truy vấn chỉ trả về các hàng đó trong đó cả Sách và Tác giả bảng có một giá trị chung. Nó nằm trong AuthorIdF cột ( Sách bảng) và AuthorId cột ( Tác giả bảng).

Lưu ý: Sách gốc bảng chứa Id tác giả như vậy như 8,9 và 10. Tuy nhiên, không có tác giả nào có ID như vậy trong Tác giả bàn. Do đó, truy vấn không trả về kết quả cho các sách tương ứng.

Tương tự, Tác giả bảng bao gồm các ID của tác giả như 1, 2 và 25. Tuy nhiên, những ID này không có trong AuthorIdF cột Sách bàn. Do đó, truy vấn INNER JOIN không trả về các hàng tương ứng từ Tác giả bảng.

Bây giờ chúng ta đã làm rõ INNER JOIN là gì và nó hoạt động như thế nào, hãy tạo một ứng dụng ASP.NET. Nó sẽ kết nối với cơ sở dữ liệu SQL Server và hiển thị bảng HTML5 với kết quả của truy vấn INNER JOIN của chúng tôi.

Hiển thị kết quả INNER JOIN trong Bảng HTML5 với ASP.NET Webform

Chúng tôi sẽ tạo ứng dụng ASP.NET webforms bằng Microsoft Visual Studio IDE.

Mở một dự án mới trong Visual Studio và chọn ASP.NET Web Application (.NET Framework) với C # mẫu từ danh sách:

Tiếp theo, đặt tên tùy chỉnh cho dự án của bạn và nhấp vào Tạo :

Bạn sẽ thấy một số tùy chọn cho Ứng dụng Web ASP.NET của mình:

Chọn Trống từ danh sách các mẫu và nhấp vào Tạo :

Kết nối SQL Server với Visual Studio

Dữ liệu giả mà chúng tôi đã tạo trước đó được lưu trữ trong một phiên bản SQL Server. Do đó, để thực thi các truy vấn trên chúng thông qua ứng dụng Visual Studio, chúng ta cần kết nối ứng dụng đó với phiên bản SQL Server lưu trữ dữ liệu giả.

Để làm như vậy, hãy nhấp vào Server Explorer > nhấp chuột phải vào Kết nối dữ liệu để đến menu:

Trong Thêm kết nối cửa sổ, điền vào dữ liệu cần thiết:

  • Nguồn dữ liệu - Microsoft SQL Server (SqlClient).
  • Tên máy chủ - nhập tên của phiên bản Máy chủ SQL của bạn.

Ngay sau khi bạn nhập tên của phiên bản SQL Server có chứa các bản ghi giả của Thư viện cơ sở dữ liệu, cơ sở dữ liệu đó sẽ tự động xuất hiện trong danh sách.

Chọn nó và nhấp vào Kiểm tra kết nối . Nếu thành công, bạn sẽ thấy thông báo Kiểm tra kết nối thành công tin nhắn:

Thêm và thiết kế biểu mẫu web ASP.NET

Sau khi thiết lập kết nối với cơ sở dữ liệu SQL Server từ Visual Studio, chúng ta cần thêm biểu mẫu web vào ứng dụng. Biểu mẫu web sẽ hiển thị kết quả của truy vấn INNER JOIN bên trong bảng HTML 5.

Để thêm biểu mẫu web, nhấp chuột phải vào tên dự án> Thêm> Mục mới :

Từ danh sách các mục, nhấp vào Biểu mẫu web> Thêm . Biểu mẫu web có tên WebForm1.aspx theo mặc định sẽ được thêm vào ứng dụng của bạn:

Mở biểu mẫu web ASP.NET mà bạn vừa thêm. Sử dụng dạng xem thiết kế và kéo và thả nút cũng như trình giữ chỗ từ Hộp công cụ vào Biểu mẫu web như thể hiện trong ảnh chụp màn hình sau.

Đổi tên văn bản nút thành Hiển thị bản ghi . Khi bạn nhấp vào nút, bảng HTML chứa kết quả truy vấn INNER JOIN sẽ được hiển thị trong trình giữ chỗ.

Tạo Bảng HTML một cách nhanh chóng

Bấm đúp vào nút mà bạn đã thêm vào Biểu mẫu web ở bước trước. Đ C # tệp sẽ mở. Cập nhật các chi tiết đã nhập ở đầu tệp để chúng khớp chính xác với tập lệnh sau :

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;

Nút duy nhất trên biểu mẫu web là protected void Button1_Click . Khi bạn nhấp vào nó, trình xử lý sự kiện sẽ bắt đầu. Bên trong phương thức cho trình xử lý sự kiện, hãy thêm logic truy xuất kết quả từ Thư viện bảng Phiên bản máy chủ SQL của bạn.

Đầu tiên, tạo một chuỗi kết nối đến phiên bản SQL Server của bạn. Tiếp theo, chuyển chuỗi vào SqlConnection đối tượng lớp tức là conn. Cuối cùng, kết nối được mở thông qua phương thức Open ().

Bước tiếp theo là thực hiện truy vấn INNER JOIN.

Viết truy vấn ở định dạng chuỗi và gán nó cho biến "truy vấn". Sau đó, chuỗi và kết nối được chuyển đến đối tượng lớp “SqlCommand”.

Để đọc các bản ghi, nó gọi phương thức ExecuteReader () của đối tượng SqlCommand. Phương thức này trả về đối tượng kiểu SqlDataReader. Do đó, chúng ta có thể sử dụng đối tượng lớp SqlDataReader để lặp đi lặp lại từng dòng bản ghi.

Hãy xem tập lệnh sau:

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

Bạn có thể lấy chuỗi kết nối bằng cách nhấp vào phiên bản SQL Server và đi tới Thuộc tính phần:

Tiếp theo, chúng ta cần viết mã HTML cho bảng HTML5 sẽ chứa kết quả truy vấn INNER JOIN. Bạn có thể sử dụng đối tượng StringBuilder cho mục đích đó.

Tập lệnh sau tạo bảng HTML5 với 4 cột:Tên sách, Giá sách, Tên tác giả và Id tác giả. 

// 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 sẽ trả về từng bản ghi từ truy vấn INNER JOIN cho đến khi Read () phương thức trả về true .

Trong mỗi lần lặp lại của vòng lặp while, mỗi giá trị cột dữ liệu được trích xuất qua GetString () và GetInt32 () tùy thuộc vào loại cột.

Cuối cùng, bảng được gán cho Thuộc tính văn bản của đối tượng Literal trình giữ chỗ được thêm vào biểu mẫu.

Mã hoàn chỉnh cho trình xử lý sự kiện Button1 như sau:

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

        }

Bây giờ, nếu bạn chạy dự án, bạn sẽ thấy một trang web có một nút duy nhất chứa Hiển thị bản ghi bản văn. Sau khi nhấp vào nút đó, chúng tôi thấy kết quả truy vấn INNER JOIN như được hiển thị bên dưới:

Tạo kiểu CSS3 của Bảng HTML5

Bàn của chúng tôi trông hơi khô. Chúng tôi có thể cải thiện giao diện và phong cách của nó với sự trợ giúp của CSS3 (Cascading Style Sheet 3). Nó phục vụ để thêm các kiểu vào các đối tượng HTML trong một trang web.

Để thêm tệp CSS3 trong Visual Studio, nhấp chuột phải vào tên dự án> Thêm> Mục mới :

Từ danh sách các mục, hãy nhấp vào Trang định kiểu . Đổi tên biểu định kiểu main_stylesheet.css và nhấp vào Thêm .

Để kết nối biểu định kiểu với biểu mẫu web, hãy kéo biểu định kiểu và thả vào head phần của biểu mẫu web. Ngoài ra, hãy thêm class =mybtn vào tập lệnh cho Button1 . Lớp này sẽ sửa đổi kiểu của nút từ bên trong biểu định kiểu.

Bây giờ, hãy mở biểu định kiểu và thêm các kiểu sau vào biểu định kiểu của bạn. 

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

Các kiểu này cập nhật chiều rộng, chiều cao, màu nền và lề. Họ cũng cập nhật chiều rộng nút để nó được mở rộng đến 100% vùng chứa mẹ. Màu nền của nút cũng được cập nhật và bảng được mở rộng thành 100%.

Nếu chúng tôi chạy lại biểu mẫu web, bạn sẽ thấy trang web sau với nút và kiểu biểu mẫu được cập nhật ở đó:

Nếu bạn nhấp vào Hiển thị bản ghi , bạn sẽ thấy kết quả truy vấn INNER JOIN trong một bảng HTML5, được tạo kiểu thông qua tập lệnh CSS3.

Kết luận

Bài viết làm rõ bản chất và mục đích của truy vấn SQL Server INNER JOIN. Chúng tôi đã học cách áp dụng truy vấn này để lấy và kết hợp các kết quả từ các bảng khác nhau có các giá trị chung.

Sử dụng biểu mẫu web ASP.NET cho phép chúng tôi trực quan hóa kết quả truy vấn, vì vậy chúng tôi đã học cách tạo một ứng dụng tùy chỉnh như vậy cho nhu cầu của mình. Cuối cùng, chúng tôi đã học cách điều chỉnh chế độ xem kết quả với sự trợ giúp của CSS theo sở thích của chúng tôi.

Cũng đọc

Hướng dẫn cơ bản của bạn về tham gia SQL:INNER JOIN - Phần 1

Khái niệm cơ bản về tham gia bên trong máy chủ SQL với các ví dụ


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

  1. SQL:Chọn 3 bản ghi hàng đầu + Tổng số lượng

  2. Xóa sự kiện khỏi Cơ sở dữ liệu Thư đăng nhập trong SQL Server (T-SQL)

  3. Truy vấn SQL Server:Nhanh với Literal nhưng chậm với Variable

  4. Cách cài đặt SQL Server trên máy Mac M1 (ARM64)

  5. Cập nhật nhiều bảng trong SQL Server bằng INNER JOIN