The following guide provides you details about how to print barcode label in an ASP.NET scenario to thermal printers installed in the client side machine using Neodynamic ThermalLabel SDK 5.0

Overview
A common request from our customers is like follows. They have created an ASP.NET website and they want to allow their users to print barcode thermal labels to their local /client-side thermal printers. The request goes to the point that some of them, do not want to show any print dialog to the user but just directly print to the default printer without any intervention.

Considering all these needs, we are shipping with ThermalLabel SDK 5.0 a new printing approach for such scenarios. The solution we provide mainly involves the new WebPrintJob class of our SDK as well as the new TLClientPrint utility. It’s interesting to note that this new approach is a cross-browser solution (it works with these min browser versions: Internet Explorer 6.0, Firefox 2.0, Chrome 11, Opera 9.0 and Safari 3.0) on Windows OS. The software requirements for the server and client sides are the following:

+ Server-side Requirements:
1. ASP.NET 3.5 or greater.
2. jQuery 1.4.1 or greater.
3. ThermalLabel SDK 5.0 or greater.

+ Client-side Requirements:
1. Internet Browser (minimum versions are: Internet Explorer 6.0, Firefox 2.0, Chrome 11, Opera 9.0 and Safari 3.0)
2. TLClientPrint Utility. This software requires .NET Framework 3.5 (Client-Profile) or greater.
3. A Zebra ZPL/EPL compatible thermal printer

The client side printing approach works as shown in the following figure:
http://www.neodynamic.com/demo-faq/t...vb-c-sharp.jpg

1. You code your website to create WebPrintJob objects based on your business needs. A WebPrintJob object contains info about the ThermalLabel object (that’s the layout of the label containing text, shapes, pictures, barcodes, etc), the number of copies to be printed and the client printer settings (or you can display a print dialog and let the user to specify the printer settings). When the user requests your aspx page, you provide him with a button or link (it would be the “print label” action) which when clicked by the user, it will launch the TLClientPrint utility (which must be previously installed in the client machine).

2. Then the TLClientPrint utility will request your page again, but this time with a special parameter. That page will handle this special request and will return a WebPrintJob object back to the utility which will process it locally in the client machine using a local copy of the ThermalLabel SDK dll (which is automatically installed with the TLClientPrint)

3. The TLClientPrint utility will pass all that info to the ThermalLabel SDK which in turn will generate and send the printer commands to the specified printer (*). It is important to note that the whole job is done at the client-side, freeing the server resources and taking advantages of the processing power of the client machine!

(*) A WebPrintJob contains info about the target client printer. You have many options in this regard. For example:
a. You can already send all the client printer info through the WebPrinterJob’s PrinterSettings property. Of course, you need to know many aspects of the client printer like the communication type (USB, Serial, Parallel or Network printer), the name or other related info like IP/Port, if it is ZPL or EPL capable, etc. In some enterprise scenarios this could be easy or manageable as there could be a set of identical printers in most client locations. In other scenarios, you could request the user to provide his printer info once, and then you could store such info somewhere and use it afterward.
b. You can also instruct the TLClientPrint utility to directly print to the default printer in the client machine. In this case you must be sure the client has the correct thermal printer set as the “default printer” but keep in mind that you still will need to specify if ZPL or EPL commands need to be generated as well as the DPI value supported by the client printer.
c. You can also create a custom Print Dialog form (using Visual Studio and your preferred .NET language like VB or C#) and plug in it with the TLClientPrint utility. By specifying the ShowPrintDialog property to the WebPrintJob object, the TLClientPrint utility will display your Print Dialog form to the client and he will be able to specify the needed info for his printer. By default, the TLClientPrint utility comes with a standard print dialog. (An article about extending the TLClientPrint utility will be available soon)

Sample code
The following sample demos how to use the new WebPrintJob class and the TLClientPrint utility. We’ll create a simple ASP.NET website featuring a page with a button. Such button will start the client side printing process by invoking the TLClientPrint utility which must be previously installed in the client machine. We’ll show the user the default Print Dialog to print a simple thermal label which features a text and a Code 128 barcode.
1. If you do not have ThermalLabel SDK 5.0 installed in your dev machine, then download and install it.
2. Ensure the client machine has the TLClientPrint utility installed. You could provide the user with a link to download and install the TLClientPrint utility. NOTE: You need to install it in your own dev machine too if you want to test it locally. The TLClientPrint utility is located in the installation folder of ThermalLabel SDK 5.0
3. Open Visual Studio (2008 or greater) or Visual Web Developer and create a new ASP.NET (3.5 or greater) website. Name it as WebSiteThermalLabelPrintSample
4. In the ASP.NET project, add a reference to the ThermalLabel SDK 5.0 i.e. Neodynamic.SDK.ThermalLabel.dll which is located in the installation folder of the product.
5. Now, we'll code our aspx page. Remember it is a simple page with a button that when clicked by the user, it will start the client side printing process.
5.1 The javascript code
Our client print solution uses basic javascript code from jQuery framework. You can use a local copy of jQuery (min version should be 1.4.1) or use any of the CDN services hosting jQuery. In our case, will choose the Google Ajax API CDN and reference it in our aspx page. (You can see it in the Default.aspx markup later in this guide)
5.2 Add to your project a new Javascript file, name it TLClientPrint.js and paste the following code:

/*
* ThermalLabel Client Print Utility
* part of ThermalLabel SDK 5.0
* http://www.neodynamic.com/
* Copyright (c) 2012 - Neodynamic SRL
*/


$(document).ready(function () {
$('<iframe />', {
name: 'tlprint',
id: 'tlprint',
width: '1',
height: '1',
style: 'visibility:hidden;position:absolute'
}).appendTo('body');
})

function printThermalLabel() {
var webPrintJobUrl = $(location).attr('href') + "?webPrintJob=t";
$("#tlprint").attr("src", "tlprint:" + webPrintJobUrl);
}

This code features the printThermalLabel() function which will be invoked by the button on the aspx page to start the client printing process. There is where the aforementioned special parameter (?webPrintJob=t) is specified.

The ASPX/HTML code

5.3 Open the Default.aspx page and paste the following markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" ID="Head1">
<title>Test ThermalLabel Client Printing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="TLClientPrint.js" type="text/javascript"></script>
</head>
<body>
<form id="Form2" runat="server">
<div>
<h1>ThermalLabel SDK Client Print Samples</h1><br />
<input type="button" value="Print Basic Label..." onclick="javascriptrintThermalLabel()" />
<br />
<br />
<cite>Remember that the client must install the TLClientPrint Utility first!</cite>
</div>
</form>
</body>
</html>

Notice that in the page we have:
- A script reference to jQuery (using Google CDN) and a reference to the local TLClientPrint.js file
- A simple HTML button invoking the printThermalLabel() function we defined in the TLClientPrint.js file

The server-side code in VB or C#

5.4 In the server-side code we need to handle the special parameter (?webPrintJob=t) to create the WebPrintJob object which will be sent back to the TLClientPrint utility for further processing. The following code will be in the code-behind class of our aspx page and will generate a WebPrintJob to print a simple thermal label (with a text and a Code 128 barcode) and instructing the TLClientPrint utility to display the default print dialog to the user. So, open the code-behind class of your default.aspx page and paste the following code (You will need to add a reference to the namespace Neodynamic.SDK.Printing at the beginning of your page's class file):

Visual Basic .NET
Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init

'is this a request for a WebPrintJob handler?
If Not Request("webPrintJob") Is Nothing Then
'Create a WebPrintJob obj
Dim webPj As New WebPrintJob()

'set a ThermalLabel obj
webPj.ThermalLabel = GenerateBasicThermalLabel()

'display print dialog to the client
webPj.ShowPrintDialog = True

'Serialize WebPrintJob and send it back to the client
'so it can be processed by the TLClientPrint utility
Response.ContentType = "text/plain"
Response.Write(webPj.ToString())
Response.Flush()
Response.End()
End If

End Sub

Private Function GenerateBasicThermalLabel() As ThermalLabel

'Define a ThermalLabel object and set unit to inch and label size
Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
tLabel.GapLength = 0.2
'Define a TextItem object
Dim txtItem As New TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test")
'Define a BarcodeItem object
Dim bcItem As New BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345")
'Set bars height to .75inch
bcItem.BarHeight = 0.75
'Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104
'Add items to ThermalLabel object...
tLabel.Items.Add(txtItem)
tLabel.Items.Add(bcItem)

Return tLabel

End Function

Visual C# .NET

protected void Page_Init(object sender, EventArgs e)
{
//is this a request for a WebPrintJob handler?
if (Request["webPrintJob"] != null)
{
//Create a WebPrintJob obj
WebPrintJob webPj = new WebPrintJob();

//set a ThermalLabel obj
webPj.ThermalLabel = GenerateBasicThermalLabel();

//display print dialog to the client
webPj.ShowPrintDialog = true;

//Serialize WebPrintJob and send it back to the client
//so it can be processed by the TLClientPrint utility
Response.ContentType = "text/plain";
Response.Write(webPj.ToString());
Response.Flush();
Response.End();
}
}

private ThermalLabel GenerateBasicThermalLabel()
{
//Define a ThermalLabel object and set unit to inch and label size
ThermalLabel tLabel = new ThermalLabel(Neodynamic.SDK.Printing.UnitType.Inch, 4, 3);
tLabel.GapLength = 0.2;

//Define a TextItem object
TextItem txtItem = new TextItem(0.2, 0.2, 2.5, 0.5, "Thermal Label Test");

//Define a BarcodeItem object
BarcodeItem bcItem = new BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345");
//Set bars height to .75inch
bcItem.BarHeight = 0.75;
//Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104;

//Add items to ThermalLabel object...
tLabel.Items.Add(txtItem);
tLabel.Items.Add(bcItem);


return tLabel;
}

That's it! To test it locally, first ensure you have the TLClientPrint utility installed (of course install it on any other client machine you want to test the project too). You will get something like this:
http://www.neodynamic.com/demo-faq/t...vb-c-sharp.jpg

The sample page in Google Chrome (Remember our solution will work with these minimum versions of most popular browsers: Internet Explorer 6.0, Firefox 2.0, Chrome 11, Opera 9.0 and Safari 3.0)

When the user clicks the "Print Basic Label…" button, it's likely the browser will display some dialog to him. This is ok as the button is trying to launch the TLClientPrint utility. Here is some screenshots of the possible dialogs displayed by the most popular browsers. You can instruct to the user how to do this once by specifying the correct values on those dialogs.

- For Internet Explorer users, instruct them to uncheck the "Always ask before opening this type of address" and click Allow button.

http://www.neodynamic.com/demo-faq/t...int-dialog.jpg

- For Firefox users, instruct them to check the "Remember my choice for tlprint links" and click OK button.

http://www.neodynamic.com/demo-faq/t...int-dialog.jpg

- For Chrome users, instruct them to check the "Remember my choice for all links of this type." and click Launch Application button.

http://www.neodynamic.com/demo-faq/t...int-dialog.jpg

After the user's confirmation, the TLClientPrint utility will run and in this case, the default Print Dialog will be displayed:

http://www.neodynamic.com/demo-faq/t...int-dialog.jpg

The user is asked for his printer settings like DPI, printer language (ZPL or EPL) and in this case the Windows Driver name. Again, remember that you can print directly to the client printer without displaying any dialog but you need to know all the needed info about the client printer before doing such thing.

After user click Ok button, the ThermalLabel object you created in your ASP.NET website will be printed to the client printer!

http://www.neodynamic.com/demo-faq/t...bel-sample.jpg

The barcode thermal label which will be printed to the client printer.

Links:
This demos
Demos
Download ThermalLabel SDK for .NET
More Information about Neodynamic ThermalLabel SDK for .NET

Neodynamic
.NET Components & Controls
http://www.neodynamic.com
http://www.thermal-label.net