Asp.Net MVC Javascript 创建条码问题

Question

在我分享代码的示例中，我列出了模型中的数据。我还根据模型附带的条形码编号生成带有 javascript 的条形码图像。但是，只有第一个结果是生成条形码图像。其他行的条码图像为空。如何在 Javascript 中进行更改？

@using BarcodeViewer.Models
@using System.Collections.Generic

@model List<PrintModel>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML EAN13 Barcode</title>
    <script src="~/js/connectcode-javascript-ean13.js"></script>
    <style type="text/css">
        #barcode {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            sans-serif;
            font-size: 12pt
        }
    </style>
</head>
<body>
    @foreach (var m in Model)
    {
        <div>
            <table style="width:300px">
                <tr>
                    <td></td>
                    <td></td>
                    <td><b>Tarih</b> </td>
                    <td>@m.Tarih.ToShortDateString()</td>
                </tr>
                <tr>
                    <td><b>Gönderen</b></td>
                    <td colspan="3">@m.Gonderen</td>
                </tr>
                <tr>
                    <td><b>Alıcı<b></td>
                    <td colspan="3">@m.Alici</td>
                </tr>
                <tr>
                    <td><b>İl</b></td>
                    <td>@m.City</td>
                    <td><b>İlçe</b></td>
                    <td>@m.Town</td>
                </tr>
                <tr>
                    <td><b>Miktar</b></td>
                    <td>@m.Quantity</td>
                    <td><b>Birim</b></td>
                    <td>@m.Birim</td>
                </tr>
                <tr>
                    <td><b>Stok Adı:</b></td>
                    <td colspan="3">@m.StokAdi</td>
                </tr>
            </table>

            <div id="barcodecontainer" style="width:3in; align-content:flex-start" >
                <div id="barcode">@m.Barcode</div>
            </div>
        </div>
        <br />
    }
  
    <script type="text/javascript">

        /* <![CDATA[ */
        function get_object(id) {
            var object = null;
            if (document.layers) {
                object = document.layers[id];
            } else if (document.all) {
                object = document.all[id];
            } else if (document.getElementById) {
                object = document.getElementById(id);
            }
            return object;
                   
        }
        get_object("barcode").innerHTML = DrawHTMLBarcode_EAN13(get_object("barcode").innerHTML, "yes", "in", 0, 2.5, 1, "bottom", "center", "", "black", "white");
        /* ]]> */

    </script>           
</body>
</html>

Answer 1

因为您正在为多个元素使用 id 属性。 id 标签在 DOM 中必须是唯一的。 getElementById 只会 return 给定 id.

的第一个元素

尝试使用 class 而不是 id 并将您的 javascript 代码更新为 "run for each element instance of class".

不要在该循环内使用 id 属性。 (id="barcodecontainer", id="barcode")

<div class="barcode"></div>

和 js:

var barcodeElements = document.getElementsByClassName("barcode");

for(var i = 0; i < barcodeElements.length; i++) {
    barcodeElements[i].innerHTML = DrawHTMLBarcode_EAN13(barcodeElements[i].innerHTML);
}

But you better use jQuery instead of this js code.

jQuery 的库： https://barcode-coder.com/en/barcode-jquery-plugin-201.html

Here is usage for your code:

HTML:

<div class="barcode" data-code="@m.Barcode"></div>

JS:

$(".barcode").each(function(){
    $(this).barcode($(this).attr('data-code'), "ean13");
});

Asp.Net MVC Javascript 创建条码问题

Asp.Net MVC Javascript Create Barcode Problem

javascript

barcode