Πώς να εφαρμόσετε εύκολα το QRCoder στο ASP.NET Core χρησιμοποιώντας το C #

Το QRCoder είναι μια πολύ δημοφιλής βιβλιοθήκη υλοποίησης κώδικα QR γραμμένη στο C #. Είναι διαθέσιμο στο GitHub . Εδώ πρόκειται να εφαρμόσω τη βιβλιοθήκη QRCoder για τη δημιουργία κωδικών QR στην εφαρμογή ASP.NET Core. Θα χρησιμοποιήσω επίσης το C #.

Θα εφαρμόσω το QRCoder με 3 τρόπους, οι οποίοι είναι:

1. Δημιουργήστε μια εικόνα Bitmap κώδικα QR για οποιοδήποτε κείμενο.

2. Δημιουργήστε QR Code File (.qrr) για οποιοδήποτε κείμενο και, στη συνέχεια, αποθηκεύστε αυτά τα αρχεία στην εφαρμογή.

3. Διαβάστε και εμφανίστε όλα τα αρχεία κώδικα QR (.qrr).

Ας ξεκινήσουμε με την εγκατάσταση του QRCoder στο ASP.NET Core Framework.

Μπορείτε να κατεβάσετε τον πλήρη κώδικα από το GitHub Respositiory μου .

Εγκατάσταση

Εγκαταστήστε το QRCoder μέσω του NuGet Package Manager. Εάν θέλετε να χρησιμοποιήσετε το NuGet, απλώς αναζητήστε το "QRCoder" ή εκτελέστε την ακόλουθη εντολή στην κονσόλα NuGet Package Manager:

PM> Install-Package QRCoder

Το QRCoder θα εγκατασταθεί σε 1 λεπτό και θα είναι έτοιμο για χρήση.

Τώρα ας ξεκινήσουμε με την εφαρμογή του QRCoder με τους 3 τρόπους που αναφέρονται παραπάνω.

Δημιουργήστε QR Code Bitmap εικόνα για οποιοδήποτε κείμενο

Δημιουργήστε έναν νέο ελεγκτή που ονομάζεται ' QRCoderController' μέσα στο φάκελο Controllers. Ο ελεγκτής θα δημιουργηθεί και θα έχει μόνο μία μέθοδο δράσης που ονομάζεται ' Index' σε αυτό:

public IActionResult Index() { return View(); }

Εισαγάγετε τους ακόλουθους χώρους ονομάτων στον ελεγκτή:

using System; using System.Collections.Generic; using System.Drawing; using System.IO; using Microsoft.AspNetCore.Mvc; using QRCoder;

Στη συνέχεια, προσθέστε τη Δράση ευρετηρίου τύπου [HttpPost]στον ελεγκτή:

[HttpPost] public IActionResult Index(string qrText) { QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q); QRCode qrCode = new QRCode(qrCodeData); Bitmap qrCodeImage = qrCode.GetGraphic(20); return View(BitmapToBytes(qrCodeImage)); }
Αυτή η ενέργεια ευρετηρίου λαμβάνει μια παράμετρο συμβολοσειράς που ονομάζεται «qrText». Περιέχει το κείμενο που παρέχεται από ένα στοιχείο ελέγχου εισαγωγής που ορίζεται στην προβολή. Αυτό το κείμενο θα μετατραπεί σε εικόνα QR Code Bitmap. Λειτουργούν οι ακόλουθες γραμμές κώδικα:
QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q); QRCode qrCode = new QRCode(qrCodeData); Bitmap qrCodeImage = qrCode.GetGraphic(20);

Το αντικείμενο QRCode (' qrCode') που ορίζεται καλεί μια στατική συνάρτηση που ονομάζεται ' BitmapToBytes()'. Ο ρόλος αυτής της λειτουργίας είναι να μετατρέψει την εικόνα Bitmap σε Byte[]".

Προσθέστε αυτήν τη λειτουργία στον ελεγκτή σας:

private static Byte[] BitmapToBytes(Bitmap img) { using (MemoryStream stream = new MemoryStream()) { img.Save(stream, System.Drawing.Imaging.ImageFormat.Png); return stream.ToArray(); } }

Τέλος, δημιουργήστε την προβολή ευρετηρίου μέσα στον Views/QRCoderφάκελο με τον ακόλουθο κώδικα:

@model Byte[] @{ Layout = null; }     Implementing QRCoder in ASP.NET Core - Create QR Code  body { background: #111 no-repeat; background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); } h1, h2, h3 { text-align: center; color: #FFF; margin: 5px 0; } h1 { font-size: 30px; } h2 a { font-size: 25px; color: #0184e3; text-decoration: none; } h3 { font-size: 23px; border-bottom: solid 3px #CCC; padding-bottom: 10px; } h3 a { color: #00e8ff; text-decoration: none; } h3 a:hover, h2 a:hover { text-decoration: underline; } .container { width: 800px; margin: auto; color: #FFF; font-size: 25px; } .container #content { border: dashed 2px #CCC; padding: 10px; } #reset { padding: 5px 10px; background: #4CAF50; border: none; color: #FFF; cursor: pointer; } #reset:hover { color: #4CAF50; background: #FFF; } #viewContent table { width: 100%; } #viewContent table tr { height: 80px; background: darkcyan; } #viewContent table tr td { width: 50%; padding-left: 5px; } 

Implementing QRCoder in ASP.NET Core - Create QR Code

Read the tutorial on YogiHosting » Reset »

@using (Html.BeginForm(null, null, FormMethod.Post)) {
Enter text for creating QR Code
Submit
} @{ if (Model != null) {

QR Code Successfully Generated

} }

Η προβολή ευρετηρίου έχει ένα στοιχείο inputελέγχου. Ο χρήστης εισάγει το κείμενό του σε αυτό το στοιχείο ελέγχου για να δημιουργήσει τον κωδικό QR:

/>

Once the QR Code is generated by the Index Action method, its ‘byte’ array is returned to the View as model and then the bitmap image is displayed by the below code:

@{ if (Model != null) { 

QR Code Successfully Generated

} }

Testing the Code

Run your application and go to the URL — ‘//localhost:50755/QRCoder’ to invoke the Index Action method.

In the text box, add your text and click the submit button to create the QR Code Bitmap image.

See this image which illustrates it working:

Create QR Code File (.qrr) for any text and then save these files in the application

You can also generate QR Code files for a text and save it in your website. These files have .qrr extension.

To your controller add the following Action methods called ‘GenerateFile’:

public IActionResult GenerateFile() { return View(); } [HttpPost] public IActionResult GenerateFile(string qrText) { QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q); string fileGuid = Guid.NewGuid().ToString().Substring(0, 4); qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed); QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed); QRCode qrCode = new QRCode(qrCodeData1); Bitmap qrCodeImage = qrCode.GetGraphic(20); return View(BitmapToBytes(qrCodeImage)); }

The [HttpPost] version of this action method generates the QR Code files inside the ‘wwwroot/qrr’ folder. The code that does this work is the following:

QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q); string fileGuid = Guid.NewGuid().ToString().Substring(0, 4); qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);

Once the .qrr file is created then I am simply reading it for its saved location in the website. Then I am converting it to Bitmap type and finally sending the image’s bytes to the view. The corresponding code is:

QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed); QRCode qrCode = new QRCode(qrCodeData1); Bitmap qrCodeImage = qrCode.GetGraphic(20); return View(BitmapToBytes(qrCodeImage));

Next, add the GenerateFile view inside the ‘Views/QRCoder’ folder and add the following code to it:

@model Byte[] @{ Layout = null; }     Implementing QRCoder in ASP.NET Core - Create QR Code File  body { background: #111 no-repeat; background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); } h1, h2, h3 { text-align: center; color: #FFF; margin: 5px 0; } h1 { font-size: 30px; } h2 a { font-size: 25px; color: #0184e3; text-decoration: none; } h3 { font-size: 23px; border-bottom: solid 3px #CCC; padding-bottom: 10px; } h3 a { color: #00e8ff; text-decoration: none; } h3 a:hover, h2 a:hover { text-decoration: underline; } .container { width: 800px; margin: auto; color: #FFF; font-size: 25px; } .container #content { border: dashed 2px #CCC; padding: 10px; } #reset { padding: 5px 10px; background: #4CAF50; border: none; color: #FFF; cursor: pointer; } #reset:hover { color: #4CAF50; background: #FFF; } #viewContent table { width: 100%; } #viewContent table tr { height: 80px; background: darkcyan; } #viewContent table tr td { width: 50%; padding-left: 5px; } 

Implementing QRCoder in ASP.NET Core - Create QR Code File

Read the tutorial on YogiHosting » Reset »

@using (Html.BeginForm(null, null, FormMethod.Post)) {
Enter text for creating QR File
Submit
} @{ if (Model != null) {

QR Code file Successfully Generated

} }

The code of this View is exactly similar to the ‘Index’ View and works exactly like it.

The URL to invoke this View is ‘//localhost:50755/QRCoder/GenerateFile’.

Read and display all the QR Code Files (.qrr)

You can also read all the .qrr files saved in the website. Go to your controller and add a new action called ‘ViewFile’:

public IActionResult ViewFile() { List
     
       fileData=new List
      
       (); KeyValuePair data; string[] files = Directory.GetFiles("wwwroot/qrr"); foreach (string file in files) { QRCodeData qrCodeData = new QRCodeData(file, QRCodeData.Compression.Uncompressed); QRCode qrCode = new QRCode(qrCodeData); Bitmap qrCodeImage = qrCode.GetGraphic(20); Byte[] byteData = BitmapToBytes(qrCodeImage); data = new KeyValuePair(Path.GetFileName(file), byteData); fileData.Add(data); } return View(fileData); }
      
     

In this action method, I read the filed located in the ‘qrr’ folder using the code:

Directory.GetFiles("wwwroot/qrr")

Then I add each qrr file’s bytes and name inside a List object.

This object is returned to the View at the end:

return View(fileData);

Finally create the ‘ViewFile’ View inside the ‘Views/QRCoder’ folder with the following code:

@model List 
     
       @{ Layout = null; } Implementing QRCoder in ASP.NET Core - View QR Code Files body { background: #111 no-repeat; background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); } h1, h2, h3 { text-align: center; color: #FFF; margin: 5px 0; } h1 { font-size: 30px; } h2 a { font-size: 25px; color: #0184e3; text-decoration: none; } h3 { font-size: 23px; border-bottom: solid 3px #CCC; padding-bottom: 10px; } h3 a { color: #00e8ff; text-decoration: none; } h3 a:hover, h2 a:hover { text-decoration: underline; } .container { width: 800px; margin: auto; color: #FFF; font-size: 25px; } .container #content { border: dashed 2px #CCC; padding: 10px; } #reset { padding: 5px 10px; background: #4CAF50; border: none; color: #FFF; cursor: pointer; } #reset:hover { color: #4CAF50; background: #FFF; } #viewContent table { width: 100%; } #viewContent table tr { height: 80px; background: darkcyan; } #viewContent table tr td { width: 50%; padding-left: 5px; } #viewContent table tr td img { width: 150px; } #viewContent table tr td span { display: block; } 
      

Implementing QRCoder in ASP.NET Core - View QR Code Files

Read the tutorial on YogiHosting » Reset »

@foreach (KeyValuePair k in Model) { }
@k.Key

This View displays all the qrr files as bitmap images inside a ‘HTML’ table. The below code creates the HTML table:


     
        @foreach (KeyValuePair k in Model) { 
        } 
      
@k.Key

Testing the Code

Run your application and go to the URL — ‘//localhost:50755/QRCoder/ViewFile’ to invoke the ViewFile Action method. You will see all the .qrr files saved in your website.

See the below image which illustrates it working:

You can download the full code from my GitHub Respositiory.

Conclusion

I hope you love this repository which will help you to use QRCoder in your ASP.NET Core Project. Make sure you like this repository to show your love to it.

If you need any help in ASP.NET Core then let me know in the below comments section.

I publish 2 web development articles per week. Consider following me and get email notification whenever I publish a new tutorial on Medium. If this post was helpful, please click the clap button for a few times to show your support! It will bring a smile on my face and motivate me to write more for the readers like you.

I have also published another tutorial on freeCodeCamp, if you would like to see it too — How to create a login feature with Bootstrap Modal and jQuery AJAX

Thanks and Happy Coding!