메시지 아이콘
푸터 콘텐츠로 바로가기
  1. IronBarcode
  2. IronBarcode 블로그
  3. IronBarcode 사용
  4. Razor 바코드 생성기
IRONBARCODE 사용

Razor 바코드 생성기 웹 앱 만들기

커티스 차우
커티스 차우
업데이트됨:

Razor 바코드 생성기 튜토리얼

Razor 바코드 생성기는 개발자와 기업 모두에게 바코드 생성을 간소화하는 유용한 도구입니다. 웹 애플리케이션에 바코드 생성을 통합하면 기능성과 사용자 경험이 향상되어 다양한 바코드 유형을 쉽고 단순하게 생성할 수 있습니다. 인벤토리 관리, 자산 추적, 결제 프로세스 간소화 등에서 Razor 바코드 생성기를 활용하면 효율성과 정확성을 크게 향상시킬 수 있습니다. 이 튜토리얼에서는 IronBarcode를 사용하여 바코드 생성기를 만들 것입니다.

IronBarcode 소개

IronBarcode는 .NET Core로 작업하는 개발자들에게 필수 도구로, 바코드 생성 및 읽기를 위한 사용하기 쉬운 라이브러리를 제공합니다. 프로젝트에 통합하기 쉽고, 바코드 및 QR 코드를 생성하거나 판독하는 데 필요한 코드가 최소화되어 두드러집니다. 이로 인해 IronBarcode는 바코드 생성과 판독 기능을 모두 갖춘 애플리케이션을 향상시키기 위한 다재다능한 선택지가 되며, Razor 페이지를 사용하는 웹 애플리케이션부터 데스크톱과 모바일 애플리케이션까지 적용됩니다. 지원하는 바코드 형식의 폭넓은 범위 덕분에 .NET MVC, Blazor WebAssembly 애플리케이션, Blazor 애플리케이션과 같은 다양한 프로젝트 요구를 충족할 수 있어 개발자들에게 신뢰할 수 있는 선택입니다.

바코드 생성기를 만드는 단계

1단계: ASP.NET Core 웹 앱 (Razor Pages) 생성

Visual Studio에서 Razor Pages로 ASP.NET Core 웹 앱을 생성하는 것은 간단합니다. 이 가이드는 처음부터 프로젝트를 설정하는 데 도움을 줄 것입니다:

  1. Visual Studio 열기: Visual Studio를 시작합니다. 시작 창에서 "새 프로젝트 만들기"를 선택하여 새로운 웹 애플리케이션 설정 과정을 시작합니다.
  2. 프로젝트 유형 선택: "새 프로젝트 만들기" 창에서 프로젝트 템플릿 목록에서 "ASP.NET Core 웹 앱"을 선택합니다. 그런 다음 "다음"을 클릭하여 계속합니다.

새로운 Razor 프로젝트 생성

  1. 프로젝트 구성: 이제 새 프로젝트를 구성하라는 메시지가 표시됩니다.
    • 웹 애플리케이션의 "프로젝트 이름"을 입력합니다.
    • 프로젝트 파일이 저장될 수 있는 컴퓨터의 적절한 "위치"를 선택합니다.
    • 선택적으로, "솔루션 이름"을 조정합니다.
    • "다음"을 클릭하여 계속합니다.

프로젝트 이름, 솔루션 이름 및 파일 경로 구성

  1. 프로젝트 세부 정보 설정: "추가 정보" 창에서 다음을 확인합니다:
    • 적절한 version of .NET을 선택합니다.
    • "HTTPS 구성"이 체크되어 있는지 확인합니다.
    • "생성"을 클릭하여 새로운 Razor Pages 웹 애플리케이션의 생성을 시작합니다.

추가 정보 설정

2단계: IronBarcode 라이브러리 설치

Visual Studio에서 NuGet 패키지 관리자를 사용하여 IronBarcode를 설치하려면:

  1. NuGet 패키지 관리자 접근: 솔루션 탐색기 창에서 프로젝트 이름을 오른쪽 클릭합니다. "NuGet 패키지 관리..."를 선택하여 NuGet 패키지 관리자 탭을 엽니다.
  2. IronBarcode 검색: "탐색" 탭에서 "IronBarcode"를 입력하여 라이브러리를 찾습니다.
  3. IronBarcode 설치: "IronBarCode"를 선택하고 "설치"를 클릭합니다. 모든 종속성과 라이선스 계약을 검토한 후 수락하여 진행합니다.

NuGet 패키지 관리자를 통해 IronBarcode 설치

3단계: UI 설계

Index 페이지를 개선하려면 index.cshtml 파일을 편집하십시오. 사용자 정의 스타일 적용:

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
HTML

환영 메시지 추가:

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML

메인 콘텐츠 구조화:

<div class="container">
    <div class="row justify-content-center">

    </div>
</div>
<div class="container">
    <div class="row justify-content-center">

    </div>
</div>
HTML

입력 폼 설계:

바코드 생성을 위한 사용자 입력을 수집하기 위해 폼을 포함합니다:

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
HTML

이미지 칼럼:

생성된 바코드를 표시하고 다운로드할 수 있도록 합니다:

<div class="col-md-6 image-padding">
    <div id="imageContainer">

    </div>
</div>
<div class="col-md-6 image-padding">
    <div id="imageContainer">

    </div>
</div>
HTML

스크립트:

jQuery를 사용하여 입력 및 다운로드 작업을 처리할 기능을 추가합니다:

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
JAVASCRIPT

4단계: 기능적 코드 작성

색 정의:

당신의 index.cshtml 파일의 맨 위에 추가하십시오:

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
$vbLabelText   $csharpLabel

바코드 색상 열거 형식:

바코드에 사용 가능한 색상을 정의합니다:

public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}
$vbLabelText   $csharpLabel

바코드 유형 열거 형식:

사용 가능한 바코드 유형을 정의합니다:

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}
$vbLabelText   $csharpLabel

도움말 함수:

열거형을 색상 및 바코드 인코딩으로 변환:

private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }
$vbLabelText   $csharpLabel

OnPostUpload 함수:

바코드 생성을 위한 양식 제출 처리:

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}
$vbLabelText   $csharpLabel

레이아웃 편집:

단순한 디자인을 위해 \_Layout.cshtml 를 편집하십시오:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

</body>
</html>
HTML

애플리케이션 실행

F5 또는 Ctrl + F5를 눌러 애플리케이션을 실행하십시오. 화면의 지시에 따라 데이터를 입력하고, 바코드 유형을 선택하고, 크기를 설정한 다음 바코드를 생성하십시오.

출력된 웹 애플리케이션

결론

바코드 생성기 웹 애플리케이션은 사용자 정의 바코드를 쉽게 생성할 수 있는 방법을 제공합니다. 데이터를 입력하고 바코드 유형을 선택하고, 크기를 설정하고, 색상을 선택한 후 바코드를 생성할 수 있습니다. IronBarcode는 이 애플리케이션에 무료 체험판을 제공하며, 라이선스는 $799에서 시작합니다.

QR 코드 이미지를 생성하려면 IronQR를 고려하십시오.

자주 묻는 질문

ASP.NET Core 웹 앱에 바코드 생성 기능을 어떻게 통합할 수 있을까요?

IronBarcode 사용하면 ASP.NET Core 웹 앱에 바코드 생성 기능을 통합할 수 있습니다. NuGet 패키지 관리자를 통해 IronBarcode 라이브러리를 설치한 다음, 해당 라이브러리의 메서드를 활용하여 애플리케이션 내에서 바코드와 QR 코드를 생성하고 읽을 수 있습니다.

바코드 생성을 위한 Razor Pages 프로젝트 설정에는 어떤 단계가 포함되나요?

바코드 생성을 위한 Razor Pages 프로젝트를 설정하려면 먼저 Visual Studio에서 새 ASP.NET Core 웹 앱을 만들고, NuGet 패키지 관리자를 통해 IronBarcode 설치하고, HTML, CSS 및 jQuery를 사용하여 사용자 인터페이스를 사용자 지정하고, 바코드 기능을 위한 필요한 C# 코드를 구현하십시오.

NuGet 패키지 관리자를 사용하여 IronBarcode 설치하는 방법은 무엇인가요?

IronBarcode 설치하려면 Visual Studio의 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 ' NuGet 패키지 관리...'를 선택한 다음 ' IronBarcode'를 검색하고 '설치'를 클릭합니다. 이렇게 하면 라이브러리가 프로젝트에 추가되어 바코드 생성 기능을 사용할 수 있게 됩니다.

IronBarcode 사용하여 바코드를 생성할 때의 이점은 무엇입니까?

IronBarcode 다양한 바코드 형식을 생성하고 읽는 강력한 솔루션을 제공합니다. 사용하기 쉬운 메서드를 제공하여 .NET 개발자의 작업 과정을 간소화하고, .NET MVC, Blazor WebAssembly, Blazor App 프로젝트 등 다양한 프로젝트 유형과의 통합을 지원합니다.

IronBarcode 사용하여 바코드 모양을 어떻게 사용자 지정할 수 있나요?

IronBarcode 사용하면 바코드 색상과 유형에 대한 열거형을 정의하여 바코드 모양을 사용자 지정할 수 있습니다. 이를 통해 다양한 색상과 바코드 형식을 선택하여 특정 디자인 요구 사항에 맞는 바코드를 생성할 수 있습니다.

바코드 생성 과정에서 OnPostUpload 함수의 목적은 무엇입니까?

OnPostUpload 함수는 바코드 생성을 위해 사용자의 입력을 처리합니다. 바코드 텍스트, 유형, 크기 및 색상과 같은 세부 정보를 캡처하고 IronBarcode의 메서드를 사용하여 이러한 매개변수를 기반으로 바코드를 생성합니다.

IronBarcode Blazor 애플리케이션에서 사용할 수 있나요?

네, IronBarcode Blazor 애플리케이션에서 사용할 수 있습니다. Blazor WebAssembly 및 Blazor Server 프로젝트와의 통합을 지원하여 최신 웹 애플리케이션 개발자에게 유연성을 제공합니다.

커티스 차우
커티스 차우
  지금 바로 엔지니어링 팀과 채팅하세요
기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

관련 기사

30일 무료 체험 → 모든 기능 이용 가능. 제한 없음. 카드 정보 필요 없음. 무료 체험 시작하기

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me