구름조아

WebForms / C# - DB에 연결해서 GridView에 바인딩 및 페이징 본문

ASP.NET/WebForms

WebForms / C# - DB에 연결해서 GridView에 바인딩 및 페이징

김옹희 2023. 5. 10. 11:21

데이터베이스 연결

 

데이터베이스 연결은 다음과 같이 이루어진다.

 

1. 연결 문자열 생성

string connString = "Data Source=계정IP주소;Initial Catalog=데이터베이스이름;
User ID=아이디;Password=비밀번호";

 

  • 위의 연결 문자열에서 Data Source는 데이터베이스 서버의 주소를 나타내며, Initial Catalog은 연결할 데이터베이스의 이름을 나타냅니다.
  • User ID와 Password는 데이터베이스에 연결하기 위한 사용자 이름과 암호를 나타냅니다.

 

2. SQL 쿼리문 작성

string query = "SELECT Id, Name, Age FROM 테이블명";
  • 위의 쿼리문은 테이블에서 Id, Name, Age 컬럼을 가져오는 쿼리입니다.

 

3. SqlConnection 객체 생성

SqlConnection conn = new SqlConnection(connString);
  • SqlConnection은 데이터베이스 연결을 나타내는 객체입니다.
  • connString 변수에 저장된 연결 문자열을 이용하여 연결을 시도합니다.

 

4. SqlCommand 객체 생성

SqlCommand cmd = new SqlCommand(query, conn);
  • SqlCommand는 데이터베이스에서 쿼리를 실행하는 객체입니다.
  • query 변수에 저장된 쿼리문과 SqlConnection의 conn 객체를 이용하여 SqlCommand 객체를 생성합니다.

 

5. SqlDataAdapter 객체 생성

SqlDataAdapter adapter = new SqlDataAdapter(cmd);
  • SqlDataAdapter는 데이터베이스에서 데이터를 가져오는 객체입니다.
  • SqlCommand의 cmd 객체를 이용하여 SqlDataAdapter 객체를 생성합니다.

 

6. DataTable 객체 생성 및 데이터 채우기

DataTable dataTable = new DataTable();
adapter.Fill(dataTable);
  • DataTable은 데이터베이스에서 가져온 데이터를 담는 객체입니다.
  • adapter 객체를 이용하여 데이터를 채웁니다.

 

7. GridView 컨트롤에 데이터 바인딩

myGridView.DataSource = dataTable;
myGridView.DataBind();
  • myGridView는 ASP.NET에서 제공하는 GridView 컨트롤입니다.
  • DataSource 속성에 dataTable 객체를 할당하여 GridView에 데이터를 바인딩합니다.

페이징

private int currentPageIndex = 0;
  • 현재 페이지 인덱스를 나타내는 변수를 선언하고 0으로 초기화합니다.
private const int PAGE_SIZE = 10;
  • 한 페이지에 보여줄 데이터 개수를 상수로 정의합니다.
BindGridView()
  • GridView에 데이터를 바인딩하는 메서드입니다. 데이터베이스에서 데이터를 가져와서 GridView에 연결합니다.
myGridView.PageIndex = currentPageIndex;
  • GridView의 현재 페이지 인덱스를 currentPageIndex로 설정합니다.
myGridView.DataSource = dataTable;
  • GridView의 데이터 소스를 dataTable로 설정합니다.
myGridView.DataBind();
  • GridView를 데이터 소스로 바인딩합니다.
myGridView_PageIndexChanging()
  • GridView의 페이지 인덱스가 변경되었을 때 호출되는 이벤트 핸들러입니다.
  • 새 페이지 인덱스를 currentPageIndex에 저장하고 BindGridView()를 호출하여 GridView를 업데이트합니다.
이렇게 구현된 페이징 기능은 GridView의 PageIndex와 PageSize 속성을 활용하여 데이터베이스에서 일정 개수의 데이터를 가져오는 방식으로 동작합니다. 사용자가 페이지를 변경하면 myGridView_PageIndexChanging()에서 새 페이지 인덱스를 저장하고 BindGridView()에서 GridView를 업데이트합니다. 이때, 업데이트할 때마다 데이터베이스에서 모든 데이터를 가져오는 것이 아니라, 페이지 인덱스와 페이지 크기에 따라 일부 데이터만 가져오기 때문에 효율적인 페이징 처리가 가능합니다.

소스코드

 

[Sample.aspx]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="Sample.Sample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GridView Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="10" OnPageIndexChanging="myGridView_PageIndexChanging">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="ID" />
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Age" HeaderText="Age" />
                </Columns>
                <PagerSettings FirstPageText="First" LastPageText="Last" PreviousPageText="Previous" NextPageText="Next" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

[Sample.aspx.cs]

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;

namespace Sample
{
    public partial class Sample : System.Web.UI.Page
    {
        private int currentPageIndex = 0;
        private const int PAGE_SIZE = 10;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGridView();
            }
        }

        private void BindGridView()
        {
            string connString = "Data Source=DB_Address;Initial Catalog=Table_Name;User ID=User_ID;Password=User_Password";
            string query = "SELECT Id, Name, Age FROM Table_Name ORDER BY Id ASC";
            SqlConnection conn = new SqlConnection(connString);
            SqlCommand cmd = new SqlCommand(query, conn);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dataTable = new DataTable();
            adapter.Fill(dataTable);

            myGridView.PageIndex = currentPageIndex;
            myGridView.DataSource = dataTable;
            myGridView.DataBind();
        }

        protected void myGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            currentPageIndex = e.NewPageIndex;
            BindGridView();
        }
    }
}

실행결과

 

1. 1번 페이지

2. 10번 페이지

3. 10번 페이지 이상으로 넘어갔을 때

<PagerSettings FirstPageText="First" LastPageText="Last" 
PreviousPageText="Previous" NextPageText="Next" />

 

'ASP.NET > WebForms' 카테고리의 다른 글

WebForms / C# - 게시글작성  (0) 2023.05.10
WebForms / C# - 로그인 기능 구현  (0) 2023.05.10
'ASP.NET/WebForms' Related Articles more