Detach EDI node when Source XML element is missing in BizTalk maps

In this post I will share a TIP to detach EDI N2 node segment when the source XML element is missing

Business Scenario:

A BizTalk environment containing some BizTalk maps that  transforms the source XML files into EDI documents. In the scenario we have to generate the EDI 940 document and avoid printing N2 if the source AdditionalName element is missing.

In order to achieve this scenario I have used Logical Existence Functoid that takes input from AdditionalName source element and map to the N2 segment.


This will detach the N2 element if AdditionalName is not present in the source document. Additional Name value is actually mapped to N201 segment but in order to avoid N2 populating on EDI document we are good with this.

Next. I have used Logical Existence and Value Mapping functoids for N201 mapping that displays the actual value of Additional Name and avoid throwing exception if the data is not present.


Hope this helps!

Debugging code using LINQ and Lambda Expressions in VS 2015

 In this post I will share how easy we can debug LINQ and Lambda expressions in Visual Studio 2015. Sometimes, it is difficult to see larger list in debugging mode. With this feature of VS 2015 we can filter list using LINQ or Lambda expression using Immediate or Watch windows.

Let’s take a quick example of a console application that calls up a method named GetPersons that returns the list of persons.

Below is the class that call GetPersons method which returns a list of 4 persons


Now let’s put a break point at the end of Main method


You can see that GetPersons() returned the list which you can even see it in the Immediate or Watch windows in earlier versions of Visual Studio as well. But if you want to filter records using some LINQ or Lambda expression, it is not possible in previous versions.


Below is the snap shot taken from VS 2013 that shows this error “Expression cannot contain lambda expressions”


If you run the same expression in Visual Studio 2015. You will see the result like this


You can also use Immediate Window to filter records as below


Hope this helps!

Diagnosing using IntelliTrace in Visual Studio 2015

One of the exciting and time saving features for diagnosing issues in Visual Studio 2015 is IntelliTrace. This allows to perform historical debugging by recording the events generated by your application. In this post we will see how easy we can enable IntelliTrace in Visual Studio 2015 and perform debugging using Diagnostic tools window.

In order to enable IntelliTrace in Visual Studio 2015, go to Tools -> Options and then select IntelliTrace


Check the Enable IntelliTrace option and select IntelliTrace events and call information. We should enable with the call information if we need to capture more detailed information like the name of the function, method and the parameters passed and the value returned back. This will however degrade the application performance.

Now click on the IntelliTrace Events to select the events you want to capture.


Now once you run the application in Debug mode it will start recording the events and you can see the Diagnostic tool window capturing the information as you use the application. This is very helpful when you don’t need to step into the code and putting break points on different statements rather, you can just enable the IntelliTrace and execute scenarios, and if some error happens, you will have the complete trace through which you can go to any event and through historical debugging exactly check what data has been passed and what happened in the background.

Let’s take a default login page example in which I will try to enter the username and password for two users and then we will step into the historical debugging based on the login events we had raised and see the values passed at each time.

First I entered the following username


Then I entered my another email address and got the same invalid login attempt


Now, In order to check what happened we don’t need to apply the break points and reproduce the login attempts. However, I will just go to the Diagnostic tool window and check what values were passed and what happened.

IntelliTrace will record continuously until we hit break All from Visual Studio. So first hit break all, then open the Diagnostic Tools Window from Show Diagnostic Tool Window option on Visual Studio or through default shortcut i.e. Ctrl+Alt+F2


Filter only ASP.NET events from the category


Select POST “/Account/Login” and click on Activate Historical Debugging

We can step over and go to the Login method and in order to check what data has been passed we can go to the Locals (Historical Debugging) tab




Hope this helps!

Creating ASP.NET 5 Web Application using Yeoman Generator

In this post we will explore Yeoman generator that helps to scaffold ASP.NET 5 web application using command line statements. What is Yeoman? Yeoman is a set of tools that facilitates building web applications. It comprises of three tools

  • yo (scaffolding template tool)
  • task runner/build tool (Grunt, Gulp)
  • package manager (Bower, npm)

In this post I will focus on yo tool that can be used to generate scaffolding template for aspnet web applications. This tool can be used in environments where you don’t have a Visual Studio 2015 installed or you wanted to scaffold web application using yo command. Yeoman generator for ASP.NET 5 emphasizes to continued effort to enable cross-platform development of ASP.NET It is available for Windows, Linux and OSX operating systems. First of all, configure the ASP.NET 5 environment on your machine.

  1. The easiest way to get started on windows is to install Visual Studio 2015. Visual studio 2015 installs the DNVM (Dot NET Version Manager) command line tool to manage DNX (Dot Net Execution environment) versions and much more.
  2. If you don’t want to install Visual Studio 2015 you can even run this Power shell command to install DNVM{$Branch=’dev’;iex ((new-object net.webclient).DownloadString(‘’))}
  3. This command will install the DNVM and the latest DNX version available at
  4. Now run following command to list the version of DNX installed on your system

C:\dnvm list


Once ASP.NET 5 environment is setup, develop a simple ASP.NET 5 web application using Yeoman generator.

  1. First of all install the yeoman generator using this command npm install –g yo generator-aspnet


2.  Now run yo aspnet to create ASP.NET 5 web application 3

3. You can select any template using top/down arrow keys

4. Let’s select 3rd template type i.e. Web Application and press Enter

5. It will ask you to specify the name 4

6.Specify any name and press enter 5

7. You can see the project is created, now go to the folder as I created on root C drive and my web application project   name was TestBlogPost so I found the folder created as TestBlogPost inside c drive root.

8. Now browse your folder and open project.json file, you will see bunch of packages specified there

9. Run kpm restore to restore the packages and then kpm build to build the web application 6

10. Run dnx . web finally to run the web server 7

11. Now browse to http://localhost:5000 address, you will see the ASP.NET 5 home page as below. (You can see the URL from project.json configured for web command)

0 Hope this helps!

Angular JS with ASP.NET MVC – Part 3

In this post we will develop a simple page that displays the list of customers, by clicking on any record from the list, it opens up the customer page where a user can update its record. This post is a third part of Angular JS with ASP.NET application. In the last posts we developed and configured AngularJS in ASP.NET MVC app and saw different options like routing and opening views inside main application container.

Customers List Page


Customer Maintain Page


In your Angular JS – ASP.MVC project create a new folder named app and in side app create another folder customers. The reason of creating a separate app folder and then customers is to structure our solution and put all the customer related angular js controller and data adapter inside it. Controller will be used to contain the scope variables that stores the form data and Data adapter will be used to call Web API methods using angular $http object.

Step 1 – Creating Controller Data Adapter

  1. Create a new CustomerDataFactory.js file inside app/Customer folder.
  2. Add getCustomers, getCustomer, saveCustomer and deleteCustomer methods. In the code below I am using $http function of angular to call the Web API methods. I have not shown the WEB API methods in this post but you can get an idea about it calling it from Angular part.


function ($http) {
var getCustomers = function () {
return $http.get("http://localhost/WebAPIService/api/Customer");

var getCustomer = function (enterpriseID, customerID) {
return $http.get("http://localhost/WebAPIService/api/Customer?customerId=" + customerID);

var saveCustomer = function (customer) {
return $"http://localhost/WebAPIService/api/saveCustomer", customer);

var deleteCustomer = function (customerID) {
return $"http://localhost/WebAPIService/api/deleteCustomer", customer);

return {
getCustomers: getCustomers,
GetCustomer: getCustomer,
saveCustomer: saveCustomer,
deleteCustomer: deleteCustomer

Step 2 – Creating Customer Controller of Angular

  1. Create a new CustomerController.js file inside app/Customer folder


["$scope", "$window", "$routeParams", "$location", "CustomerDataFactory",
function CustomerController($scope, $window, $routeParams, $location, CustomerDataFactory) {

.success(function (customers) {
$scope.customers = customers;
.error(function (error) {
$scope.status = 'Unable to load customers';

$scope.getCustomer = function (customer) {
$location.path("/customerMaintain/" + customer.CustomerID);

$scope.addCustomer = function () {
function (result) {
//on success
$scope.customer.CustomerID = result;
function (results) {
$scope.status = 'Unable to load customers';

$scope.addNewCustomer = function () {

$scope.cancelCustomer = function () {

In the above code, once the controller is loaded, it will call the getCustomers method that calls the Web API method which returns all customers. On Success, it will set the collections of customers in a list.

Next, there is another method getCustomer that takes customer as an object and change the location path to customerMain which will open another page to edit customer information.

addNewCustomer does same as getCustomer in fact the form will be empty so the user can add new customer.

Step 3 – Now add these js files CustomerController.js and CustomerDataFactory.js in BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/MyApp")


Step 4 – Add Views

  1. Create a new empty MVC Controller named as CustomerController.cs
  2. There will be two methods, Index (default) to load the Customer list page and the CustomerMaintain to load the detailed page for editing/updating customer record.

   public class CustomerController : Controller


// GET: Customer
public ActionResult Index()
return View();
public ActionResult CustomerMaintain()
return View();

*  When adding view for each action make sure they are partial views otherwise it won’t be open inside the main landing page

3      Complete markup for Index.cshtml that display the list of customers

Layout = null;

<div class="container-fluid">
<div class="nav">
<hr />
<button type="button" ng-click="addNewCustomer()" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
<table class="table table-striped table-hover table-responsive">
<th>Customer ID</th>
<th>Title </th>
<th>First Name</th>
<th>Last Name</th>
<th>Tel Number</th>
<th>Mobile Number</th>
<th>Address 1</th>
<th>Address 2</th>
<th>PO BOX</th>
<tbody ng-repeat="customer in customers">
<tr ng-click="getCustomer(customer)">
<td> {{customer.FirstName}}</td>
<td> {{customer.LastName}}</td>
<td> {{customer.TelNumber}}</td>
<td> {{customer.MobileNumber}}</td>
<td> {{customer.Email}}</td>
<td> {{customer.Address1}}</td>
<td> {{customer.Address2}}</td>
<td> {{customer.City}}</td>
<td> {{customer.POBox}}</td>

Complete markup for CustomerMaintain.cshtml to update specific customer record or create new customer

Layout = null;
<div class="container-fluid">
<div class="nav">
Manage Customer
<br />
<form role="form" class="form-horizontal">
<div class="col-sm-3">
<button type="button" ng-click="cancelCustomer()" class="btn btn-default" ng-disabled="disableSaving">
<i class="glyphicon glyphicon-arrow-left"></i>
<button type="button" ng-click="addCustomer()" class="btn btn-primary" ng-disabled="disableSaving">
<i class="glyphicon glyphicon-floppy-save"></i>
<legend>Customer Information</legend>
<div class="form-group">
<label class="col-sm-3 control-label" for="customerID">Customer Number</label>
<div class="col-sm-9">
<input ng-model="customer.CustomerID" readonly="readonly" type="text" id="customerID" name="customerID" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="title">Title</label>
<div class="col-sm-9">
<select class="form-control" ng-model="customer.Title" name="title" id="title" required>
<option value="Company">Company</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<div class="form-group">
<label class="col-sm-3 control-label" for="firstName">First Name</label>
<div class="col-sm-9">
<input ng-model="customer.FirstName" type="text" id="firstName" name="firstName" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="lastName">Last Name</label>
<div class="col-sm-9">
<input ng-model="customer.LastName" type="text" id="lastName" name="lastName" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="telNumber">Telephone Number</label>
<div class="col-sm-9">
<input ng-model="customer.TelNumber" type="text" id="telNumber" name="telNumber" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="mobileNumber">Mobile Number</label>
<div class="col-sm-9">
<input ng-model="customer.MobileNumber" type="text" id="mobileNumber" name="mobileNumber" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email</label>
<div class="col-sm-9">
<input ng-model="customer.Email" type="text" id="email" name="email" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="address1">Address 1</label>
<div class="col-sm-9">
<input ng-model="customer.Address1" type="text" id="address1" name="address1" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="address2">Address 2</label>
<div class="col-sm-9">
<input ng-model="customer.Address2" type="text" id="address2" name="address2" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="city">City</label>
<div class="col-sm-9">
<input ng-model="customer.City" type="text" id="city" name="city" class="form-control" />
<div class="form-group">
<label class="col-sm-3 control-label" for="pobox">PO Box</label>
<div class="col-sm-9">
<input ng-model="customer.POBox" type="text" id="pobox" name="pobox" class="form-control" />

Step 5 – Add routing for Customer Maintain and Customer in MyApp.js. Following is the complete markup for MyApp.js
var MyApp = angular.module('MyApp', ['ngRoute']);

function ($routeProvider) {
.when("/customer", {
templateUrl: "Customer/Index",
controller: "CustomerController"
.when("/customerMaintain/:CustomerID, {
templateUrl: "Customer/CustomerMaintain",
controller: "CustomerController"
.when("/customerMaintain/", {
templateUrl: "Customer/CustomerMaintain",
controller: "CustomerController"


That’s all, build and run the project. Hope this helps!




Angular JS with ASP.NET MVC – Part 2

In the first part we just configured angular JS application in ASP.NET MVC. You may have noticed that we accessed the scope variables of DemoController using $ sign. This time we will use the $route variable to route and open different views in a single page container where ng-view will be defined.

$ is a prefix that could be a property, method, variable that part of the core of AngularJS. When naming services controllers etc. it is recommended to not use $ prefix with your custom object names to avoid conflicting issues.

In this exercise we will add routing module in the MyApp.js, configure routing statements and open the ASP.NET MVC views inside a div on a single page container.

  1. First of all add the Angular Route package from NuGet Manager.
  2. Add a reference using NuGet Package Manager and search angular js route. You will see the AngularJS Route package in the Manage NuGet Packages windows. Just add it.1
  3. Now in the MyApp add ngRoute module
  4. Add the Angular-route.min.js in the BundleConfig.cs file under App_Start folder
  5. 4
  6. Edit the MyApp.js file and add ngRoute as belo
  7. This tells the angular app to use the routing module.
  8. Let’s add three actions in HomeController namely Test1, Test2 and Test3
  9. Add views to these actions, Note: all view should be partial
  10. In order to add view, just right click the Test1 function and select Add View
  11. It opens up the window where you can specify the name Test1 and check on “Create as partial view”2
  12. Once added, do these steps for ou can specify the name Test1 and check on foldera div on a single page container. d confilcting rest two methods as well namely Test2 and Test3.
  13. Now, inorder to open these view from angular we have to add a routing.
  14. In the MainApp.js we can add a routing as below3
  15. After adding this, we need to add a div on our landing page. In last post, Home/Index was our landing page (that acts as a single page container)
  16. Now add a div with ng-view attribute on it. Angular automatically opens up the page on all the containers like div, body etc where the ng-view is defined on the landing page container.5
  17. Now add, these links that opens up the page inside div6
  18. You can put any content in the partial view
  19. Let’s build and run. Click on link1 and it opens up the page inside div where ng-view is defined.7
  20. Click on second link
  21. 8
  22. At last, Click on third link 9

This covers up our second part where we used the routing feature of Angular JS. In the next post we will create factories to access database using Web API and Entity Framework as data access persistence.

AngularJS in ASP.NET MVC – Part 1

This is the first part from the series of posts I have planned for AngularJS in which I will provide an in-depth knowledge about AngularJS and how to use that in developing business applications with ASP.NET MVC, WEB API and Entity framework

In this post we will discuss about the core features of AngularJS and bootstrap with ASP .NET MVC using Visual Studio. I assume that the readers should have an in depth knowledge of ASP.NET MVC and Web APIs as I would mostly focus on the AngularJS features.

What is AngularJS

AngularJS is a web framework developed by Google tp provide responsive UI on web. It is supported for Single Page Applications where the landing page remains the same and single or multiple view can render inside it with usage of server side functions asynchronously and updating the model and control values dynamically.

You can check out the complete tutorial over here

Step by Step exercise of configuring Angular JS in ASP.NET MVC application

  1. Start Visual Studio
  2. Select ASP.NET Web Application and then MVC as project template
  3. Add references to AngularJS through NuGet
  4. Search AngularJS on the Package Manager console
  5. And then Select AngularJS Core and install


6. After adding AngularJS Core, add the bundle

bundles.Add(new ScriptBundle(“~/bundles/angular”)


7.  Now add these bundles in the HTML head section of _Layout.cshtml


8. Now In order to bootstrap angular JS in our MVC app we have to define the ngApp on the page body or html tag. ngApp reference to the application JS file where you can define routing, controllers etc. ngApp is a directive to auto-bootstrap an AngularJS application. Also, note that only one ngApp can be used per HTML document.

9. Let’s create two JavaScript files, one MyApp.js and the other DemoController.js

10.  Create an app folder under root in MVC project

11. Add a new JavaScript file named as MyApp.js

12. Inside MyApp.js write following snippet

var MyApp = angular.module(‘MyApp’,[]);

13. This line initialize the application level global object of angular app and a central point where you can add modules like routing, ui etc. Through this object you can add controllers, directives etc and access it globally.

14. Now specify “MyApp” to the ng-App attribute in html tag.

<html ng-app=”MyApp”>

15. Now, let’s add a DemoController.js file in your project under app folder.

16. Add following snippet in DemoController.js

MyApp.controller(‘DemoController’, [‘$scope’,

function DemoController($scope) {

$scope.Name = “ovais mehboob”;


17. Now add a div tag inside Home/Index.cshtml file and specify ng-controller as DemoController

<div ng-controller=”DemoController”>


<input type=”text” ng-model=”Name” />


18. In the above code, I have specified DemoController in div tag and access scope varialbes that were defined under DemoController. Using “double curly braces” {{ }} you can access the scope variables throughout controller.

19. In order to bind the values of scope variables with input fields like textbox etc you can use ng-model and ng-bind to bind with other controls like span etc.

20. Add MyApp.js and DemoController.js inside BundleConfig.cs

bundles.Add(new ScriptBundle(“~/bundles/angular”)





21. Let’s build and run the application


In the next post I will discuss about routing and rendering views inside a single page application.