Prerequisites
Download and install the following software on your computer
- Visual Studio 2022
- .NET 6.0 SDK
- OnBarcode.Barcode.BarcodeScanner.dll
Create a new ASP.NET Core MVC web app with barcode reader on web page using C#
1. Create new ASP.NET Core MVC web app
Start Visual Studio 2022 and select "Create a new project".
Select "ASP.NET Core Web App (Model-View-Controller)" in the dialog, and then press "Next" button.
Create a new project with name "OnBarcodeReaderASPNETCoreMVCDemo".
Choose ".NET 6.0 (Long-term support)"
Now, all auto-generated files for ASP.NET Core MVC barcode reader demo project could be found in the solution explorer.
Select "ASP.NET Core Web App (Model-View-Controller)" in the dialog, and then press "Next" button.
Create a new project with name "OnBarcodeReaderASPNETCoreMVCDemo".
Choose ".NET 6.0 (Long-term support)"
Now, all auto-generated files for ASP.NET Core MVC barcode reader demo project could be found in the solution explorer.
2. Install Barcode Reader Library dll and NuGet Package
Add OnBarcode Barcode Reader library for ASP.NET Core DLL reference "OnBarcode.Barcode.BarcodeScanner.dll".
Right-click "Dependencies" in the Solution Explorer, and select "Manage NuGet Packages".
Select "Browse" and use the search control to find "System.Drawing.Common" from the package source "nugget.org".
Choose the version 6.0.0 or later to install the package.
Check "Packages" in the Solution Explorer to ensure the installation is success.
Right-click "Dependencies" in the Solution Explorer, and select "Manage NuGet Packages".
Select "Browse" and use the search control to find "System.Drawing.Common" from the package source "nugget.org".
Choose the version 6.0.0 or later to install the package.
Check "Packages" in the Solution Explorer to ensure the installation is success.
3. Add C# data model classes to the ASP.NET Core MVC project
Right-click the Models folder in the Solution Explorer and choose Add > Class to open the Add New Item dialog.
Then add a class item with name "IndexViewModel.cs".
Add the following C# codes to class "IndexViewModel.cs".
Then add a class item with name "IndexViewModel.cs".
Add the following C# codes to class "IndexViewModel.cs".
namespace OnBarcodeReaderASPNETCoreMVCDemo.Models { public class IndexViewModel { public List<String> BarcodeTypes { get; set; } = new List<String> { "AustraliaPost", "Codabar", "Code39", "Code39Extension", "Code93", "Code128", "DataMatrix", "EAN8", "EAN13", "Identcode", "IntelligentMail", "Interleaved2of5", "ISBN", "ISSN", "ITF14", "Leitcode", "PatchCode", "PDF417", "Planet", "Postnet", "QRCode", "RM4SCC", "UPCA", "UPCE" }; public int SelectedTypeIndex { get; set; } public IFormFile? FormFile { get; set; } } }
Then add a new class item with name "ShowResultViewModel.cs".
Add the following C# codes to class "ShowResultViewModel.cs".
Add the following C# codes to class "ShowResultViewModel.cs".
namespace OnBarcodeReaderASPNETCoreMVCDemo.Models { public class ShowResultViewModel { public String[]? DataMessages { get; set; } } }
4. Add C# Views to the ASP.NET Core MVC project
View : Index
Select existed view "Index.cshtml" and replace ALL content by following codes.
Select existed view "Index.cshtml" and replace ALL content by following codes.
@model IndexViewModel; @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <br /> <form asp-action="ShowResult" method="post" enctype="multipart/form-data"> <input Name="FormFile" type="file" style="width:300px; " onchange="document.getElementById('Submit').removeAttribute('disabled')" /> Barcode Type: <select asp-for="SelectedTypeIndex" asp-items="Model.BarcodeTypes.Select((item, index) => new SelectListItem { Text = item, Value = index.ToString(), Selected = index == Model.SelectedTypeIndex })"> </select> <br /><br /> <input id="Submit" type="submit" value="Scan Image" disabled /> </form> </div>
View : ShowResult
Right click the folder Views/Home, and choose Add > View.
Select "Razor View - Empty" to open "Add New Item" dialog.
Add a new view "ShowResult.cshtml" to the project with following layout.
Right click the folder Views/Home, and choose Add > View.
Select "Razor View - Empty" to open "Add New Item" dialog.
Add a new view "ShowResult.cshtml" to the project with following layout.
@model ShowResultViewModel; @{ ViewData["Title"] = "Show Result"; } <div style="display:flex;justify-content:center"> <table name="ScanResult" class="table-bordered" style="width:40%;" align="center"> <thead> <tr> <td colspan="2">Scan Result</td> </tr> </thead> <tbody> @if (Model.DataMessages != null && Model.DataMessages.Length >= 0) { <tr> <td colspan="2" align="left"> Number of valid barcodes: @Model.DataMessages.Length </td> </tr> @for (var i = 0; i < Model.DataMessages.Length; i++) { var idx = i + 1; var msg = Model.DataMessages[i]; <tr> <td style="width:10%;">@idx:</td> <td align="left">'@msg'</td> </tr> } } </tbody> </table> </div> <br /><br /><br /> <a asp-action="Index">Back to Index</a>
5. Update controller class C# source code
Adding two methods Index and ShowResult to class "HomeController.cs".
Replace the contents of controller class "HomeController.cs" with following code.
Replace the contents of controller class "HomeController.cs" with following code.
using Microsoft.AspNetCore.Mvc; using OnBarcodeReaderASPNETCoreMVCDemo.Models; using System.Diagnostics; using OnBarcode.Barcode.BarcodeScanner; namespace OnBarcodeReaderASPNETCoreMVCDemo.Controllers { public class HomeController : Controller { private readonly ILogger<HomeController> _logger; public HomeController(ILogger<HomeController> logger) { _logger = logger; } public IActionResult Index() { IndexViewModel model = new IndexViewModel(); // Set default barcode type to Code 128 model.SelectedTypeIndex = 5; return View(model); } [HttpPost] public async Task<IActionResult> ShowResult(IndexViewModel model) { String[] result = new String[0]; if (ModelState.IsValid) { try { if (model.FormFile != null && model.FormFile.Length > 0) { using (MemoryStream stream = new MemoryStream()) { await model.FormFile.CopyToAsync(stream); // Get enum BarcodeType from ComboBox selected index. BarcodeType barcodeType = (BarcodeType)model.SelectedTypeIndex; result = BarcodeScanner.Scan(stream, barcodeType); } } else throw new Exception("No Upload File."); } catch (Exception) { result = new String[0]; } } ShowResultViewModel showViewModel = new ShowResultViewModel(); showViewModel.DataMessages = result; return View(showViewModel); } public IActionResult Privacy() { return View(); } [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] public IActionResult Error() { return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier }); } } }
6. It is done. Now press "Ctrl+F5" to run the project.
It launches the Kestrel server and opens the default browser.
Use Choose File button to open an image file from the local system; and then, press "Scan Image" button to submit the form to server.
And the scanned bacode results would be shown in the "ShowResult" view as below.
Conclusion
The step-by-step tutorial above demonstrates that you can easily enable your ASP.NET Core MVC web app with barcode reading features using C#.
You can also quickly add more QR Code and barcode reading functions using C# barcode reader library in your ASP.NET Core project. View more details at: How to read barcodes using C# barcode reader library?
You can also quickly add more QR Code and barcode reading functions using C# barcode reader library in your ASP.NET Core project. View more details at: How to read barcodes using C# barcode reader library?
