إنشاء وعرض صورة الباركود في ASP.NET MVC

يمثل الرمز الشريطي البيانات بشكل مرئي في نموذج يمكن قراءته آليًا. عادة ، يحتوي على بيانات أو معلومات حول منتج أو شركة ، مشفرة في شكل أرقام و / أو نمط من الخطوط المتوازية. في ASP.NET MVC ، يمكننا إنشاء أنواع مختلفة من الرموز الشريطية مثل Data Matrix و Aztec و Code 128 وما إلى ذلك. في هذه المقالة ، سنتعلم كيفية إنشاء صورة باركود وعرضها في تطبيق ASP.NET MVC. بعد اتباع الخطوات المذكورة ، سيكون لدينا مولد الباركود ASP.NET MVC الخاص بنا. فلنبدأ.

يجب أن تغطي المقالة المواضيع التالية:

ميزات مولد الباركود ASP.NET MVC

سوف يحتوي مُنشئ الباركود ASP.NET الخاص بنا على الميزات التالية.

  1. قم بإنشاء الأنواع التالية من رموز الرموز الشريطية:
    • كود 128
    • الكود 11
    • الكود 39
    • ريال قطري
    • مصفوفة البيانات
    • EAN13
    • EAN8
    • ITF14
    • PDF417
  2. احفظ صورة الرمز الشريطي التي تم إنشاؤها بالتنسيقات التالية:
    • بي إن جي
    • JPEG
    • BMP
    • EMF
    • SVG
  3. معاينة صورة الباركود التي تم إنشاؤها.
  4. قم بتنزيل صورة الرمز الشريطي التي تم إنشاؤها على القرص المحلي الخاص بك.

NET API لتوليد وعرض صورة الباركود في ASP.NET MVC

لإنشاء صور الباركود وعرضها في تطبيق ASP.NET MVC ، سنستخدم Aspose.BarCode لـ .NET API. يسمح لنا بتوليد والتعرف على مجموعة واسعة من 1D و 2 D أنواع الرموز الشريطية. يرجى إما تنزيل DLL الخاصة بواجهة برمجة التطبيقات أو تثبيته باستخدام NuGet.

PM> Install-Package Aspose.BarCode

خطوات إنشاء صورة الباركود وعرضها في ASP.NET MVC

يمكننا إنشاء وعرض صورة الباركود في تطبيق ASP.NET MVC باتباع الخطوات الواردة أدناه:

  • أولاً ، قم بإنشاء مشروع جديد وحدد قالب مشروع تطبيق ويب ASP.NET (.NET Framework).
Select the project template.
  • بعد ذلك ، في مربع الحوار إنشاء تطبيق ويب ASP.NET جديد ، اختر MVC ثم اختر إنشاء.
حدد MVC

حدد MVC

قم بتثبيت Aspose.BarCode لـ .NET

قم بتثبيت Aspose.BarCode لـ .NET

  • بعد ذلك ، أنشئ مجلدًا جديدًا “صور” لحفظ صور الباركود التي تم إنشاؤها.
إنشاء مجلد الصور.

إنشاء مجلد الصور.

  • الآن ، قم بإنشاء نموذج في مجلد “Models” باسم “Barcode” لتخزين معلومات الباركود.
// المعلومات الأساسية للباركود
public class Barcode
{
    public string Text { get; set; }

    public BarcodeType BarcodeType { get; set; }

    public BarCodeImageFormat ImageType { get; set; }
}
  • أضف أيضًا تعدادًا لسرد رموز الباركود المدعومة. يمكن إضافته في فئة منفصلة ضمن مجلد “Models” ، أو يمكننا إضافته في ملف فئة Barcode.cs.
// رموز الباركود
public enum BarcodeType
{
    Code128,
    Code11,
    Code32,
    QR,
    Datamatrix,
    EAN13,
    EAN8,
    ITF14,
    PDF417
}
  • وبالمثل ، أضف تعدادًا لسرد تنسيقات الصور المدعومة.
// تنسيقات الصور
public enum ImageType
{
    Png,
    Jpeg,
    Bmp,
    Emf,
    Svg
}
  • بعد ذلك ، افتح Views / Home / index.cshtml واستبدل محتواه بالنص التالي.
@using BarcodeGeneratorMVC.Models

@model Barcode

@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-lg-6">
        <h2>Generate Barcode</h2>
        @using (Html.BeginForm())
        {
            <div class="form-group">
                @Html.Label("Select Barcode Type:", new { @class = "col-md-12 control-label" })
                <div class="col-md-12">
                    @Html.DropDownListFor(model => model.BarcodeType,
         new SelectList(Enum.GetValues(typeof(BarcodeType))),
         "Select Barcode", new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Enter Your Text:", new { @class = "col-md-12 control-label" })
                <div class="col-md-12">
                    @Html.EditorFor(m => m.Text, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Select Image Format:", new { @class = "col-md-12 control-label" })
                <div class="col-md-12">
                    @Html.RadioButtonFor(model => model.ImageType, ImageType.Png) @Html.Label("PNG")
                    @Html.RadioButtonFor(model => model.ImageType, ImageType.Jpeg) @Html.Label("JPG")
                    @Html.RadioButtonFor(model => model.ImageType, ImageType.Bmp) @Html.Label("BMP")
                    @Html.RadioButtonFor(model => model.ImageType, ImageType.Emf) @Html.Label("EMF")
                    @Html.RadioButtonFor(model => model.ImageType, ImageType.Svg) @Html.Label("SVG")
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <input type="submit" class="btn btn-default" value="Generate Barcode" />
                </div>
            </div>
        }
    </div>
    <div class="col-lg-6">
        <h2>View Barcode Image</h2>
        @{
            if (!string.IsNullOrEmpty(@ViewBag.ImagePath))
            {
                <div class="form-group">
                    <div class="col-md-12">
                        <img src=@Url.Content(@ViewBag.ImagePath) alt="Barcode Image" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.ActionLink("Download Image", "Download", "Home", new
                           {                                                     // routeValues
                               ImagePath = @ViewBag.ImagePath,
                               ImageName = @ViewBag.ImageName
                           },
                           null)
                    </div>
                </div>
            }
        }
    </div>
    <hr />
</div>
  • ثم افتح فئة “HomeController” وأضف نتيجة إجراء جديدة للتعامل مع طلب النشر.
[HttpPost]
public ActionResult Index(Barcode barcode)
{
    string codeText = barcode.Text;
    string imageName = barcode.Text + "." + barcode.ImageType;
    string imagePath = "/Images/" + imageName;
    string imageServerPath = Server.MapPath("~" + imagePath);

    var encodeType = EncodeTypes.Code128;

    switch (barcode.BarcodeType)
    {
        case BarcodeType.Code128:
            encodeType = EncodeTypes.Code128;
            break;

        case BarcodeType.ITF14:
            encodeType = EncodeTypes.ITF14;
            break;

        case BarcodeType.EAN13:
            encodeType = EncodeTypes.EAN13;
            break;

        case BarcodeType.Datamatrix:
            encodeType = EncodeTypes.DataMatrix;
            break;

        case BarcodeType.Code32:
            encodeType = EncodeTypes.Code32;
            break;

        case BarcodeType.Code11:
            encodeType = EncodeTypes.Code11;
            break;

        case BarcodeType.PDF417:
            encodeType = EncodeTypes.Pdf417;
            break;

        case BarcodeType.EAN8:
            encodeType = EncodeTypes.EAN8;
            break;

        case BarcodeType.QR:
            encodeType = EncodeTypes.QR;
            break;
    }

    using (Stream str = new FileStream(imageServerPath, FileMode.Create, FileAccess.Write))
    {
        BarcodeGenerator gen = new BarcodeGenerator(encodeType, codeText);
        gen.Save(str, barcode.ImageType);
    }

    ViewBag.ImagePath = imagePath;
    ViewBag.ImageName = imageName;

    return View();
}
  • بعد ذلك ، أضف نتيجة إجراء جديدة للتعامل مع طلب تنزيل الصورة في “HomeController”.
public ActionResult Download(string ImagePath, string ImageName)
{
    string contentType = "application/img";
    return File(ImagePath, contentType, Path.GetFileName(ImageName));
}
  • أخيرًا ، قم بتشغيل التطبيق.

العرض التوضيحي لمولد الباركود ASP.NET MVC

فيما يلي عرض توضيحي لتطبيق ASP.NET MVC Barcode Generator الذي أنشأناه للتو.

العرض التوضيحي لمولد الباركود ASP.NET MVC

العرض التوضيحي لمولد الباركود ASP.NET MVC

تحميل شفرة المصدر

يمكنك تنزيل الكود المصدري الكامل لتطبيق ASP.NET MVC Barcode Generator من GitHub.

احصل على رخصة مجانية

يمكنك الحصول على ترخيص مؤقت مجاني لتجربة المكتبة دون قيود التقييم.

استنتاج

في هذه المقالة ، تعلمنا كيفية إنشاء صورة رمز شريطي وعرضها في تطبيق ASP.NET MVC. لقد رأينا أيضًا كيفية تنزيل صورة الباركود التي تم إنشاؤها برمجيًا. بالإضافة إلى ذلك ، يمكنك معرفة المزيد حول Aspose.BarCode لـ .NET API باستخدام التوثيق. في حالة وجود أي غموض ، فلا تتردد في الاتصال بنا على المنتدى.

أنظر أيضا