Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript and asp.net mvc

Posted on 2016-09-14
12
Medium Priority
?
63 Views
Last Modified: 2016-09-14
I Guys,

I'm generating bar-code in my asp.net mvc application and I'm using jquery to do so.
Here is the plugin i'm using - jquery-barcode.js.

Now I'm returning list of itemlookup fields from the database and would like to show their barcode in the view.

Here is the example what I'm doing:

Controller
 public ActionResult Index()
        {
            CodeprojectEntities db = new CodeprojectEntities();
            var br = db.Items.Select(a => a.ItemLookupCode).Take(10).ToList();
            ViewBag.barcode = br;

            return View();
        }

Open in new window



view:
<div class="text-center">
    @foreach (var itm in ViewBag.barcode)
    {
        <div class="row">
            <div id="bcTarget" class="col-md-12">
                <input type="hidden" id="barid" value="@itm" />

            </div>
        </div>
    }
</div>


@section scripts{
<script src="~/Scripts/jquery-barcode.js"></script>
    <script>
        $(document).ready(function () {
            var barid = $("#barid").val();
            $("#bcTarget").barcode(barid, "code128", { barWidth: 2, barHeight: 30 });
        });
    
    </script>
}

Open in new window


I'm getting all the fields from the database but it shows just the first field in the view.
I assume the jquery function doesn't know how to read all the items which come from the foreach loop.

Please, can anybody help with this? I'm wondering if there is a solution ?

THanks,
0
Comment
Question by:Moti Mashiah
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
12 Comments
 
LVL 35

Expert Comment

by:ste5an
ID: 41798485
Field? Do you mean row?

Just render your view:
<div class="text-center">
    @foreach (var itm in ViewBag.barcode)
    {
        <div class="row">
            <div id="bcTarget" class="col-md-12">
                <input type="text" id="barid" value="@itm" />
            </div>
        </div>
    }
</div>

Open in new window


How many rows do you get?
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798529
Hi,

I think I didn't explain it right sorry.

I'm getting 10 rows from the server and sending just one column to the view(field).
Now in the view I'm getting all 10 rows and even see them, but what about when I run the jquery to make these row/fields as a barcode:

Please look at the full code I sent. I think you didn't pay attention to the concept here:
There is a jquery barcode generator:
@section scripts{
<script src="~/Scripts/jquery-barcode.js"></script>
    <script>
        $(document).ready(function () {
            var barid = $("#barid").val();
            $("#bcTarget").barcode(barid, "code128", { barWidth: 2, barHeight: 30 });
        });
    
    </script>
}

Open in new window



For now it returns just one row. I can see all the row if I just want to query them from the database without generate them to a barcode.

Please, let me know if you got my point.
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798537
Here is the screen shot which might give you the full picture.
Untitled.png
0
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
LVL 35

Expert Comment

by:ste5an
ID: 41798561
You're createing all rows with the same id. Thus you'll get only one barcode. The question is how that barcode plugin works. Somehow the barid parameter makes no sense at the first glance.

Maybe you need:

<div class="text-center">
    @foreach (var itm in ViewBag.barcode)
    {
        <div class="row">
            <div class="bcTarget" class="col-md-12">
                <input type="text" class="barid" value="@itm" />
            </div>
        </div>
    }
</div>

Open in new window


with

        $(document).ready(function () {
            $("barid").barcode($(this), "code128", { barWidth: 2, barHeight: 30 });
        });

Open in new window

0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798588
I'm getting the 10 row just fine the only issue is when I generate barcode from the plugin.

Please  - see this link http://barcode-coder.com/en/barcode-jquery-plugin-201.html
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798651
I found something like this:
Still didn't work.
 $(document).ready(function () {

            $("#barid").each(function () {
                var b = $(this).val()
                $(this).barcode(b, "code128", { barWidth: 2, barHeight: 30 }).last().text();
                $(this).next("#bcTarget").text(b);
            }); 
        });

Open in new window

0
 
LVL 35

Expert Comment

by:ste5an
ID: 41798674
Seems the plugin is a little bit picky. This works:

<!DOCTYPE html>
<html>
<body>
	<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="jquery-barcode.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {					
			$(".barid").each(function(){
				$(this).barcode($.text(this),"code128",{barWidth:2,barHeight:30});
			});			
		});
	</script>
	<div class="barid">11111</div>
	<div class="barid">2222</div>
	<div class="barid">333</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798696
Didn't work for me I need to return to id="bcTarget" the id="barid" just give the value but the return barcode should go to: bcTarget

 <div class="row">
            <div id="bcTarget" class="col-md-12">
                <input type="hidden" id="barid" value="@itm" />
            </div>
        </div>
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798698
I feel we are almost there :).
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41798700
Thank you for help soo far.
0
 
LVL 35

Accepted Solution

by:
ste5an earned 2000 total points
ID: 41798706
No! Each element must have a unique id. But you can use a cascaded selector:

<!DOCTYPE html>
<html>
<body>
	<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="jquery-barcode.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {					
			$("#barcodes .barid").each(function(){
				$(this).barcode($.text(this),"code128",{barWidth:2,barHeight:30});
			});			
		});
	</script>
	<div id="barcodes">
		<div class="barid">11111</div>
		<div class="barid">2222</div>
		<div class="barid">333</div>
	</div>
	<div id="no-barcodes">
		<div class="barid">11111</div>
		<div class="barid">2222</div>
		<div class="barid">333</div>
	</div>
</body>
</html>

Open in new window


So your view should look like:

<div id="barcodes" class="text-center">
    @foreach (var itm in ViewBag.barcode)
    {
        <div class="row">
            <div class="col-md-12">
                <div class="barid">@itm</div>
            </div>
        </div>
    }
</div>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 41799205
Thank you sooo much.
0

Featured Post

Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question