Asp.Net MVC中JavaScript生成EAN13条码仅首个生效问题求助

Hey there! Let's get those barcodes showing up properly for every item in your list. The issue right now is that you're using a duplicate id="barcode" across all your looped items—and browsers only ever grab the first element when you use getElementById(). Here's how to fix it step by step:

Step 1: Replace Unique IDs with Reusable Classes #

IDs are meant to be unique per page, so using the same barcode id in your foreach loop breaks that rule. Switch to a class instead:

Update Your View Markup: #

1. Change the CSS selector from #barcode to .barcode (since we're using a class now, and I fixed your missing font-family declaration too):

<style type="text/css">
    .barcode {
        font-weight: normal;
        font-style: normal;
        line-height: normal;
        font-family: sans-serif;
        font-size: 12pt
    }
</style>

2. In your loop, replace the id="barcode" with class="barcode":

<div id="barcodecontainer" style="width:3in; align-content:flex-start" >
    <div class="barcode">@m.Barcode</div>
</div>

Step 2: Modify JavaScript to Loop Through All Barcode Elements #

Instead of targeting a single element by ID, we'll grab every element with the barcode class and generate a barcode for each one individually.

Update Your Script: #

<script type="text/javascript">
    /* <![CDATA[ */
    // Grab all barcode elements and process each one
    const barcodeElements = document.querySelectorAll(".barcode");
    barcodeElements.forEach(element => {
        const barcodeValue = element.innerHTML.trim();
        element.innerHTML = DrawHTMLBarcode_EAN13(barcodeValue, "yes", "in", 0, 2.5, 1, "bottom", "center", "", "black", "white");
    });
    /* ]]> */
</script>

Why This Works: #

• document.querySelectorAll(".barcode") grabs all elements with the barcode class, not just the first one.
• Using forEach lets us iterate through each element and run the barcode generation function on its specific value.
• Classes are designed to be reused across multiple elements, which fits perfectly with your looped list items.

Full Modified View Code (Quick Reference) #

Here's the complete updated view with all changes applied:

@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;
            font-family: 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 class="barcode">@m.Barcode</div>
            </div>
        </div>
        <br />
    }
    <script type="text/javascript">
        /* <![CDATA[ */
        const barcodeElements = document.querySelectorAll(".barcode");
        barcodeElements.forEach(element => {
            const barcodeValue = element.innerHTML.trim();
            element.innerHTML = DrawHTMLBarcode_EAN13(barcodeValue, "yes", "in", 0, 2.5, 1, "bottom", "center", "", "black", "white");
        });
        /* ]]> */
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user8121224