Introduction to AngularJs and Bootstrap in ASP.NET Web form

Revolution just arrived. Client side development is getting easier and cheaper. AngularJs is one of the client side development JavaScript framework. It is developed by google. Website designing also get easier due to emerge of bootstrap. Now let’s introduce AngularJS and Bootstrap in a web form application. Here I used visual studio 2012 as an IDE.

Step 1: Create a ASP.NET Web Forms Application

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET Empty web application, set location and click OK

Step 2: Install required packages

Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package AngularJS.Core
PM> Install-Package AngularJS.Resource
PM> Install-Package bootstrap

Step 3: Design Master Page

Add required references for bootstrap and AngularJS , and design master page using bootstrap as follows.
You can use theme. For details visit the article “ Easy way to design web layout by bootstrap theme

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="AngularWeb.Site" %>





Here you must see that I used the reference of app.js, data.js. studentCtrl.js which are not defined yet. Soon, I will create those files.

Step 4: Create Application module, data and angular controller
Create app.js, data.js and studentCtrl.js in scripts -> app folder. Content are given below.


var app = angular.module('app', ['ngResource']);


app.value('studentInfo', [
  { id: 1, name: 'Mahedee Hasan', credit:20, semester: '8th' },
  { id: 2, name: 'Enamul Haque', credit: 15, semester: '7th' },
  { id: 2, name: 'Arefin Billah', credit: 15, semester: '6th' },
  { id: 3, name: 'Zahid Hasan', credit: 12, semester: '7th' }


app.controller('studentsCtrl', function ($scope, studentInfo) {
    $scope.studentInfo = studentInfo;

App.js for just declaring application module, data.js for hardcoded data by javascript and studentCtrl.js is the main angular controller.

Step 4: Create a Page for View

Create a page name Default.aspx, just right click on the application -> Add -> New item -> Web form using master page. Select Master page and type page name as Default.aspx. Now modify the page as follows.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularWeb.Default" %>

Id Name Credit Semester
{{}} {{}} {{}} {{student.semester}}

Look at the page, here I add ng-controller and ng-app and ng-repeat. If you have little idea about angularJs, you must understand the code. Now just run the application and you will get following output. Happy programming.


*If you don’t clear in any portion or any suggestion, please leave your comment here. To run the application download required packages.

Web gardening in IIS 7, configure step by step


“Web garden” scaling out by increasing the number of worker processes per CPU. Web gardening will allow more than two subscribers to synchronize at the same time. Before going to the details of web garden, I hope you have fundamental idea on application pool and worker process. Just for reminder – for request processing in IIS, worker process (w3wp.exe) runs the ASP.NET application in IIS. Worker process is responsible for handling all kinds of request, response, session data, and cache data. Application Pool is the container of worker process. Application pool is used to separate sets of IIS worker processes and enables a better security, reliability, and availability for any web application. It will also increase CPU utilization by replisapi.dll, which can negatively impact overall server performance. So, it is important to balance these considerations when you choose a value for Maximum Worker Processes.

apppools_thumbFig – Application pool is the container of one or more worker processes

Now, by default, each and every Application pool contains a single worker process. Application which contains the multiple worker process is called “Web Garden”. Below is the typical diagram for a web garden application.

Fig – Multiple worker process in an application pool (Web garden)

Why Web garden?

  • Offering applications that are not CPU-bound but execute long running requests the ability to scale and not use up all threads available in the worker process
  • Applications that make long running database requests (e.g. high computational database transaction)
  • Applications that have threads occupied by long-running synchronous and network intensive transactions
  • You can support a greater number of concurrent synchronization operations per CPU by increasing the Maximum Worker Process property value
  • Provides better application availability by sharing request between multiple worker processes.
  • Web garden use processor affinity where application can swapped out based on preference and tag setting.
  • Less consumption of physical space for web garden configuration.

Configure Web garden in IIS 7

Step 1: Deploy and configure your web application as usual

Step 2: Modify web.config file

Find out the following line in web.config file.

If the above line exists, remove the above line and replace following line.

Here tcpip = “” is local state server IP and “42424” is the port number for state server. You can use other IP as state server.

Step 3: Modify registry by regedit

Run àregedtà HKEY_LOCAL_MACHINEàSYSTEMàCurrentControlSetàServicesàaspnet_stateàParameters

Step a: AllowRemoteConnection (Right Click)à Modify -> Set Value Data to 1 (Base Decimal) àOk

Step b: Port (Right Click)à Modify à Base Decimal àOk

Step 4: Run state service

Check the following step:

Runà controlà Administrative Toolsà Servicesà ASP.NET State Service (Right Click)à Properties

Step a: Startup Typeà Automatic

Step b: Service Statusà start

Finally Click Ok.

Step 5: Create an application pool

Create a different application pool for safety. If you use a separate application pool, it will be easy to manage. You can use default application pool also.

To create an application pool that runs using a custom service account

  1. Start Internet Information Services (IIS) Manager. (Run->inetmgr)
  2. In the left pane, expand the local computer and then select Application Pools.
  3. Right-click the Application Pools node, clicks Add Application Pool, and then clicks Application Pool.
  4. In the Add Application Pool dialog box, type “Pool Name” in the name text box. In figure Pool name is Bluechipplus. Select .NET Framework version. In figure, I select 4.0.30319. Select Managed pipeline mode. I select integrated mode. Selection of framework version and managed pipeline mode depends on your application which you are going to hosted. Click OK to complete application pool creation.


5. Now select application pools. You will see newly created Bluechipplus application pool in the middle panel.

Step 6: Configure application pool

1.   Select newly created “Bluechipplus” application pool in the middle panel.

  1. Click Advanced Settings in “Edit Application Pool” section in the right panel. A dialogue box will appear named “Advanced Settings”
  2. In Process Model section, select identity. Network service is default and recommended. If you find problem, you should change. In figure Local service is selected.
  3. In Process Model section, type maximum worker process. In figure 12 maximum worker processes selected. Selecting worker process is actually depends on your server capability and memory.
  4. In Recycling section, select private memory limit in KB. In figure 200000is selected. Consider your server memory before considering memory limit.
  5. Finally click OK to complete application pool settings.


Step 7: Select application pool for the application

  1. Right click on application in IIS->Manage Application -> Advanced Settings


2. From advanced settings dialogue box -> Browse application pool -> Select application pool


3. Finally click OK after assigning application pool

Now you have completed web garden for your application. Browse your application and cheers!!!

Jump Start to be Software Developer (Session-4)

Speech on  “Jump Start to be Software Developer (Session 4)” .

Topic: Develop a POS system from scratch by ASP.NET and SQL Server
Technical Speaker: Md. Mahedee Hasan
Venue: Microsoft Bangladesh
Organized by: Microsoft Bangladesh & Tech Forum
Date: 1 June, 2014

Introduction to Web services with ASP.NET

What is Web Services?

Web service is a method of communication between two web based application using XML, SOAP, WSDL and UDDI open standards over an internet protocol backbone. Web service can convert your application into web application which can publish its function or message to the rest of the world). Web service are-

  • Web services are application components
  • Web services communicate with open protocols
  • Web services are self-contained and self-describing
  • Web services can be discovered using UDDI (*4)
  • Web services can be used by other applications
  • XML is the basis of web services

Why Web Services?

Different web applications in the web want to interact with each other. Such as application can share data, can invoke method of other application. So, how can you solve this? It will also be a great problem if applications are in different platform and language. Web service solves the above issues.

By using Web services, your application can publish its function or message to the rest of the world. Web services use XML to code and to decode data, and SOAP to transport it (using open protocols). With Web services, your accounting department’s Win 2k server’s billing system can connect with your IT supplier’s UNIX server

Web services have two types of uses:

Reusable Application Component – currency conversion, weather reports, language translation.Connect Existing Software – Web services can help to solve the interoperability problem by giving different applications a way to link their data.

How does it work?

The basic web service platform is XML + HTTP. Web service elements are –

  • SOAP – Simple Object Access Protocol
  • UDDI – Universal Description, Discovery and Integration
  • WSDL – Web Service Description Language

With, you do not have to write SOAP and WSDL documents. automatically creates SOAP and WSDL documents.


Simple Addition Method: Here I have tried to represent web service before you by a simple add method which takes two parameter as two integer value and it returns the addition of these two.

Step 1: Create Web service

1.Create an website.



  1. Click right button on web site.
  2. Click on add new Item.
  3. Select Web service like the below screen.


  1. Right click on WebService.asmx and select view code. You will see the following code snippet. It should be mentioned here that I have created my web service named WebService which you have already seen in previous screen.
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;


/// Summary description for WebService


[WebService(Namespace = "")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService {

public WebService () {

//Uncomment the following line if using designed components




public string HelloWorld()


return "Hello World";


  1. Simply add a Method name Add as like below.
/// Copyright : Copyright© All rightsreserved.

/// NameSpace :

/// Class : WebService

/// Inherits : System.Web.Services.WebService

/// Author : Md. Mahedee Hasan

/// Purpose : This is a simple web service to add two number

/// Creation Date : 21/01/2012

/// =========================================================================================

/// || Modification History ||

/// ------------------------------------------------------------------------------------

/// Sl No. Date: Author: Ver: Area of Change:

/// 1. 21/01/2012 Mahedee 1.0 Created

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;


/// Summary description for WebService


[WebService(Namespace = "")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService {

public WebService () {

//Uncomment the following line if using designed components




public string HelloWorld()


return "Hello World";



public int Add(int firstVal, int secondVal)


return firstVal + secondVal;


  1. .Click right button on WebService.asmx and select Set As Start Page
  2. Run Project or press F5. You will see the following screen.


9. Click Add method, you will see the following screen.

10. Suppose I input two value 12 and 30. Click Invoke.

.11. After clicking Invoke you will get the addition of two values as XML format.

Now your web service is ready to use. We have to use web service in various ways. In the next step I will show how to access web service from client page.

Step 2: Create a client page and access web service.

There are many ways to consume web service. Here is an example of HTML-POST protocol which is one of the ways of consuming web service.

1. Create a aspx/html page. I have used here an aspx page name “ClientForm.aspx”.
2. Add the following tags in aspx source.
3. In action attribute of form tag, I have used localhost because I have already hosted it. You can simply use “http://localhost:5143/Web/WebService.asmx/Add” in  action attribute instead of present value in action attribute if you didn’t host website in your local machine. Here 5143 can vary.

input> input> input> div> form>

4. Click right button on ClientForm.aspx and select Set As Start Up page.
5. Run your project.
6. You will see the following screen.

7. Enter two values of two textbox.
8. Press Enter you will get the result in xml format.


This is the basic example and web service. You will see more about web service next.


  1. XML provides a language which can be used between different platforms and programming languages and still express complex messages and functions.
  2. SOAP: The HTTP protocol is the most used Internet protocol.

SOAP is an XML-based protocol to let applications exchange information over HTTP.

Or more simple: SOAP is a protocol for accessing a Web Service.

  • SOAP stands for Simple Object Access Protocol
  • SOAP is a communication protocol
  • SOAP is a format for sending messages
  • SOAP is designed to communicate via Internet
  • SOAP is platform independent
  • SOAP is language independent
  • SOAP is based on XML
  • SOAP is simple and extensible
  • SOAP allows you to get around firewalls
  • SOAP is a W3C standard
  1. WSDL:

WSDL is an XML-based language for locating and describing Web services.

  • WSDL stands for Web Services Description Language
  • WSDL is based on XML
  • WSDL is used to describe Web services
  • WSDL is used to locate Web services
  • WSDL is a W3C standard
  1. UDDI:

UDDI is a directory service where companies can register and search for Web services.

  • UDDI stands for Universal Description, Discovery and Integration
  • UDDI is a directory for storing information about web services
  • UDDI is a directory of web service interfaces described by WSDL
  • UDDI communicates via SOAP
  • UDDI is built into the Microsoft .NET platform