Sqlserver
 sql >> база данни >  >> RDS >> Sqlserver

Използване на INNER JOIN за комбиниране на таблици на SQL Server и показването им в ASP.NET уебформи

Тази статия описва начините за използване на INNER JOIN за комбиниране на резултати от две таблици в базата данни на SQL Server и показването им в HTML5 таблица в уеб формуляр на ASP.NET. Освен това, той засяга въпроса за използването на CSS3 (каскадни таблици със стилове) за прилагане на стил към HTML5 таблицата в уеб формуляр на ASP.NET.

Да започнем.

Създаване на фиктивни данни

Преди да отправим заявка към база данни на SQL сървър, за да покажем резултати в HTML5 таблицата, трябва да имаме някои данни в тази база данни. По този начин трябва да създадем някои фиктивни данни. Тук ще работим с библиотечна база данни, съдържаща две таблици, Автори икниги .

Автори икниги ще се отнасят като „едно към много“ – приемаме, че един автор може да напише няколко книги, но една книга може да има само един автор. Разбира се, в действителност една книга може да има няколко съавтори, но тук няма да се занимаваме с този случай.

Изпълнете следния скрипт, за да създадете фиктивна база данни с име Библиотека :

CREATE DATABASE Library

Следващият скрипт добавя Авторите икниги таблици към Библиотеката база данни. Обърнете внимание, че Книги таблицата има колона AuthorIdF . Ще използваме тази колона като колона за външен ключ, за да съхраняваме идентификаторите на авторите от Автори таблица.

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

Следният скрипт добавя фиктивни записи към нашия набор от данни:

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 сървърът Заявката за INNER JOIN работи?

SQL INNER JOIN заявката връща редове от различни таблици, които имат специфични общи стойности, съвпадащи в няколко колони, където прилагаме заявката JOIN. Може да звучи сложно, но не е. Ще го видите сами, когато наблюдавате резултатите от заявката INNER JOIN.

Освен това ще създадем ASP.NET уеб формуляр, който ще показва резултатите от заявката за INNER присъединяване, комбинирайки данните от двата Автори икниги маси. Трябва обаче първо да напишем заявка INNER JOIN и да видим резултатите, които тя предоставя.

Изпълнете следния скрипт:

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

Този скрипт изпълнява заявка INNER JOIN в две колони:AuthorId колона от Автори таблицата и AuthorIdF колона от Книги маса. Ето резултата:

Както можете да видите, заявката върна тези редове само там, където и двете Книги иАвтори таблиците имаха обща стойност. Беше в AuthorIdF колона (Книги таблица) и AuthorId колона (Автори таблица).

Забележка:Оригиналните книги таблицата съдържаше такива идентификатори на автора като 8,9 и 10. В Автори обаче нямаше автори с такива идентификационни номера маса. Следователно заявката не изведе резултати за съответните книги.

По същия начин, Авторите таблицата включва такива идентификатори на автори като 1, 2 и 25. Тези идентификатори обаче отсъстват в AuthorIdF колона на Книги маса. По този начин заявката INNER JOIN не върна съответните редове от Авторите таблица.

След като изяснихме какво е INNER JOIN и как работи, нека създадем ASP.NET приложение. Той ще се свърже с база данни на SQL Server и ще покаже HTML5 таблицата с резултатите от нашата заявка INNER JOIN.

Показване на резултата INNER JOIN в HTML5 таблица с ASP.NET уеб формуляр

Ще създадем приложението за уеб формуляри ASP.NET с Microsoft Visual Studio IDE.

Отворете нов проект във Visual Studio и изберете ASP.NET уеб приложение (.NET Framework) с C# шаблон от списъка:

След това дайте на проекта си персонализирано име и щракнете върху Създаване :

Ще видите няколко опции за вашето ASP.NET уеб приложение:

Изберете Празно от списъка с шаблони и щракнете върху Създаване :

Свързване на SQL Server с Visual Studio

Фиктивните данни, които създадохме по-рано, се съхраняват в екземпляр на SQL Server. Следователно, за да изпълним заявки към тях чрез приложението Visual Studio, трябва да свържем това приложение към екземпляра на SQL Server, съхраняващ фиктивните данни.

За да направите това, щракнете върху Server Explorer > щракнете с десния бутон върху Data Connections за да стигнете до менюто:

В Добавяне на връзка прозорец, попълнете необходимите данни:

  • Източник на данни – Microsoft SQL Server (SqlClient).
  • Име на сървъра – въведете името на вашия екземпляр на SQL Server.

Веднага след като въведете името на този екземпляр на SQL Server, който съдържа фиктивните записи на Библиотеката база данни, тази база данни ще се появи автоматично в списъка.

Изберете го и щракнете върху Тестиране на връзката . Ако е успешен, ще видите Тестовата връзка е успешна съобщение:

Добавяне и проектиране на ASP.NET уеб формуляр

След като установим връзка с базата данни на SQL Server от Visual Studio, трябва да добавим уеб формуляр към приложението. Уеб формулярът ще покаже резултатите от заявката INNER JOIN в HTML 5 таблица.

За да добавите уеб формуляр, щракнете с десния бутон върху името на проекта> Добавяне> Нов елемент :

От списъка с елементи щракнете върху Уеб формуляр> Добавяне . Уеб формуляр с име WebForm1.aspx по подразбиране ще бъде добавен към вашето приложение:

Отворете уеб формуляра на ASP.NET, който току-що добавихте. Използвайте изгледа за дизайн и плъзнете и пуснете бутона и заместителя от кутията с инструменти към уеб формата, както е показано на следващата екранна снимка.

Преименувайте текста на бутона на Показване на записи . Когато щракнете върху бутона, HTML таблицата, съдържаща резултата от заявката INNER JOIN, ще се покаже в заместителя.

Създаване на HTML таблицата в движение

Щракнете двукратно върху бутона, който сте добавили към уеб формуляра в предишната стъпка. C# файл ще се отвори. Актуализирайте импортираните подробности в горната част на файла така че да съответстват точно на следния скрипт :

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;

Единственият бутон в уеб формуляра е protected void Button1_Click . Когато щракнете върху него, манипулаторът на събития ще стартира. В метода за манипулатора на събития добавете логиката, която извлича резултати от Библиотеката таблица на вашия екземпляр на SQL Server.

Първо, създайте низ за връзка към вашия екземпляр на SQL Server. След това предайте низа на SqlConnection клас обект т.е. conn. Накрая връзката се отваря чрез метода Open().

Следващата стъпка е да изпълните заявката INNER JOIN.

Напишете заявката в низов формат и я присвоете на променливата „заявка“. След това низът и връзката се предават на обекта от клас „SqlCommand“.

За да прочете записите, той извиква метода ExecuteReader() на обекта SqlCommand. Този метод връща обекта от типа SqlDataReader. По този начин можем да използваме обект на клас SqlDataReader за итеративно преминаване през всеки запис ред по ред.

Разгледайте следния скрипт:

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

Можете да получите низа за връзка, като щракнете върху екземпляра на SQL Server и отидете на Свойства раздел:

След това трябва да напишем HTML код за HTML5 таблицата, която ще съдържа резултатите от заявката INNER JOIN. Можете да използвате обект StringBuilder за тази цел.

Следният скрипт създава HTML5 таблицата с 4 колони:име на книга, цена на книга, име на автор и идентификатор на автора.

// 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 ще върне всеки запис от заявката INNER JOIN до Read() методът връща true .

По време на всяка итерация на цикъла while всяка стойност на колона с данни се извлича чрез GetString() и GetInt32() методи в зависимост от типа колона.

Накрая таблицата се присвоява на Текстовия атрибут на обекта Literal на заместителя, добавен към формуляра.

Пълният код за манипулатора на събитие Button1 е както следва:

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

        }

Сега, ако стартирате проекта, ще видите уеб страница с един бутон, съдържащ Показване на записи текст. След като щракнете върху този бутон, виждаме резултатите от заявката INNER JOIN, както е показано по-долу:

CSS3 стил на HTML5 таблица

Нашата маса изглежда малко суха. Можем да подобрим външния му вид и стил с помощта на CSS3 (Cascading Style Sheet 3). Той служи за добавяне на стилове към HTML обекти в уеб страница.

За да добавите CSS3 файл във Visual Studio, щракнете с десния бутон върху името на проекта> Добавяне> Нов елемент :

От списъка с елементи щракнете върху Стилов лист . Преименувайте листа със стилове main_stylesheet.css и щракнете върху Добавяне .

За да свържете стиловата таблица с уеб формуляра, плъзнете листа със стилове и го пуснете в главата раздел на уеб формуляра. Също така добавете class=mybtn към скрипта за Button1 . Този клас ще промени стила на бутона от вътрешната страна на листа със стилове.

Сега отворете листа със стилове и добавете следните стилове към вашия стилов лист.

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

Тези стилове актуализират ширината, височината, цвета на фона и полетата. Те също така актуализират ширината на бутона, така че да се разшири до 100% от родителския контейнер. Цветът на фона на бутона също се актуализира и таблицата се разширява до 100%.

Ако стартираме уеб формуляра отново, ще видите следната уеб страница с актуализирани бутони и стилове на формуляра:

Ако щракнете върху Показване на записи , ще видите резултатите от заявката INNER JOIN в HTML5 таблица, стилизирана чрез скрипта CSS3.

Заключение

Статията изяснява същността и целта на заявката INNER JOIN на SQL Server. Научихме се да прилагаме тази заявка, за да получим и комбинираме резултатите от различни таблици с общи стойности.

Използването на уеб формата ASP.NET ни позволява да визуализираме резултатите от заявката, така че се научихме да създаваме такова персонализирано приложение за нашите нужди. Най-накрая се научихме да коригираме изгледа на резултатите с помощта на CSS към нашите предпочитания.

Прочетете също

Вашето окончателно ръководство за SQL присъединяване:INNER JOIN – Част 1

Основни положения за вътрешното присъединяване на SQL Server с примери


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

  1. Как да сравните datetime само с дата в SQL Server

  2. Как да премахнете ограничението на външния ключ в базата данни на SQL Server - SQL Server / TSQL урок, част 75

  3. Как да посочите съпоставянето в заявка в SQL Server (T-SQL)

  4. Добавете стойност по подразбиране на полето за дата и час в SQL Server към времева марка

  5. Как да изтрия големи данни от таблица в SQL без дневник?