Asp.Net MVC Javascript 创建条码问题答案

【问题标题】：Asp.Net MVC Javascript Create Barcode ProblemAsp.Net MVC Javascript 创建条码问题
【发布时间】：2019-03-19 10:38:40
【问题描述】：

在我共享代码的示例中，我列出了模型中的数据。我还使用 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>

【问题讨论】：

标签： javascript barcode

【解决方案1】：

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

尝试使用 class 而不是 id 并将您的 javascript 代码更新为“为类的每个元素实例运行”。

不要在该循环中使用 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);
}

但是你最好使用 jQuery 而不是这个 js 代码。

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

这是您的代码的用法：

HTML：

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

JS：

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

【讨论】：

太好了。谢谢。