Home    |    Support   |   Site Map

Site search
 

See Also
Other Platforms
Features
Buy Now
Online Help
Demo
Licensing
Back

How to print barcode images in ASP.NET Web Applications with Barcode Professional

Technologies used
  • Neodynamic Barcode Professional 6.0 for ASP.NET (WebControl)
  • Microsoft .NET Framework (any version)
  • Microsoft Visual Studio .NET (any version)
In ASP.NET Web Applications there are two different scenarios when talking about printing which are commonly known as "Client-side Printing" and "Server-side Printing".
In this article we are going to explore each scenario and how barcode printing can be accomplished by using Barcode Professional for ASP.NET.
ASP.NET Barcode Client-side Printing
In an ASP.NET Web Application, Client-side printing means that the printing job takes place on the user's machine as is shown in the following figure.
In Client-side printing scenarios, one of the commonly used techniques for printing is accomplished by using a simple JavaScript function on an ASP.NET WebForm (ASPX Page). The idea is very simple: provide to the user an ASP.NET WebForm with the content that must be printed enclosing it into a DIV tag and then use a JavaScript function to launch the print dialog on the client-side.
In the following example, we'll create a simple ASP.NET WebForm in order the user can print an Access Card which holds a barcode image rendered by Barcode Professional for ASP.NET.
Example of ASP.NET Barcode Client-side printing
Follow these steps
  • Create an ASP.NET Web Application or Website using Visual Studio .NET (any version)
  • Open the default.aspx webform and:
    • Add the following JavaScript function inside the HEAD section of the WebForm. This JavaScript function will be used to allow the user to print out the desired content i.e. the Access Card content. 
      <script type="text/javascript"> 
	function ClientSidePrint(idDiv) 
        { 
            var w = 600;
            var h = 400;
            var l = (window.screen.availWidth - w)/2;
            var t = (window.screen.availHeight - h)/2;
        
            var sOption="toolbar=no,location=no,directories=no,menubar=no,scrollbars=yes,width=" + w + ",height=" + h + ",left=" + l + ",top=" + t; 
            // Get the HTML content of the div
            var sDivText = window.document.getElementById(idDiv).innerHTML;
            // Open a new window
            var objWindow = window.open("", "Print", sOption);
            // Write the div element to the window
            objWindow.document.write(sDivText);
            objWindow.document.close(); 
            // Print the window            
            objWindow.print();
            // Close the window
            objWindow.close();            
        } 
</script>


      The JavaScript ClientSidePrint function is very straightforward. It just takes a DIV's ID and then writes its content into a new browser window in order to invoke the print dialog on that window.

    • Drag & Drop a Barcode Professional control from the VS Toolbox onto the WebForm so a reference to the Neodynamic.WebControls.BarcodeProfessional.dll assembly is made.
      After that, change to the WebForm Source View and replace the BODY section's content with the following code: 
      <form id="form1" runat="server">
    <div>
        <button onclick="ClientSidePrint('AccessCard');">Print Access Card...</button>
        <br />
        Barcode Client-side Printing Sample!
        <br />
        <br />
    </div>
    <div id="AccessCard">        
        <div style="width:300px; border:solid 2px black; text-align:center; padding:5px">
            <strong><span style="font-size: 16pt; font-family: Arial">AdventureWorks<br />
                Access Card</span></strong><br />
            <br />
            <span style="font-family: Arial"><strong>
                <br />
                Gilbert, Guy<br />
            </strong>
                        <span style="font-size: 10pt">Software Developer<br />
                        </span></span>
            <br />
            <neobarcode:BarcodeProfessional ID="BarcodeProfessional1" runat="server" BarHeight="0.6"
                        Code="12345678902120005544" Font-Bold="False" Font-Italic="False" Font-Names="Arial"
                        Font-Size="10pt" Font-Strikeout="False" Font-Underline="False"
                        Symbology="Code128" />
            <br />
            <br />
            <span style="font-size: 8pt"><span style="font-family: Arial"><strong>IMPORTANT<br />
            </strong>The cardholder
                        accepts responsibility for materials changed to this card and so on! </span></span></div>       
    </div>
</form>


      If you switch to the Design View you should get something like this:

      ASP.NET Client-side Printing - Access Card with Barcode at design-time in Visual Studio


      Here, a DIV tag which ID is AccessCard holds the desired content to be printed on the client-side. The HTML button titled "Print Access Card...", when is pressed by the user, will invoke the JavaScript function ClientSidePrint by passing to it the target DIV i.e. the same which ID is AccessCard!

  • That's it. Run your application and click on "Print Access Card..." button. A new browser window will be opened allowing to the user to print out the Access Card featuring a barcode image generated by Barcode Professional.

    ASP.NET Client-side Printing - Access Card with Barcode at runtime


    Remember that you can made this sample as complicated as you want. Just keep in mind to write the desired content to be printed inside a DIV tag!
ASP.NET Barcode Server-side Printing
In an ASP.NET Web Application, Server-side printing means that the printing job takes place on the Server machine which is running our ASP.NET Web Application as is shown in the following figure.
In ASP.NET Server-side printing scenarios, the technique for printing is accomplished by using the .NET PrintDocument class - under System.Drawing.Printing namespace - on an ASP.NET WebForm (ASPX Page).

The PrintDocument class - which is mostly used in Windows Forms applications - lets you setting up the properties that describe what and where to print content such us strings, images, etc. The main method the PrintDocument class features is Print which starts the document's printing process. After Print method is invoked, the PrintDocument raises a PrintPage event for each page to be printed. Here is where you should add the printing logic to an event handler for that event.
Barcode Professional control features an overloaded method called DrawOnCanvas which lets you to draw the barcode image on any GDI+ Graphics object - an instance of System.Drawing.Graphics class. The PrintDocument's PrintPage event exposes a Graphics object where to paint the page content and here is where that Graphics object must be passed to the DrawOnCanvas method in order to get the barcode image printed out on a Server's Printer.

In the following example, we'll create a simple ASP.NET WebForm in order the user can print out an Access Card which holds a barcode image rendered by Barcode Professional for ASP.NET. Remember that the printing job will be done on a server's printer.
Example of ASP.NET Barcode Server-side printing
Follow these steps
  • Create an ASP.NET Web Application or Website using Visual Studio .NET (any version)
  • Open the default.aspx WebForm and drag & drop the following ASP.NET Server Controls:
    • 1 Panel control and inside it...
    • 2 TextBox controls
    • 1 DropDownList control
    • 1 Button control


    After that, please design the page so it looks like the following figure:

    ASP.NET Server-side Printing - Access Card with Barcode at design-time in Visual Studio


  • In the Page_Load event procedure write the following code. It simply fills the DropDownList control with all installed Printers on the server.
    Visual Basic .NET 
    If Not IsPostBack Then
     Me.DropDownList1.DataSource = System.Drawing.Printing.PrinterSettings.InstalledPrinters
     Me.DropDownList1.DataBind()
     Me.DropDownList1.SelectedIndex = 0
End If
    Visual C# .NET 
    if (!IsPostBack)
{
     this.DropDownList1.DataSource = System.Drawing.Printing.PrinterSettings.InstalledPrinters;
     this.DropDownList1.DataBind();
     this.DropDownList1.SelectedIndex = 0;
}
  • Add an event handler to the Button's Click event and write the following code. It will create an instance of the PrintDocument class and will add an event handler to the PrintPage event. Notice that all the printing logic including barcode drawing is coded in the event handler procedure.
    Visual Basic .NET 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

    ' Create an instance of PrintDocument

    Dim printdoc As New System.Drawing.Printing.PrintDocument()
    ' Set the printer name

    printdoc.PrinterSettings.PrinterName = Me.DropDownList1.Text
    ' Handle printing

    AddHandler printdoc.PrintPage, AddressOf Me.printdoc_PrintPage    
    ' Print!

    printdoc.Print()

End Sub 

Private Sub printdoc_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs)

    ' Printing Access Card...
    
    ' Access Card size

    Dim cardSize As New System.Drawing.Rectangle(0, 0, 350, 200)
    ' Draw Card Size        

    e.Graphics.DrawRectangle(System.Drawing.Pens.Black, cardSize)
    e.Graphics.DrawString("AdventureWorks Access Card", New System.Drawing.Font("Arial", 16.0F), System.Drawing.Brushes.Black, New System.Drawing.PointF(10.0F, 10.0F))

    ' Draw employee's name

    e.Graphics.DrawString(Me.TextBox1.Text, New System.Drawing.Font("Arial", 12.0F), System.Drawing.Brushes.Black, New System.Drawing.PointF(10.0f, 50.0F))
    
    ' Draw barcode for employee's ID

    Dim bcp As New Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional()
    ' Use Code 128 symbology

    bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128
    ' Other barcode settings such as Bar's Height

    bcp.BarHeight = 1.0F ' 1 inch

    bcp.QuietZoneWidth = 0
    ' ...
    ' Set the value to encode i.e. Employee's ID

    bcp.Code = Me.TextBox2.Text

    ' Draw barcode on the printer's graphics

    bcp.DrawOnCanvas(e.Graphics, New System.Drawing.PointF(0.10F, 0.75F))

End Sub
    Visual C# .NET 
    protected void Button1_Click(object sender, EventArgs e)
{
    // Create an instance of PrintDocument
    System.Drawing.Printing.PrintDocument printdoc = new System.Drawing.Printing.PrintDocument();
    // Set the printer name
    printdoc.PrinterSettings.PrinterName = this.DropDownList1.Text;
    // Handle printing
    printdoc.PrintPage += new System.Drawing.Printing.PrintPageEventHandler(printdoc_PrintPage);
    // Print!
    printdoc.Print();
}

void printdoc_PrintPage(object sender, System.Drawing.Printing.PrintPageEventArgs e)
{
    // Printing Access Card...
    
    // Access Card size
    System.Drawing.Rectangle cardSize = new System.Drawing.Rectangle(0, 0, 350, 200);
    // Draw Card Size        
    e.Graphics.DrawRectangle(System.Drawing.Pens.Black, cardSize);
    e.Graphics.DrawString("AdventureWorks Access Card", new System.Drawing.Font("Arial", 16.0f), System.Drawing.Brushes.Black, new System.Drawing.PointF(10.0f, 10.0f));

    // Draw employee's name
    e.Graphics.DrawString(this.TextBox1.Text, new System.Drawing.Font("Arial", 12.0f), System.Drawing.Brushes.Black, new System.Drawing.PointF(10.0f, 50.0f));
    
    // Draw barcode for employee's ID
    Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional bcp = new Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional();
    // Use Code 128 symbology
    bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128;
    // Other barcode settings such as Bar's Height
    bcp.BarHeight = 1.0f; //1 inch
    bcp.QuietZoneWidth = 0;
    // ...
    // Set the value to encode i.e. Employee's ID
    bcp.Code = this.TextBox2.Text;

    // Draw barcode on the printer's graphics
    bcp.DrawOnCanvas(e.Graphics, new System.Drawing.PointF(0.10f, 0.75f));
}
  • That's it. Run your application, fill the form with some values (see the screenshot), select a server's printer (It is probably that your Printer is not the same to the shown in the screenshot!) and click on "Print..." button.

    ASP.NET Server-side Printing - Access Card with Barcode at runtime


    When "Print..." button is pressed, the printing logic is executed and the fictitious Access Card is printed using the selected server's printer.

    ASP.NET Server-side Printing - Access Card with Barcode printed on the server-side


TIP: How to print barcodes that need to fit a given area using PrintDocument class
It's very common to need to print the barcode in order it fits a given area, for instance: "The barcode must be printed on an area of size 3 inch x 0.5 inch."

One version of DrawOnCanvas method lets you to accomplish that by specifying the target area through barsAreaInInches parameter. Keep in mind the following points about the target area:
  • The target area's size (width and height) is measured in unit specified to BarcodeUnit property of the BarcodeProfessional object involved. By default it is INCH
  • The target area involves:
    • Width: it includes the barcode bars width plus left and right Quiet Zones (QuietZoneWidth property)
    • Height: it includes the barcode bar's height only

      The target area on which the barcode must be drawn
      The target area on which the barcode must be drawn

As stated before, the Graphics object exposed by PrintDocument's PrintPage event must be passed to the Barcode Professional's DrawOnCanvas method in order to get the barcode printed fitting the specified area.

Example
Supposing you have to print a barcode that must fit an area of size 3 inch x 0.5 inch, then just change the DrawOnCanvas invocation in the previous example by this one:
Visual Basic .NET 
' Draw barcode on the printer's graphics
' The barcode must fit an area of size 3in x 0.5in

bcp.DrawOnCanvas(e.Graphics, NewNew System.Drawing.PointF(0.10F, 0.75F), New System.Drawing.SizeF(3.0F, 0.5F))
Visual C# .NET 
// Draw barcode on the printer's graphics
// The barcode must fit an area of size 3in x 0.5in
bcp.DrawOnCanvas(e.Graphics, new System.Drawing.PointF(0.10f, 0.75f), new System.Drawing.SizeF(3.0f, 0.5f));
That's it. If you run again your application, fill the form with some values, select a server's printer and click on "Print..." button you should get the desired barcode size.

ASP.NET Server-side Printing - Access Card with Barcode fitting a given area printed on the server-side


If you need more information or assistance, please contact our .
  Home   |    About us   |    Products   |   Support   |   Contact us   |   Privacy Policy
 Copyright © 2003 - 2009 Neodynamic S.R.L. All rights reserved.