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

---

Product Barcode Professional for ASP.NET Published 03/26/2009 Updated 03/26/2009

Requirements

  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
• ASP.NET Barcode Server-side Printing

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:
    
    
    
    
    
    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.
  
  
  
  
  
  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:
  
  
  
  
  
• In the Page_Load event procedure write the following code. It simply fills the DropDownList control with all installed Printers on the server.
  
  

  VB

  
  If Not IsPostBack Then
       Me.DropDownList1.DataSource = System.Drawing.Printing.PrinterSettings.InstalledPrinters
       Me.DropDownList1.DataBind()
       Me.DropDownList1.SelectedIndex = 0
  End If          

  C#

  
  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.

  VB

  
  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         

  C#

  
  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.
  
  
  
  
  
  When "Print..." button is pressed, the printing logic is executed and the fictitious Access Card is printed using the selected server's printer.
  
  
  
  
  
  

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
    
    

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:

VB

 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))
            

C#

// 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.