Advertisements

QR Code Generator in ASP.NET Core Using Zxing.Net


Introduction

In this article, we will explain how to create a QR Code Generator in ASP.NET Core 1.0, using Zxing.Net.

Background

I tried to create a QR Code Generator in ASP.NET Core, using third party libraries but in most of the cases codes are not fully supported in ASP.NET Core because of some version issues etc. I searched a lot in Google but finally I found “Zxing.Net” and it is a library, which supports decoding and generating of the barcodes. I had a discussion with MicJahn and came up  with a great solution.

Before reading this article, you must read the articles given below for ASP.NET Core knowledge.

Zxing.Net

A library, which supports decoding and generating of the barcodes (Example: QR Code, PDF 417, EAN, UPC, Aztec, Data Matrix, Codabar) within the images.

Assemblies Required

The assemblies given below are required for QR Code Generator.

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.IO;
using ZXing.QrCode;

Packages required

We need the packages given below for drawing and creating QR Code Generator.

"CoreCompat.System.Drawing": "1.0.0-beta006",    
"ZXing.Net": "0.15.0" 

C#

QRCodeTagHelper class given below contains QR Code Generator methods etc.

namespace QRCodeApp {  
    [HtmlTargetElement("qrcode")]  
    public class QRCodeTagHelper: TagHelper {  
        public override void Process(TagHelperContext context, TagHelperOutput output) {  
            var QrcodeContent = context.AllAttributes["content"].Value.ToString();  
            var alt = context.AllAttributes["alt"].Value.ToString();  
            var width = 250; // width of the Qr Code    
            var height = 250; // height of the Qr Code    
            var margin = 0;  
            var qrCodeWriter = new ZXing.BarcodeWriterPixelData {  
                Format = ZXing.BarcodeFormat.QR_CODE,  
                    Options = new QrCodeEncodingOptions {  
                        Height = height, Width = width, Margin = margin  
                    }  
            };  
            var pixelData = qrCodeWriter.Write(QrcodeContent);  
            // creating a bitmap from the raw pixel data; if only black and white colors are used it makes no difference    
            // that the pixel data ist BGRA oriented and the bitmap is initialized with RGB    
            using(var bitmap = new System.Drawing.Bitmap(pixelData.Width, pixelData.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb))  
            using(var ms = new MemoryStream()) {  
                var bitmapData = bitmap.LockBits(new System.Drawing.Rectangle(0, 0, pixelData.Width, pixelData.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppRgb);  
                try {  
                    // we assume that the row stride of the bitmap is aligned to 4 byte multiplied by the width of the image    
                    System.Runtime.InteropServices.Marshal.Copy(pixelData.Pixels, 0, bitmapData.Scan0, pixelData.Pixels.Length);  
                } finally {  
                    bitmap.UnlockBits(bitmapData);  
                }  
                // save to stream as PNG    
                bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);  
                output.TagName = "img";  
                output.Attributes.Clear();  
                output.Attributes.Add("width", width);  
                output.Attributes.Add("height", height);  
                output.Attributes.Add("alt", alt);  
                output.Attributes.Add("src", String.Format("data:image/png;base64,{0}", Convert.ToBase64String(ms.ToArray())));  
            }  
        }  
    }  
}   

Index.chtml

The code given below will display QR Code Generator.

@{  
    ViewData["Title"] = "Home";  
}  
   
<h2>@ViewData["Title"].</h2>  
<h3>@ViewData["Message"]</h3>  
   
A library which supports decoding and generating of barcodes (like QR Code, PDF 417, EAN, UPC, Aztec, Data Matrix, Codabar) within images.  
   
<qrcode alt="QR Code" content="https://rajeeshmenoth.wordpress.com/" />  
 https://rajeeshmenoth.wordpress.com/  

_ViewImports.cshtml

The code Injecting TagHelper given below is in the entire Application.

@addTagHelper "*, QRCodeApp"  

project.json

The dependencies given below are required to create QR Code Application.

{  
  "dependencies": {  
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",  
    "Microsoft.AspNetCore.Mvc": "1.1.2",  
    "Microsoft.AspNetCore.Mvc.Core": "1.1.2",  
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",  
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",  
    "Microsoft.AspNetCore.StaticFiles": "1.1.1",  
    "Microsoft.Extensions.Logging.Console": "1.0.0",  
    "CoreCompat.System.Drawing": "1.0.0-beta006",  
    "ZXing.Net": "0.15.0"  
  },  
   
  "tools": {  
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"  
  },  
   
  "frameworks": {  
    "net452": { }  
  },  
   
  "buildOptions": {  
    "emitEntryPoint": true,  
    "preserveCompilationContext": true  
  },  
   
  "publishOptions": {  
    "include": [  
      "wwwroot",  
      "web.config"  
    ]  
  },  
   
  "scripts": {  
    "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]  
  }  
}  

Output

QRCode Generator

QRCode Generator

Reference

See Also

You can download other ASP.NET Core 1.0 source codes from MSDN Code, using the links, mentioned below.

Conclusion

We learnt how to create a QR Code Generator in ASP.NET Core 1.0 Using Zxing.Net. I hope, you liked this article. Please share your valuable suggestions and feedback.

Advertisements

Configuration : Aurelia Single Page Applications In ASP.NET Core 1.0


Introduction

We all are familiar with SPA or Single Page Applications like Angular 2 in development. Aurelia is another famous Single Page Application development technique in the market similar to Angular 2 but syntactically different. Now, we are going to configure Aurelia Single Page Applications in ASP.NET Core 1.0.

Before reading this article, you must read the articles given below for ASP.NET Core knowledge.

Configuring Aurelia SPA in ASP.NET Core 1.0

The following steps need to be followed to configure Aurelia Single Page Applications in ASP.NET Core 1.0.

Install Node.Js

Node.js is very powerful JavaScript-based framework built on Chrome’s V8 JavaScript Engine. Node.js’ package ecosystem and npm are the largest ecosystems of open source libraries in the world.

Download and install Node.js on your machine : Node.js

nodejs-rajeeshmenoth

Nodejs : Download & Install

After completing the installation, we can check the current running version of Node.js in our machine through command prompt.

Command for Version Checking  – “node -v”

nodejs-version-rajeeshmenoth

Command for Nodejs Version

Install Git

Download and install appropriate Git on your machine from Git – Downloads

Install jspm

jspm or JavaScript Package Manager is a package manager for the SystemJS universal module loader and it is built on top of the dynamic ES6 module loader.

jspm installation command – “npm install -g jspm”

jspm-installation

After installing, we can check the current running version of jspm on our machine through command prompt, using the following command.

“jspm -v”

jspm version

jspm version

Setting Project Location

The following command will help to change our current “C Drive” to “F Drive” because currently our Aurelia project is saved into “F Drive”.

Drive Changing to Prjoect Location

Drive Change to Exact Aurelia Project Location in our machine

jspm Initialization

Now, we are going to install jspm in our ASP.NET Core 1.0 application.

“jspm init”

During the jspm initialization, it will ask a few questions. We have to enter three values in the following questions.

1.Enter server baseURL (public folder path) [./]

wwwroot ( I have saved all jspm references into Webroot or wwwroot but you can choose any folder ).

2. Do you wish to use a transpiler?[yes]:

yes ( Transpiler is similar to Compiler. It converts ES2015 to ES5 ).

3. Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur ? [traceur] :

Babel ( You can choose either Babel or TypeScript ).

jspm Initialization

jspm Initialization

Install Aurelia Framework in ASP.NET Core 1.0

The following command will help to install Aurelia framework in ASP.NET Core 1.0.

“jspm install aurelia-framework”

Aurelia Framework Installation

Aurelia Framework Installation

Install Aurelia bootstrapper in ASP.NET Core 1.0

The following command will help to install Aurelia bootstrapper in ASP.NET Core 1.0.

“jspm install aurelia-bootstrapper”

Aurelia Bootstrapper Installation

Aurelia Bootstrapper Installation

Project Structure

Click “show all files icon” in Solution Explorer. Then, you can see the jspm_packages reference and config.js inside the wwwroot.

Aurelia Project Structure In ASP.NET Core 1.0

Aurelia Project Structure In ASP.NET Core 1.0

config.js

The following json file contains all the details about Aurelia configuration.

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@2.0.1",
    "aurelia-framework": "npm:aurelia-framework@1.0.8",
    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.1.0",
    "babel": "npm:babel-core@5.8.38",
    "babel-runtime": "npm:babel-runtime@5.8.38",
    "core-js": "npm:core-js@1.2.7",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.4.1"
    },
    "github:jspm/nodelibs-buffer@0.1.0": {
      "buffer": "npm:buffer@3.6.0"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.9"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:jspm/nodelibs-vm@0.1.0": {
      "vm-browserify": "npm:vm-browserify@0.0.4"
    },
    "npm:assert@1.4.1": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "util": "npm:util@0.10.3"
    },
    "npm:aurelia-binding@1.1.1": {
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0"
    },
    "npm:aurelia-bootstrapper@2.0.1": {
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1",
      "aurelia-framework": "npm:aurelia-framework@1.0.8",
      "aurelia-history": "npm:aurelia-history@1.0.0",
      "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0",
      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0",
      "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-pal-browser": "npm:aurelia-pal-browser@1.1.0",
      "aurelia-polyfills": "npm:aurelia-polyfills@1.1.1",
      "aurelia-router": "npm:aurelia-router@1.1.1",
      "aurelia-templating": "npm:aurelia-templating@1.2.0",
      "aurelia-templating-binding": "npm:aurelia-templating-binding@1.2.0",
      "aurelia-templating-resources": "npm:aurelia-templating-resources@1.2.0",
      "aurelia-templating-router": "npm:aurelia-templating-router@1.0.1"
    },
    "npm:aurelia-dependency-injection@1.3.0": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-event-aggregator@1.0.1": {
      "aurelia-logging": "npm:aurelia-logging@1.2.0"
    },
    "npm:aurelia-framework@1.0.8": {
      "aurelia-binding": "npm:aurelia-binding@1.1.1",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
      "aurelia-loader": "npm:aurelia-loader@1.0.0",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-path": "npm:aurelia-path@1.1.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0",
      "aurelia-templating": "npm:aurelia-templating@1.2.0"
    },
    "npm:aurelia-history-browser@1.0.0": {
      "aurelia-history": "npm:aurelia-history@1.0.0",
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-loader-default@1.0.0": {
      "aurelia-loader": "npm:aurelia-loader@1.0.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-loader@1.0.0": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-path": "npm:aurelia-path@1.1.1"
    },
    "npm:aurelia-logging-console@1.0.0": {
      "aurelia-logging": "npm:aurelia-logging@1.2.0"
    },
    "npm:aurelia-metadata@1.0.3": {
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-pal-browser@1.1.0": {
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-polyfills@1.1.1": {
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-route-recognizer@1.1.0": {
      "aurelia-path": "npm:aurelia-path@1.1.1"
    },
    "npm:aurelia-router@1.1.1": {
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1",
      "aurelia-history": "npm:aurelia-history@1.0.0",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-path": "npm:aurelia-path@1.1.1",
      "aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.1.0"
    },
    "npm:aurelia-task-queue@1.1.0": {
      "aurelia-pal": "npm:aurelia-pal@1.2.0"
    },
    "npm:aurelia-templating-binding@1.2.0": {
      "aurelia-binding": "npm:aurelia-binding@1.1.1",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-templating": "npm:aurelia-templating@1.2.0"
    },
    "npm:aurelia-templating-resources@1.2.0": {
      "aurelia-binding": "npm:aurelia-binding@1.1.1",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
      "aurelia-loader": "npm:aurelia-loader@1.0.0",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-path": "npm:aurelia-path@1.1.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0",
      "aurelia-templating": "npm:aurelia-templating@1.2.0"
    },
    "npm:aurelia-templating-router@1.0.1": {
      "aurelia-binding": "npm:aurelia-binding@1.1.1",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-path": "npm:aurelia-path@1.1.1",
      "aurelia-router": "npm:aurelia-router@1.1.1",
      "aurelia-templating": "npm:aurelia-templating@1.2.0"
    },
    "npm:aurelia-templating@1.2.0": {
      "aurelia-binding": "npm:aurelia-binding@1.1.1",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
      "aurelia-loader": "npm:aurelia-loader@1.0.0",
      "aurelia-logging": "npm:aurelia-logging@1.2.0",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.3",
      "aurelia-pal": "npm:aurelia-pal@1.2.0",
      "aurelia-path": "npm:aurelia-path@1.1.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0"
    },
    "npm:babel-runtime@5.8.38": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:buffer@3.6.0": {
      "base64-js": "npm:base64-js@0.0.8",
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "ieee754": "npm:ieee754@1.1.8",
      "isarray": "npm:isarray@1.0.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:core-js@1.2.7": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.2"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:path-browserify@0.0.0": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:process@0.11.9": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "vm": "github:jspm/nodelibs-vm@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:vm-browserify@0.0.4": {
      "indexof": "npm:indexof@0.0.1"
    }
  }
});

package.json

The following JSON file contains all the dependencies of Aurelia.

{
  "jspm": {
    "directories": {
      "baseURL": "wwwroot"
    },
    "dependencies": {
      "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^2.0.1",
      "aurelia-framework": "npm:aurelia-framework@^1.0.8",
      "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.1.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}

Reference 

Conclusion

We learned how to configure Aurelia Single Page Applications in ASP.NET Core 1.0. I hope, you liked this article. Please share your valuable suggestions and feedback.

Multiplication of two numbers using Angular Js


In this article,we will disscuss multiplication of two numbers using Angular Js.


Angular Js : AngularJS is a JavaScript framework.It was originally developed by Hevery and Adam Abrons.Now it’s maintained by Google.Angular Js is light weight and easy to learn.It is perfect in Single Page Application projects.Angular Js is open source,free of cost and easy to handle.

Solution:

Let’s do some coding part.In the below example the code part contain two html input, First Number and Second Number.

<div ng-app="">
 
 <p>First Number:
<input type="number" ng-model="num1" ng-init="num1=0" />
 </p>
 <p>Second Number:
 <input type="number" ng-model="num2" ng-init="num2=0" />
 </p>
 <p>Sum: {{ num1 * num2 }}</p>
</div>

AngularJS Reference

AngularJS library written in JavaScript. Angular js reference file is given below.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

The AngularJS Major Components:

  • ng-app
  • ng-model
  • ng-bind

Important Knowledge :

  • The expressions are written inside the {{ expression }}.
  • ng-model directive help to bind the value in html control.the above solution num1 it contain the first input value.num2 contain the second input value.
  • ng-app directive define the angular js application.
  • The ng-init directive initializes application data.In this solution num1 and num2 assigned “0” or Zero. so we get sum "0" on the runtime in the both html textbox.
  • "*" help to multiple both input value inside the expression {{ num1 * num2 }}.

Output :

Output of the above solution..

Multiplication of two numbers using Angular Js

Multiplication of two numbers using Angular Js

 

 Example :

Jsfiddle Demo : http://jsfiddle.net/rajeeshmenoth/294k52a9/

Published : http://www.c-sharpcorner.com/Blogs/48229/

Datepicker,button event does not work inside updatepanel in asp.net


//datepicker error fixing

$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(EndRequestHandler);
function EndRequestHandler(sender, args) {

$("#ContentPlaceHolder1_txtAdmissionDate").datepicker();
}
});

//Button event error fixing

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<Triggers>
<asp:PostBackTrigger ControlID="btn_upload" />

</Triggers>

</asp:UpdatePanel>

How to active menus in asp.net websites


Code

$(document).ready(function () {

var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#div_id a').each(function () {
// and test its normalized href against the url pathname regexp
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});

});

Conform navigation setting in each pages in Asp.net website


Introduction

This blog describe how to Conform navigation setting in each pages in Asp.net website.

Code

//Put this script inside the Master page..

 function closeIt() {
        return "Any string value here forces a dialog box to \n" +
             "appear before closing the window.";
    }
    window.onbeforeunload = closeIt;

<body onbeforeunload="closeIt()">

 

Output :

Confirm navigation

 

 

 


How can I prevent the browser back button After Logout


Javascript

<SCRIPT type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</SCRIPT>

Html

<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
%d bloggers like this: