Rajneesh Verma's Blog

Installing & Customizing Windows Terminal

Thu, 02 Jul 2020 16:13:00 GMT

Step 1: Download Windows Terminal from below link

https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:regionofsystemrequirementstab

Note: Make sure you are reading system requirements and its meets the criteria.

Step 2: Open Window Terminal and it will be opened with default UI. As shown below

Step 3: Now let’s have some customization, for that I have downloaded, few gif images which I will apply as background of each terminal.

Step 4: Place the images to “%LOCALAPPDATA%\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\RoamingState” then one you want to use, I am using below 4 gif images as below

Step 5: Added below section in each list item

"backgroundImage": "ms-appdata:///roaming/<Your GIF>",

"backgroundImageOpacity": 0.1,

"useAcrylic": true,

"fontFace": "Cascadia Code",

"acrylicOpacity": 0.9

Step 6: To apply above settings click on down arrow -> Settings (Ctrl +,) it will open settings.json in an editor (for me its VS 2019) and do add code under each list item you want to customize. The result will be as below 😊

Step 7: If you want to change color scheme, you can add new scheme in settings.json or change the any of the available scheme (to find available scheme, use Ctrl + ALT and click on Settings button.)

Setting up Pi-hole in docker container using Docker for desktop

Fri, 26 Jun 2020 20:05:00 GMT

Recently in one of our session with Microsoft I came to know (even he shared statistics of blocked queries in his home setup) about Pi-hole and how it’s doing Ad blocking across all devices connected with a network. I was excited to try it out but main concern was to have a Raspberry Pi device. So I decided to try using Daemon (Docker for Desktop in Windows 10).

Setup went smoothly as it was expected (as I am using docker). Below are the step by step details:

1. First of all I spin up Daemon with Linux container (mostly I am keeping it off and not loading on windows startup).

2. Downloaded pi-hole docker image from docker hub using below command (use command window as Administrator)

docker pull pihole/pihole

3. Created below listed folders under Documents

pi-hole-config

pihole

dnsmasq.d

4. After replacing some values in Docker Run command:

docker run -d --name pihole -p 53:53/tcp -p 53:53/udp -p 8080:80 -p 8081:443 -v "/c/Users/rajneeshk/Documents/pi-hole-config/pihole/:/etc/pihole/" -v "/c/Users/rajneeshk/Documents/pi-hole-config/dnsmasq.d/:/etc/dnsmasq.d/" -e ServerIP="192.168.1.15" -e WEBPASSWORD=admin --restart=unless-stopped pihole/pihole:latest

5. Values to be replaces as per environment

a) Port (http/https): I have used 8080 & 8081 (just to avoid any collision)

b) Folder location(s), created in step 3.

c) ServerIP: IP of the computer you are trying (for me it was 192.168.1.15)

d) WEBPASSWORD: password to access web portal (I used default as this was experimental purpose only).

6. Output of the command is as below:

7. Did browse the url : http://192.168.1.15:8080/admin & it’s working 😊

Now we need to setup Router DNS to flow traffic through pi-hole, here again I don’t want to touch the router (Frankly I don’t have access ☹). So decided to change DNS value to consumers (my laptop & tv)

1. Updated DNS in Laptop:

a) Go to the Control Panel

b) Click Network and Internet > Network and Sharing Center > Change adapter settings

c) Select the connection for which you want to configure

d) Right-click Local Area Connection > Properties

e) Select the Networking tab

f) Select Internet Protocol Version 4 (TCP/IPv4) or Internet Protocol Version 6 (TCP/IPv6)

g) Click Properties

h) Click Advanced

i) Select the DNS tab

j) Click OK

k) Select Use the following DNS server addresses

l) Replce those addresses with the IP addresses of your Pi (in my case its 192.168.1.15)

2. Same way I have updated to my LG TV

a) Refer link for instruction

Now all setup is done and the time to see in action, refreshed the portal and saw 2 devices are connected and it was surprising that almost 15% of queries are getting blocked, Have a look.

Analyze & Fix your Angular 6 code using TSLint

Mon, 24 Sep 2018 21:57:00 GMT

CodeProjectAs per TSLint Official site https://palantir.github.io/tslint/

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

Develop quality code is highly desired hence it's highly recommended that, before code check-in to Source Control, do TSLint check and fix the possible errors.

Angular Applications are already integrated with TSLint, tslint.json file can be found in the root of your project

TSLint is also defined as dev dependency in package.json

TSLint using CLI:

Angular CLI has extended support for linting, to scan the code for issues, run below command.

Ng lint

You can see a list of errors in the console windows, however, it's difficult to read and fix.

CLI also has support to auto fix the issues (most common), to scan and fix use below command.

Ng lint material-app --fix (here material-app is the name of the application)

Note: there may be few issues left which need to fix manually.

TSLint using Visual Code:

Open VS Code, click on Extensions (Ctrl + Shift + X).

Search TSLint in the search box.

Click on Install, Once Installed restart VS Code to complete the installation.

In the currently opened file issues will be highlighted, bring cursor on the issue and press control + dot will prompt for the options as below image.

Fix the current issue or click on "Fix all auto fixable options" will fix all issues.

In case you want to fix using Command palette then by pressing Ctrl + Shift + P will open the command palette, select or type "TSLint: Fix all auto-fixable problems" command to fix all issues.

Reset username and password of IIS Server Application Pool

Wed, 13 Jun 2018 08:37:00 GMT

CodeProjectThere are chances where we need to get Application Pools user name and password for further modifications such as refreshing account or changing password for the users.

Below PowerShell Script will loop through all the App Pools (excluding defaults) and will reset the same user and password again. Scripts can be easily customized to use to update password when a change occur.

# Check if appcmd.exe exists in default path
if (Test-Path  ("c:\windows\system32\inetsrv\appcmd.exe")) {    

	# Set AppCmd.exe path in variable for further usage.
    $AppCmdPath = 'c:\windows\system32\inetsrv\appcmd.exe'
	
    # Get list of application pools
    & $AppCmdPath list apppools /text:name | 
        ForEach-Object { 
                    
        #Get application pool name
        $PoolName = $_
        
        #Exclude inbuild Application Pools
        if(
        $PoolName -eq "DefaultAppPool" -Or 
        $PoolName -eq "Classic .NET AppPool" -Or 
        $PoolName -eq ".NET v2.0 Classic"-Or
        $PoolName -eq ".NET v2.0"-Or 
        $PoolName -eq ".NET v4.5 Classic" -Or
        $PoolName -eq ".NET v4.5"
        ){
            Write-Host  "Inbuild Pool" + $PoolName
        }
        else{
            #Get username                   
            $PoolUserCmd = $AppCmdPath + ' list apppool "' + $PoolName + '" /text:processmodel.username'
            $PoolUser = invoke-expression $PoolUserCmd 
                                          
            #Get password
            $PoolPasswordCmd = $AppCmdPath + ' list apppool "' + $PoolName + '" /text:processmodel.password'
            $PoolPassword = invoke-expression $PoolPasswordCmd 

            #Check if credentials exists
            if ($PoolPassword -ne "") {
                           
                #Re-set the app pool with the same credentials             
                & $AppCmdPath set config -section:system.applicationHost/applicationPools "/[name='$($PoolName )'].processModel.identityType:SpecificUser" "/[name='$($PoolName)'].processModel.userName:$($PoolUser)" "/[name='$($PoolName)'].processModel.password:$($PoolPassword)" 
            }
        }        
    }
    # Do IISRESET after re-setting passwords
    & {iisreset}   
}
else {
    Write-Host -Object 'Could not find the appcmd.exe path at default location, please try at different place.'
}

Please note that PowerShell script should be executed in Administrative Privilege.

Script is available here

Step by step guide to Setup .NET Core 1.0 development playground in Windows OS Family

Tue, 23 Aug 2016 12:19:00 GMT

CodeProject

Setting up .NET Core 1.0 development playground in Windows OS Family

1. Prerequisites

a) Windows OS, I preferred to create a Windows 10 VM in AZURE. If you want to get AZURE subscription then signup for Visual Studio Dev Essentials, Once signup you will get too many goodies free of cost including Pluralsight subscription.
b) To know more about this, check below link

https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx

c) I have created a Windows 10 Enterprise N (x64) VM machine and connected using Remote Desktop from my personal laptop.
d) Next is to get NodeJS from below url

https://nodejs.org/en/

e) I have installed stable version of nodejs "v4.4.7 LTS" if you like to have latest then installed available latest version, now its "v6.3.0"

2. Download and install VS Code latest version from below url

https://code.visualstudio.com/

3. Install .NET CORE from below url, as we have planned to use only VS Code then I need to download and install only ".NET Core SDK for Windows".

https://www.microsoft.com/net/core#windows

4. Now we need to have boiler plate applications to start with, for this we have 2 options

a) Using Yeoman command line tool to create .NET core web application

b) Using Yeoman extension in VS Code.

5. Let's start with command line first

a) Open windows command prompt as administrator and try to install prerequisites.

b) First of all check that Node is installed properly, just run below command, command will show many options as below:

npm version

c) I am suggesting to run below command to ensure that I have latest NPM in my machine.

npm update

d) Next step is to install yeoman, grunt, gulp & bower using npm command as below

npm install -g yo bower grunt-cli gulp

here -g denotes global, installing tools globally so that can be used for all applications

Note: If you face error related to access then run command as Administrator.

e) Now we need to install aspnet generator using npm

npm install -g generator-aspnet

f) Now all prerequiste sinstalled, let's create a new directory and move to it using below commands

mkdir MyFirstApp
cd MyFirstApp

g) Run below command, it will show you 7 different options to create 7 different types of applications as below:

h) For Me, I have selected "Web Application" using down arrow and pressed enter, it ask me to select UI framework either "Bootstrap" or "Semantic UI", for now I have selected "Bootstrap and pressed enter.

i) Now prompted for a name of my app, I have given as "TestApp" and clicked enter, once application created in the console it will show all necessary commands to be executed for running currently application.

j) Just follow as command available

cd TestApp - (to navigate to TestApp Application)

dotnet restore - (command to restore packages for the application)

dotnet build - (command to build the application, not mandatory to the application, once run it will be build first)

dotnet run - command to run the asp.net core 1.0 application using command

k) In the above screen you can see that application is running and it listening localhost with 5000 port, open browser and type

http://localhost:5000

l) Our now website is running as below, once need to stop, in command prompt pressing "Ctrl +C" will allow to shut down the application.

6. Let's try our second option "using Yeoman extension in VS Code"

a) Open Visual Studio Code, go to File - > Open Folder and select folder "C:\VSCode"
b) Now we have to install Yeoman extension for VS Code, Press Ctrl + Shift + X will provide option to search extension from market place, put yo in search box and install yo extension once appears.

c) Once installed, it will ask to Enable extension, click on it will restart VS Code.
d) Again press Ctrl + Shift + X and select C# extension and install it, Once installed Enabled and restart VSCode.
e) Now press F1 will open actions textbox, type yo and press enter.
f) Next will show as below

aspnet Yeoman generator for ASP.NET  Core App

g) Now, it will show different options to select an template, select *App will again popup with other options as below.

h) I have selected "Web Application", it ask to select UI Framework, Selected Bootstrap and given application name as "TestAppUsingVSCode" in the next stage.
i) Once project created successfully, we can see Done option in Output window.

j) Now click on File -> Open Folder.. and select newly created application "TestAppUsingVSCode" and click on Select Folder button.
k) Now newly created application is loaded in VS Code and Once loaded there will be 2 notifications on the screen, one to restore the dependencies and other to add required assets to build and debug.

l) Click restore and yes for both the options.
m) Once restore complete the completes status will be shown in the output window.

n) Now press F5 to run the application in debug mode. Application may ask to choose a browser to run the application, please select one you want to run the application. For me I have chosen Edge browser.

Developing Universal Windows Apps using Widows 10 & Visual Studio 2015

Mon, 31 Aug 2015 03:00:00 GMT

CodeProject

To start Universal App development in windows 10 you need to have windows 10 OS, and visual studio 2015. Windows 10 is free for upgrade from any of win 7, 8 or 8.1 licensed operating systems.

To upgrade follow below link.
https://www.microsoft.com/en-in/windows/windows-10-upgrade

Visual Studio is latest IDE for developing UWP Apps with lots of improvement over Visual Studio 2013. Visual Studio 2015 Community edition is freely available for individual developers, open source projects, academic research, education, and small professional teams.

Download it from
https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

Once you are installing Visual Studio 2015 make sure you have selected custom installation type and choose "Universal Windows App Development Tools" from custom installer windows. As shown in below image.

A Universal Windows Platform (UWP) app can run on any Windows-based device, ranging from an IoT, HoloLens, SurfaceHub, XBox to your phone, tablet or PC.

UWP is designed to create a user interface that suits with different display sizes. You can use the same code and design for all devices, and you can also tailor the user interface for specific screen sizes. For example, you can design an interface that works great for tablets and PCs and create a customized experience for mobile devices, while still reusing most of your code.

UWP will works on the principle of Adaptive UI, Natural user inputs, One SDK, One Store and Cloud optimized services.

UWP will give best developer experience with Windows 10, but it can be developed on Windows 8, 8.1 and even with windows 7 with limited features. Supported features for individual OS's are as below

1. Adaptive UI: Each device has their own set of user inputs and screen resolution, DPI density and other device specific characteristics. To develop a UWP it’s mandatory that application will have similar UI experience in all the devices, for the same purpose Windows 10 provides new universal controls, layout panels, and tooling to help you adapt your UI to the devices your app may run on. For example, you can tailor the UI to take advantage of the difference in screen resolution when your app is running on a desktop computer versus on a mobile device.

a) Responsive Design: in UWP most of the controls have basic responsiveness and able to change the behavior based on device resolution, for e.g. a Pivot control will have selected item in left most area in mobile device but it will be in their position in desktop.

b) Adaptive Design: A small layout adjustment has large impact in the visualization, Features like visual states and adaptive triggers are playing major role to create Adaptive design applications.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="_720pxState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="100"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="image.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="image.(FrameworkElement.Width)" Value="NaN"/>
                        <Setter Target="image.(FrameworkElement.HorizontalAlignment)" Value="Stretch"/>
                        <Setter Target="image.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>10,10,10,0</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="image.(Image.Stretch)" Value="UniformToFill"/>
                        <Setter Target="textBlock.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="textBlock.(TextBlock.FontSize)" Value="18.667"/>
                        <Setter Target="textBlock.(TextBlock.FontFamily)">
                            <Setter.Value>
                                <FontFamily>Arial Black</FontFamily>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock.(TextBlock.FontWeight)">
                            <Setter.Value>
                                <FontWeight>Bold</FontWeight>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>10,0,10,222</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock1.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="textBlock1.(FrameworkElement.Height)" Value="247"/>
                        <Setter Target="textBlock1.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>10,0,10,10</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="image.(FrameworkElement.Height)" Value="217"/>
                        <Setter Target="textBlock.(FrameworkElement.VerticalAlignment)" Value="Bottom"/>
                        <Setter Target="textBlock.(FrameworkElement.Height)" Value="60"/>
                        <Setter Target="textBlock1.(TextBlock.FontSize)" Value="13.333"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="_1024pxState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="701"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="image.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="image.(FrameworkElement.Width)" Value="400"/>
                        <Setter Target="image.(FrameworkElement.HorizontalAlignment)" Value="Left"/>
                        <Setter Target="image.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>10,10,10,0</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="image.(Image.Stretch)" Value="UniformToFill"/>
                        <Setter Target="textBlock.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="textBlock.(TextBlock.FontSize)" Value="32"/>
                        <Setter Target="textBlock.(TextBlock.FontFamily)">
                            <Setter.Value>
                                <FontFamily>Arial Black</FontFamily>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock.(TextBlock.FontWeight)">
                            <Setter.Value>
                                <FontWeight>Bold</FontWeight>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>438,75,10,0</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="textBlock1.(UIElement.Opacity)" Value="1"/>
                        <Setter Target="textBlock1.(FrameworkElement.Height)" Value="NaN"/>
                        <Setter Target="textBlock1.(FrameworkElement.Margin)">
                            <Setter.Value>
                                <Thickness>436,181,0,57</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Target="image.(FrameworkElement.Height)" Value="400"/>
                        <Setter Target="textBlock.(FrameworkElement.VerticalAlignment)" Value="Top"/>
                        <Setter Target="textBlock.(FrameworkElement.Height)" Value="60"/>
                        <Setter Target="textBlock1.(TextBlock.FontSize)" Value="16"/>
                        <Setter Target="textBlock1.(Grid.Row)" Value="0"/>
                        <Setter Target="textBlock1.(Grid.RowSpan)" Value="1"/>
                        <Setter Target="textBlock1.(Grid.ColumnSpan)" Value="1"/>
                        <Setter Target="textBlock1.(Grid.Column)" Value="0"/>
                        <Setter Target="image.(Grid.RowSpan)" Value="1"/>
                        <Setter Target="image.(Grid.Row)" Value="0"/>
                        <Setter Target="image.(Grid.Column)" Value="0"/>
                        <Setter Target="textBlock1.(FrameworkElement.HorizontalAlignment)" Value="Left"/>
                        <Setter Target="textBlock1.(FrameworkElement.VerticalAlignment)" Value="Stretch"/>
                        <Setter Target="textBlock1.(FrameworkElement.Width)" Value="834"/>
                        <Setter Target="textBlock.(FrameworkElement.HorizontalAlignment)" Value="Stretch"/>
                        <Setter Target="textBlock.(FrameworkElement.Width)" Value="NaN"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock x:Name="textBlock" Height="60" Margin="10,0,10,10" Opacity="0" TextWrapping="Wrap" Text="Holographic computing is here." VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition"/>
        <Image x:Name="image" HorizontalAlignment="Center" Height="330" Margin="10,209,0,0" Opacity="0" VerticalAlignment="Top" Width="100" d:LayoutOverrides="VerticalAlignment, TopMargin, BottomMargin, LeftPosition, RightPosition" Source="Images/HoloLens.jpg"/>
        <TextBlock x:Name="textBlock1" Height="187" Margin="10,0,10,10" Opacity="0" TextWrapping="Wrap" VerticalAlignment="Bottom" d:LayoutOverrides="LeftMargin, RightMargin, TopPosition, BottomPosition">
            <Run Text="Microsoft HoloLens is the first fully untethered, see-through holographic computer. It enables highMicrosoft HoloLens is the first fully untethered, see-through holographic computer. It enables high-definition holograms to come to life in your world, seamlessly integrating with your physical places, spaces, and things. We call this experience mixed reality. Holograms mixed with your real world will unlock all-new ways to create, communicate, work, and play.-definition holograms to come to life in your world, seamlessly integrating with your physical places, spaces, and things. We call this experience mixed reality. Holograms mixed with your real world will unlock all-new ways to create, communicate, work, and play.Windows Holographic is a mixed reality[1] computing platform[2] by Microsoft, enabling applications in which the live presentation of physical real-world elements is incorporated with that of virtual elements (referred to as "holograms" by Microsoft[3][4][5][note 1]) such that they are perceived to exist together in a shared environment. A variant of Windows for augmented reality computers[1] (which augment a real-world physical environment with virtual elements[3]) Windows Holographic features an augmented-reality operating environment in which any Universal Windows App can run. In addition, with Holographic APIs, which are part of the Universal Windows Platform, and supported as standard in Windows 10 (including versions for mobile devices and Xbox One), mixed reality features can be readily implemented in any Universal Windows App, for a wide range of Windows 10-based devices.[6][note 2]"/>
            <LineBreak/>
            <Run/>
            <LineBreak/>
            <Run Text="Microsoft announced Windows Holographic at its "Windows 10: The Next Chapter" press event on January 21, 2015.[7] It is set to be introduced as part of the general rollout of Windows 10, and showcased in the smart glasses headset Microsoft HoloLens. The Windows 10 launch begins in summer 2015 with release of the PC version, with HoloLens to be released sometime after."/>
        </TextBlock>
    </Grid>

Output will be as below (Desktop & a mobile device)

c) Tailored design: In the places where Adaptive Ui and responsive controls are not able to full fill the requirement then a tailored (specific UI page for specific device family) page is the best choice. For tailored sample I have created an other MainPage.xaml inside DeviceFamily-Desktop, Make sure xaml file name as well as folder name should be same else runtime will not able to identify the page to be loaded.

output will be as below (Desktop & mobile device)

3. Adaptive Code: A windows UAP's are expected to run across all supported devices. However, in order to take advantage of specific device features they may want to target specific device families. If a developer wants to access features that are only available on one or more device families. The first step is to add a reference to the extension software development kit for the device families. Below image illustrates adding the Windows Mobile Extension SDK to support Hardware back button.

And in the second step developer has to add the code to check that a HardButtons (Mobile’s back button) class exists, before wiring up a handler to the back button pressed event which is specific to mobile application. As shown in below code.

public sealed partial class Page2 : Page
    {
        public Page2()
        {
            this.InitializeComponent();
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
            {
                Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
            }
        }
 
        private void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
        {
            throw new NotImplementedException();
        }
    }

Happy coding !!!

Rich HTML 5 Hybrid Mobile Apps development using Ionic SDK

Sun, 30 Aug 2015 02:16:00 GMT

CodeProject

Ionic is a framework which allows us to create rich HTML 5 hybrid mobile applications. Ionic SDK allows you to create iOS and Android framework applications with predefined templates.

Ionic allows us to create, build and run hybrid applications using command line.

There are few prerequisites to create ionic applications these are: Node.js, Cordova CLI and chrome based ripple emulator (if you want to run the application without a physical device).

1. Node.js: Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, Scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Download and install Node.js from official site. https://nodejs.org/

2. Cordova: Cordova CLI can be installed using npm command line as below

> npm install -g cordova

3. Ripple Emulator (Optional): Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing. Ripple offers the ability to look under the hood of your mobile application, giving you full visibility into what it is doing. It also allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to redeploy the mobile application or restart the emulator.

Add Ripple Emulator from https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

Now we have installed all prerequisites and ready to install Ionic framework. To install Ionic, open console as administrator and run below command:

> npm install -g ionic

Note: -g used to install ionic globally.

Once Ionic framework installed you are ready to create projects for windows, Android as well as for iOS, there are 7 predefined templates these are:

a) tabs (Default)
b) sidemenu
c) maps
d) salesforce
e) tests
f) complex-list
g) blank

> ionic start MyApp sidemenu

Here MyApp is the name of your application you want to create with sidemenu template.

Console will ask to create ionic account for push notification as below

Create an ionic.io account to send Push Notifications and use the Ionic View app?

(Y/n): Y

Say Y if you want, Y will open a browser to create an account in ionic.io

https://apps.ionic.io/signup

By giving N will complete the project creation without signup process

Navigate to your application directory to add platform targets for e.g. iOS and android, you can give only one platform if you need also can be given both together

> cd MyApp
>ionic platform ios android

To run the application in ripple emulator use below command

> ionic serve

It may ask you to select address as

Multiple addresses available.

Please select which address to use by entering its number from the list below:

a) 100.92.50.18 (Ethernet)
b) localhost

Address Selection: localhost

Note: If you will not see the mobile emulator then click on ripple icon in the browser tab will open ripple mission control, click on enable and in the main screen select Mobile Web, devices option will let you to choose device as your choice.

Output will be as below:

To build the application targeted to an platform use below command

>ionic build android

To run the application on an emulator or physical device use below command

>ionic emulate android

Some useful commands:

1) start .......... Starts a new Ionic project in the specified PATH
2) serve .......... Start a local development server for app dev/testing
3) platform ....... Add platform target for building an Ionic app
4) run ............ Run an Ionic project on a connected device
5) emulate ........ Emulate an Ionic project on a simulator or emulator
6) build .......... Locally build an Ionic project for a given platform
7) plugin ......... Add a Cordova plugin
8) upload ......... Upload an app to your Ionic account
9) share .......... Share an app with a client, co-worker, friend, or customer
10) lib ............ Gets Ionic library version or updates the Ionic library
11) setup .......... Configure the project with a build tool (beta)
12) io ............. Integrate your app with the ionic.io platform services (alpha)
13) push ........... Upload APNS and GCM credentials to Ionic Push (alpha)
14) config ......... Set configuration variables for your ionic app (alpha)
15) browser ........ Add another browser for a platform (beta)
16) service ........ Add an Ionic service package and install any required plugins
17) add ............ Add an Ion, bower component, or addon to the project
18) remove ......... Remove an Ion, bower component, or addon from the project
19) list ........... List Ions, bower components, or addons in the project
20) ions ........... List available ions to add to your project
21) templates ...... List available Ionic starter templates
22) info ........... List information about the users runtime environment
23) help ........... Provides help for a certain command
24) link ........... Sets your Ionic App ID for your project
25) hooks .......... Manage your Ionic Cordova hooks
26) state .......... Saves or restores state of your Ionic Application using the package.json file
27) docs ........... Opens up the documentation for Ionic
28) resources ...... Automatically create icon and splash screen resources (beta) Put your images in the ./resources directory, named splash or icon. Accepted file types are .png, .ai, and .psd. Icons should be 192x192 px without rounded corners. Splashscreens should be 2208x2208 px, with the image centered in the middle.

CRUD Operation in ASP.NET MVC 4 and AngularJS

Sun, 05 Jul 2015 03:39:00 GMT

Today we will create an ASP.NET MVC 4 Application using AngularJS and perform CRUD (Create, Read, Update and Delete) operations using SPA (Single Page Application).

Let’s create a new MVC Application by Opening Visual Studio 2013.

1. File –> New –> Project –> Select ASP.NET Web Application & give the name as “CRUD_AngularJS_ASPNET_MVC”.

2. Click on OK will open a new window, select MVC template & click on Change Authentication will open a popup on this select “No Authentication” and click on OK, OK will close the windows and create a new MVC 4.0 template project.

3. Create a new Model class with name as Book.cs and add below listed properties.

public class Book
    {
        [Key]
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string Publisher { get; set; }
        public string Isbn { get; set; }
    }

4. Add new BookDBContext.cs class in the model folder and add below code.

public class BookDBContext : DbContext
    {
        public DbSet<Book> book { get; set; }
    }

5. As we need to add System.Data.Entity namespace for which we have to install EntityFramework, to install this Goto Tools -> NuGet Package Manager -> Package Manager Console. In the Package Manager Console type below command "Install-Package EntityFramework as shown below image.

6. Now let's add code in HomeController to get, add, edit and delete book records. (delete existing code)

public class HomeController : Controller
    {
        // GET: Book
        public ActionResult Index()
        {
            return View();
        }
 
        // GET: All books
        public JsonResult GetAllBooks()
        {
            using (BookDBContext contextObj = new BookDBContext())
            {
                var bookList = contextObj.book.ToList();
                return Json(bookList, JsonRequestBehavior.AllowGet);
            }
        }
        //GET: Book by Id
        public JsonResult GetBookById(string id)
        {
            using (BookDBContext contextObj = new BookDBContext())
            {
                var bookId = Convert.ToInt32(id);
                var getBookById = contextObj.book.Find(bookId);
                return Json(getBookById, JsonRequestBehavior.AllowGet);
            }
        }
        //Update Book
        public string UpdateBook(Book book)
        {
            if (book != null)
            {
                using (BookDBContext contextObj = new BookDBContext())
                {
                    int bookId = Convert.ToInt32(book.Id);
                    Book _book = contextObj.book.Where(b => b.Id == bookId).FirstOrDefault();
                    _book.Title = book.Title;
                    _book.Author = book.Author;
                    _book.Publisher = book.Publisher;
                    _book.Isbn = book.Isbn;
                    contextObj.SaveChanges();
                    return "Book record updated successfully";
                }
            }
            else
            {
                return "Invalid book record";
            }
        }
        // Add book
        public string AddBook(Book book)
        {
            if (book != null)
            {
                using (BookDBContext contextObj = new BookDBContext())
                {
                    contextObj.book.Add(book);
                    contextObj.SaveChanges();
                    return "Book record added successfully";
                }
            }
            else
            {
                return "Invalid book record";
            }
        }
        // Delete book
        public string DeleteBook(string bookId)
        {
 
            if (!String.IsNullOrEmpty(bookId))
            {
                try
                {
                    int _bookId = Int32.Parse(bookId);
                    using (BookDBContext contextObj = new BookDBContext())
                    {
                        var _book = contextObj.book.Find(_bookId);
                        contextObj.book.Remove(_book);
                        contextObj.SaveChanges();
                        return "Selected book record deleted sucessfully";
                    }
                }
                catch (Exception)
                {
                    return "Book details not found";
                }
            }
            else
            {
                return "Invalid operation";
            }
        }
    }

7. Add database connection in web.config (Database will be created using EF once we will add book data first time)

<connectionStrings>
    <add name="BookDBContext" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-CrudInAj-201412222;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-CrudInAj-201412222.mdf" />
  </connectionStrings>

8. Now we have to add view markup using AngularJS directives (ng-model & ng-click) but before this we have to add AngularJS in our project using Package Manager Console (open PMC and write command "Install-Package AngularJS" will install AngularJS).

9. Go to Scripts and create a new folder as BookScripts, under BookScripts folder create 3 new js files as Controller.js, Module.js & Service.js.

10. Open BundleConfig.cs under App_Start and add below code.

bundles.Add(new ScriptBundle("~/bundles/angularJS").Include(
                     "~/Scripts/angular.js"));
 
bundles.Add(new ScriptBundle("~/bundles/customJS").Include(
                     "~/Scripts/BookScripts/Module.js",
                     "~/Scripts/BookScripts/Service.js",
                     "~/Scripts/BookScripts/Controller.js"));

11. Open Views -> Shared -> _Layout.cshtml and add @Script.Render block in the head tag of the page.

@Scripts.Render("~/bundles/angularJS")
@Scripts.Render("~/bundles/customJS")

12. Add ng-app AnularJS directive in the HTML section of the page and give name as mvcCRUDApp (removed About & Contact links). full page code is as below

	
<!DOCTYPE html>
<html ng-app="mvcCRUDApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/angularJS")
    @Scripts.Render("~/bundles/customJS")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Book Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
 
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

13. Open Module.js and define angular module as below

var app = angular.module("mvcCRUDApp", []);

14. Open Service.js and define functions for Add, Update, Get and Delete book functions.

app.service("crudAJService", function ($http) {
 
    //get All Books
    this.getBooks = function () {
        return $http.get("Home/GetAllBooks");
    };
 
    // get Book by bookId
    this.getBook = function (bookId) {
        var response = $http({
            method: "post",
            url: "Home/GetBookById",
            params: {
                id: JSON.stringify(bookId)
            }
        });
        return response;
    }
 
    // Update Book 
    this.updateBook = function (book) {
        var response = $http({
            method: "post",
            url: "Home/UpdateBook",
            data: JSON.stringify(book),
            dataType: "json"
        });
        return response;
    }
 
    // Add Book
    this.AddBook = function (book) {
        var response = $http({
            method: "post",
            url: "Home/AddBook",
            data: JSON.stringify(book),
            dataType: "json"
        });
        return response;
    }
 
    //Delete Book
    this.DeleteBook = function (bookId) {
        var response = $http({
            method: "post",
            url: "Home/DeleteBook",
            params: {
                bookId: JSON.stringify(bookId)
            }
        });
        return response;
    }
});

15. Open Controller.js and add functions for GetAllBooks(), EditBook(), AddUpdateBook(), DeleteBook() & ClearFields()

app.controller("mvcCRUDCtrl", function ($scope, crudAJService) {
    $scope.divBook = false;
    GetAllBooks();
    //To Get all book records  
    function GetAllBooks() {
        debugger;
        var getBookData = crudAJService.getBooks();
        getBookData.then(function (book) {
            $scope.books = book.data;
        }, function () {
            alert('Error in getting book records');
        });
    }
 
    $scope.editBook = function (book) {
        var getBookData = crudAJService.getBook(book.Id);
        getBookData.then(function (_book) {
            $scope.book = _book.data;
            $scope.bookId = book.Id;
            $scope.bookTitle = book.Title;
            $scope.bookAuthor = book.Author;
            $scope.bookPublisher = book.Publisher;
            $scope.bookIsbn = book.Isbn;
            $scope.Action = "Update";
            $scope.divBook = true;
        }, function () {
            alert('Error in getting book records');
        });
    }
 
    $scope.AddUpdateBook = function () {
        var Book = {
            Title: $scope.bookTitle,
            Author: $scope.bookAuthor,
            Publisher: $scope.bookPublisher,
            Isbn: $scope.bookIsbn
        };
        var getBookAction = $scope.Action;
 
        if (getBookAction == "Update") {
            Book.Id = $scope.bookId;
            var getBookData = crudAJService.updateBook(Book);
            getBookData.then(function (msg) {
                GetAllBooks();
                alert(msg.data);
                $scope.divBook = false;
            }, function () {
                alert('Error in updating book record');
            });
        } else {
            var getBookData = crudAJService.AddBook(Book);
            getBookData.then(function (msg) {
                GetAllBooks();
                alert(msg.data);
                $scope.divBook = false;
            }, function () {
                alert('Error in adding book record');
            });
        }
    }
 
    $scope.AddBookDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divBook = true;
    }
 
    $scope.deleteBook = function (book) {
        var getBookData = crudAJService.DeleteBook(book.Id);
        getBookData.then(function (msg) {
            alert(msg.data);
            GetAllBooks();
        }, function () {
            alert('Error in deleting book record');
        });
    }
 
    function ClearFields() {
        $scope.bookId = "";
        $scope.bookTitle = "";
        $scope.bookAuthor = "";
        $scope.bookPublisher = "";
        $scope.bookIsbn = "";
    }
    $scope.Cancel = function () {
        $scope.divBook = false;
    };
});

16. At last open Views -> Home -> Index.cshtml and remove existing code and add code as below

@{
    ViewBag.Title = "Home Page";
}
<div ng-controller="mvcCRUDCtrl">
    <div class="divList">
        <p><b><i>Book List</i></b></p>
        <table class="table table-hover">
            <tr>
                <td><b>ID</b></td>
                <td><b>Title</b></td>
                <td><b>Author</b></td>
                <td><b>Publisher</b></td>
                <td><b>Isbn</b></td>
                <td><b>Action</b></td>
            </tr>
            <tr ng-repeat="book in books">
                <td>
                    {{book.Id}}
                </td>
                <td>
                    {{book.Title}}
                </td>
                <td>
                    {{book.Author}}
                </td>
                <td>
                    {{book.Publisher}}
                </td>
                <td>
                    {{book.Isbn}}
                </td>
                <td>
                    <span ng-click="editBook(book)" class="btn btn-primary">Edit</span>
                    <span ng-click="deleteBook(book)" class="btn btn-danger">Delete</span>
                </td>
            </tr>
        </table>
    </div>
    <span ng-click="AddBookDiv()" class="btn btn-default" >
        Add Book
    </span>
    <div ng-show="divBook">
        <p class="divHead"></p>
        <table class="table">
            <tr>
                <td><b><i>{{Action}} Book</i></b></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> 
            <tr>
                <td><b>Id</b></td>
                <td>
                    <input type="text" disabled="disabled" ng-model="bookId" />
                </td>
                <td><b>Title</b></td>
                <td>
                    <input type="text" ng-model="bookTitle" />
                </td>
            </tr>           
            <tr>
                <td><b>Author</b></td>
                <td>
                    <input type="text" ng-model="bookAuthor" />
                </td>
                <td><b>Publisher</b></td>
                <td>
                    <input type="text" ng-model="bookPublisher" />
                </td>
            </tr>
            <tr>
                <td><b>Isbn</b></td>
                <td>
                    <input type="text" ng-model="bookIsbn" />
                </td>
                <td></td>
                <td >
                    <input type="button" class="btn btn-default" value="Save" ng-click="AddUpdateBook()" />
                    <input type="button" class="btn btn-danger" value="Cancel" ng-click="Cancel()" />
                </td>
            </tr>
        </table>        
    </div>
</div>

17. Run the application and you can Create, Read, Update & Delete book details.

Source Code

Hello World ! with AngularJS

Sun, 14 Jun 2015 03:03:00 GMT

AngularJS is a JavaScript framework used to develop cross browser applications. AngularJS is open source completely free & working in MVC (Model, View & Controller) pattern.

AngularJS is working on ng-directives, 3 main directives are:

ng-app: Directive defines the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

ng-model: Directive binds the value of HTML controls (Input, Select, Textarea) to application data.

ng-bind: Directive binds the application data to HTML controls/tags.

Let’s start our first Hello World ! application using AngularJS and Visual Studio Code (can be used any text editor even notpad but I used VS Code).

Create a simple HTML page as below:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
    </head>
    <body>
        <h2>Hello World! with Angular JS.</h2>
    </body>
</html>

Browse the page & it will looks like as shown below

Now let’s add AngularJS file using CDN

<head>
    <title>
        Angular JS sample Application.
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

Add ng-app directive in the HTML body tag

<body ng-app="">

Define ng-model to a HTML input tag and associate a userInput property to it.

<input type="text" ng-model="userInput">

Add ng-bind to a HTML label tag and assign userInput model property.

<label ng-bind="userInput"/>

Full page markup is as below

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app="">
        <h2>Hello World! with Angular JS.</h2>
        Enter text here <input type="text" ng-model="userInput"><br/>
        <b><label ng-bind="userInput"/> </b> with AngularJS is ready.
    </body>
</html>

Once run and Enter Hello World ! you will see that as soon you type text in textbox same time it getting reflected in the label tag without extra code or page refresh.

Note: I used CDN to AngularJS reference and will work only with internet access, but if you need to run/work offline then download and refer local AngularJS file as below.

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
        <script src="Scripts/angular.min.js"></script>
    </head>
    <body ng-app="">
        <h2>Hello World! with Angular JS.</h2>
        Enter text here <input type="text" ng-model="userInput"><br/>
        <b><label ng-bind="userInput"/> </b> with AngularJS is ready.
    </body>
</html>

Host custom domain in Microsoft Azure

Sun, 09 Nov 2014 14:23:00 GMT

To host a custom domain make sure you have a account in Azure portal and a custom domain from any domain provider service (In my case I have a domain from GoDaddy).

When you creates website in Microsoft Azure portal then you will get URL as http://<mysite>.azurewebsites.net You can add a custom domain name with your website, This article provides step to step instruction to associate a custom domain name purchased from any third party domain provider company to Microsoft Azure.

1. To get IP address of your website login to Azure management portal and select the website you want to associate a custom domain, while clicking on it will navigate to websites tab.

2. In the bottom tab you can see Manage Domains button. If it is not present in your case that means you are using Free hosting plan and it has to be changed to shared, basic or standard if you wish to use custom domain.

3. After changing the hosting plan click on manage domains. You will see the IP address along with CNAME records of your website.

4. Before adding your domain to Azure website you have to update CNAME records from your domain from your Domain registrar control panel. (In my case i have purchased a domain from GoDaddy and updated the CNAME records as below)

5. Go to your domain registrar panel and select the domain you want to edit CNAME and click on Manage DNS.

6. Edit Host entry @ and associate with the IP you obtain from Azure portal, edit www CName entry with your website address and add a new entry as awverify and point this to your website address.

7. Now go back to Azure portal and select Manage Domain add your custom domain to provided textbox and click finish. You will newly added domain is listed with your website.

8. You are done with changes, just browse your website via custom domain name http://www.dotnetworm.com/

OData Service using WCF Service

Sat, 13 Sep 2014 20:30:00 GMT

OData is a standardized protocol for creating and consuming data APIs. OData builds on core protocols like HTTP and commonly accepted methodologies like REST. The result is a uniform way to expose full-featured data APIs.

OData Service enables rich querying using URI query string parameters, For e.g.

http://ODataServiceTest/HumanResourceDataService.svc/Employees?$filter=JobTitle eq ‘Design Engineer’

More querying options are available here.

For this tutorial i am using Adventure Works Database, Download is available at codeplex,

http://msftdbprodsamples.codeplex.com/releases/view/55330

For below tutorial I used SQL Server 20008R2 with Visual Studio 2010 (.NET 4.0).

Below is the step-by-step tutorial to create a OData Service Class project.

1. Download Adventure Works database and setup it in local SQL server.

2. Create a new class library project “AdventureWorks.HumanResource.DataAccess”

3. Delete Class1.cs file

4. Right click on project in solution explorer and click Add –> New Item, Select Data from left tree and ADO.NET Entity Data Model from right pane. Give the name as “HumanResource.edmx” and click Add.

5. In Entity Data Model wizard select Generate from database and click next.

6. Create a new connection to Adventure Works database as below.Test connect and click OK to continue.

7. You will see connection details as below

8. Now option to choose database objects for OData, for this sample I am selecting only Tables (HumanResources schema), In later tutorial I will explore views and stored procedures for OData service.

9. After clicking Finish button, VS will create Entity Diagram, for entities make sure you have proper relation between tables.

10. Build the project, DataAccess project is ready with OData.

Now create a new WCF Data Service project and refer DataAccess dll in it.

1. Go to solution explorer, Add –> New Project

2. Delete Service1.svc & IService.cs files

3. Add –> New Item… select WCF Service and named it as “HumanResourceDataService.svc”

4. Add “AdventureWorks.HumanResource.DataAccess.dll” using Add Reference…

5. Add below dlls reference (you can add these dlls using Manage NuGet packages)

a) Microsoft.Data.Edm.dll

b) Microsoft.Data.OData

c) Microsoft.Data.Services

d) Microsoft.Data.Services.Client

e) System.Spatial.dll

6. HumanResourceDataService.svc.cs code is as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using AdventureWorks.HumanResource.DataAccess;
using System.Data.Services;
using System.Data.Services.Common;
  
namespace AdventureWorks.HumanResource.WCFService
{
    public class HumanResourceDataService : DataService<AdventureWorks2008R2Entities>
    {
        public static void InitializeService(DataServiceConfiguration config)
        {
            config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
            config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V3;
        }
    }
}

7. HumanResourceDataService.svc code is as below:

<%@ ServiceHost Language="C#" Debug="true" Factory="System.Data.Services.DataServiceHostFactory, 

System.Data.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" 

Service="AdventureWorks.HumanResource.WCFService.HumanResourceDataService" %>

8. Add new endpoint for data service with webHttpBinding, code snippet will be as below:

<? xml version="1.0" encoding="utf-8"?>
 <configuration>  
   <connectionStrings>
     <add name = "AdventureWorks2008R2Entities" connectionString="metadata=res://*/HumanResourceModel.csdl|

res://*/HumanResourceModel.ssdl|res://*/HumanResourceModel.msl;provider=System.Data.SqlClient;provider connection 

string=&quot;data source=RAJNEESH\SQLEXPRESS;initial catalog=AdventureWorks2008R2;integrated 

security=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
   </connectionStrings>
   <system.web>
     <compilation debug = "true" targetFramework="4.0" />
   </system.web>
   <system.serviceModel>
      <behaviors>
        <serviceBehaviors>
          <behavior>
            <!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint 

above before deployment -->
            <serviceMetadata httpGetEnabled = "true" />
           <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false 

before deployment to avoid disclosing exception information -->
           <serviceDebug includeExceptionDetailInFaults = "false" />
         </behavior>
       </serviceBehaviors>
     </behaviors>
     <services>
       <service name = "KPMG.eAudIT.QueueService.WASHost.HumanResourceDataService" >
         <endpoint address = "" binding="webHttpBinding" bindingConfiguration="webhttpBinding" 

contract="System.Data.Services.IRequestHandler">
         </endpoint>
       </service>
     </services>
     <serviceHostingEnvironment multipleSiteBindingsEnabled = "true" />
     <bindings>
       <webHttpBinding>
         <binding name = "webhttpBinding" maxBufferSize="2147483647" maxBufferPoolSize="2147483647" 

maxReceivedMessageSize="2147483647" receiveTimeout="01:00:00" sendTimeout="01:00:00">
           <readerQuotas maxDepth = "2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" 

maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
           <security mode = "TransportCredentialOnly" >
             <transport clientCredentialType = "Windows" />
           </security>
         </binding>
       </webHttpBinding>
     </bindings>
   </system.serviceModel>
  <system.webServer>
     <modules runAllManagedModulesForAllRequests = "true" />
   </system.webServer>
 </configuration>

9. WCF service is ready to host, host the service in local iis or run directly from visual studio and see the result as below.

10. Use LINQPad to see the results and query the data.

11. Source code download from here

Sharing host folder with VMware Player

Mon, 28 Jul 2014 20:27:00 GMT

Sharing data between host and virtual machine is a common task but how?

1. Go to Player –> Manage –> Virtual Machine Settings, It will open a new popup

2. Open option tab then select Shared Folders, check Always enabled, also check Map as network drive in Windows guests, then add…

3. Click next then browse host path, the path of host folder to share and give it a name

4. Click next then check enable this share and click finish

5. Now we can see the shared location in our virtual machines os

Wow… now i can share the files between host operating system to my virtual machine operating system.

Installing windows 8 in virtual machine using VMware Player

Sun, 27 Jul 2014 20:25:00 GMT

Today I made a plan to install Visual Studio 2014 CTP2 but how? Installer Instructions says it may not work in parallel to prior versions of Visual Studio. They recommended to install it on Virtual Machine. VM? I newer tried it and now i planned to install it on my 3 years old laptop, Lets do it together………

I downloaded latest (6.0.3) version of VMware Player from VMware site.

1. Installed into my machine, launched it and then clicked on Create a new Virtual Machine link.

2. Browse and selected windows 8 iso image.

3. Entered my windows 8 product key and my user name.I kept password textbox intact.

4. Given virtual machine name & used browse to select the location for VM storage.

5. Provided my disk storage space.

6. On clicking on next button it will open a new window with the details selected, click on the finish button.

7. While clicking on finish it starts creating the disk.

8. Ahhh…. got the information notification message, clicked on ok button.

9. Got the error message with couple of options, do not know what to do next.

10. I caught my ultimate friend “Google” and searched… finally found that I have to enable virtualization setting in my laptop’s BIOS. Lets check it….. I went to BIOS and find the Virtualization Technology under System Configuration, Enabled it and back to installation.

11. Now I can see windows 8 virtual machine link in left tree, while clicking it it starts virtual machine and I can see now windows 8 is getting installed.

12. Yes… Windows 8 is installed on my virtual machine and now i can install Visual Studio 2014 CTP2.

Thank you VMware Player, you saved my time……

Check All Check Boxes in List View with JQuery

Sat, 13 Jul 2013 20:21:00 GMT

Hi, Its quite simple to use check all checkboxes in List view using JQuery.

Use the below JQuery function to check all check boxes:

$(document).ready(function () {
           $("[id$='chkAllColor']").live('click', function () {
               $("[id$='chkColor']").attr('checked', this.checked);
           });
});

Designer code is as below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("[id$='chkAllColor']").live('click', function () {
                $("[id$='chkColor']").attr('checked', this.checked);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListView ID="lswLoan" runat="server" ViewStateMode="Disabled" >
                <LayoutTemplate>
                            <table class="table">
                                <tr>
                                    <th>
                                        <asp:CheckBox ID="chkAllColor" ToolTip="Select All" ClientIDMode="Static" runat="server" />                                          
                                    </th>
                                    <th>ID</th>
                                    <th>Color</th>                           
                                </tr>
                                <tr id="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:CheckBox ID="chkColor" runat="server" ClientIDMode="Static"  />
                        </td>
                        <td>
                            <%# Eval("id") %>
                        </td>
                        <td>
                            <%# Eval("color") %>
                        </td>
                    </tr>
                </ItemTemplate>                
            </asp:ListView>
        </div>
    </form>
</body>
</html>

Don’t forget to use ClientIDMode="Static" for each checkbox control.

And the code behind:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString1"].ConnectionString);
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           fillgrid2();
       }
   }
   private void fillgrid2()
   {
       SqlDataAdapter da = new SqlDataAdapter("select * from Table_2", con);
       DataTable dt = new DataTable();
       da.Fill(dt);
       lswLoan.DataSource = dt;
       lswLoan.DataBind();
   }

That’s it !

Output is as follow:

Upload large file using AjaxFileUpload Control with client-side chunking

Wed, 01 May 2013 20:15:00 GMT

With the latest release of AjaxControlToolkit you can upload large file (more than 3GB) with client-side chunking. Code is still simple as it was earlier.

Add ToolkitScriptManager & AjaxFileUpload control on page

<ajaxToolkit:ToolkitScriptManager runat="server" />  
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUploader" OnUploadComplete="AjaxFileUploader_UploadComplete" runat="server" />

On UploadCompleter event set the target folder location to save file.

protected void AjaxFileUploader_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
     AjaxFileUploader.SaveAs(MapPath("~/UploadedFiles/" + e.FileName));
}

To support Large files to be uploaded, need to modify Web.config. In Web.config need to add “maxRequestLength” and “maxAllowedContentLength”.

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" maxRequestLength="42949672" />
    <pages>
      <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
      </controls>
    </pages>
  </system.web>
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </handlers>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="4294967295"/>
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

Now run the page and upload large file data. (if you are using Chrome click F12 to see file is uploading with chunks)

Make sure you have downloaded latest AjaxToolkit from:http://ajaxcontroltoolkit.codeplex.com/ also you can install using NuGet command in Visual Studio 2010/12 using command “INSTALL-PACKAGE AJAXCONTROLTOOLKIT” also its mandatory to have “UploadedFiles” folder in Application root to run this application.

Supported version .net 4.0 and 4.5

Early Experts–Cloud

Tue, 02 Apr 2013 20:13:00 GMT

I participated in Windows Server 2012 "Early Experts" Challenge – Cloud Quest. And on 30-March I got the Early Experts – Cloud certificate in mail.

If you want, you can also join for Early Experts Cloud Quest using the below link and get a certificate..

Windows Server 2012 "Early Experts" Challenge – Cloud Quest

List all Files and Folders of a Directory using DOS Command

Fri, 22 Feb 2013 21:00:00 GMT

Listing the Files and Folders using DOS Command is very simple and handy.

Steps are as below:

1. Goto Command prompt.
2. Navigate to the Directory (Where you want to search Files).
3. Write the command as: dir /s /b > c:\ListFilesFolders.txt

4. Please Note: “C:\ListFilesFolders.txt” is the file path with file name.
5. And you will see the result as below:

Uncheck Radio Button on Double Click

Mon, 17 Dec 2012 20:56:00 GMT

Recently I got one requirement that i have to uncheck radio button list when a user double click it (Try to uncheck). I did this using JAVA Script.

Below is the code.

Designer:

<head runat="server">
    <title> :Radio Button List Demo: </title>
<script language="javascript" type="text/javascript">
    //Global variable to store selectedvalue
    var lastchecked = "";
 
    function rblSelectedValue() {
        //Get the radiobuttonlist Value
        var radio = document.getElementsByName('<%= RadioButtonList1.ClientID %>');
 
        //local variable to store selected value
        var selectedvalue;
 
        //loop through the items in radiobuttonlist
        for (var j = 0; j < radio.length; j++) {
            if (radio[j].checked) {
                if (lastchecked == radio[j].value) {
                    radio[j].checked = false;
                    lastchecked = "";
                }
                else {
                    lastchecked = radio[j].value;
                }               
                break;
            }
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label2" runat="server" Text="How many states are in India?"></asp:Label>
        <br />
        <asp:radiobuttonlist id="RadioButtonList1" onclick="rblSelectedValue()" runat="server">
           <asp:listitem value="26">Twenty Six</asp:listitem>
           <asp:listitem value="28">Twenty Eight</asp:listitem>
           <asp:listitem value="20">Twenty</asp:listitem>
           <asp:listitem value="30">Thirty</asp:listitem>
       </asp:radiobuttonlist>
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
</body>

Code:

protected void Button1_Click(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedItem != null)
        {
            if (RadioButtonList1.SelectedItem.Value=="28")
            {
                Label1.ForeColor = System.Drawing.ColorTranslator.FromHtml("Green");
                Label1.Text = "You have selected :" + RadioButtonList1.SelectedItem.Text;
            }
            else
            {
                Label1.ForeColor = System.Drawing.ColorTranslator.FromHtml("Red");
                Label1.Text = "You have selected : " + RadioButtonList1.SelectedItem.Text;
            }
             
        }
        else
        {
            Label1.ForeColor = System.Drawing.ColorTranslator.FromHtml("Red");
            Label1.Text = "None of the option selected";
        }
    }

Cheers!!!

Setup and Deployment of Windows Application with SQL Server Database using Visual Studio 2010

Thu, 16 Aug 2012 19:53:00 GMT

Recently i got a chance to create a small WPF Application and then i have to create a MSI using Visual Studio 2010 using SQL Server 2008 Database. (I have to create a MSI which will create a Database in SQL Server 2008 Express and then create Tables, Store Procedures and also insert some Data in tables.

1. Create an Application with SQL Server 2008 (For example i have created a WPF Application which fill a DataGrid with Product Table.

2. Create two connection string in app.config file as below:

<connectionStrings>
      <!-- Connection sting to connect Master Database-->
        <add name="WPFTest.Properties.Settings.masterConnectionString"
            connectionString="Data Source=.\sqlexpress;Initial Catalog=master;Integrated Security=True"
            providerName="System.Data.SqlClient" />
      <!-- Connection sting to connect your Program Database-->
      <add name="WPFTest.Properties.Settings.TestConnectionString"
          connectionString="Data Source=.\sqlexpress;Initial Catalog=TestDB;Integrated Security=True"
          providerName="System.Data.SqlClient" />
    </connectionStrings>

First for Master Database and second for your Application Database.

3. Create a Installer class:

a) On the Project menu, click Add New Item.

b) In the Add New Item dialog box, select Installer Class. In the Name box, type SetupInstaller.cs.

4. Create a text file that contains a SQL statement to create Tables in Database:

a) In Solution Explorer, select the <YourProject> project. On the Project menu, click Add New Item.

b) In the Add New Item dialog box, click Text File. In the Name box, type tables.txt.

c) Add the Create Tables Script in tables.txt file:

CREATE TABLE [dbo].[Product](
    [ProductID] [int] IDENTITY(1,1) NOT NULL,
    [Name] [nvarchar](50) NULL,
    [ProductNumber] [nvarchar](25) NOT NULL,
    [Color] [nvarchar](15) NULL,
    [StandardCost] [money] NOT NULL,
    [ListPrice] [money] NOT NULL,
    [Size] [nvarchar](5) NULL,
    [Weight] [decimal](8, 2) NULL,
    [ProductCategoryID] [int] NULL,
    [ProductModelID] [int] NULL,
    [SellStartDate] [datetime] NOT NULL,
    [SellEndDate] [datetime] NULL,
    [DiscontinuedDate] [datetime] NULL,
    [ThumbNailPhoto] [varbinary](max) NULL,
    [ThumbnailPhotoFileName] [nvarchar](50) NULL,
    [rowguid] [uniqueidentifier] ROWGUIDCOL  NOT NULL,
    [ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY];

Note: Make sure you are adding ; (semicolon) at the end of each statement and also remove GO from all the script. You can add insert statement in this file.

To Generate SQL Server Database Script see the below link:

Create Script to Copy Database Schema and All The Objects

d) In Solution Explorer, select tables.txt. In the Properties window, set the BuildAction property to Embedded Resource.

e) If you have stored procedure in your Database then Add a new txt file (named as getproduct.txt) as described above and add the create stored procedure statement in the file.

CREATE PROCEDURE spGetProduct 
     
AS
BEGIN
    SET NOCOUNT ON;
    SELECT * FROM Product;
END

f) In Solution Explorer, select getproduct.txt. In the Properties window, set the BuildAction property to Embedded Resource.

5. Add code to the installer class to read the text files

a) In Solution Explorer, select SetupInstaller.cs. On the View menu, click Code.

b) Add the following Namespaces statement at the top of the module:

using System.IO;
using System.Data.SqlClient;
using System.Reflection;
using System.Windows;

c) Add the following code to the SetupInstaller class, after the declaration of base ():

[RunInstaller(true)]
    public partial class SetupInstaller : System.Configuration.Install.Installer
    {
        SqlConnection masterConnection = new SqlConnection();
        public SetupInstaller(): base()
        {
            InitializeComponent();
        }
        private string GetSql(string Name)
        {
 
            try
            {
                // Gets the current assembly.
                Assembly Asm = Assembly.GetExecutingAssembly();
 
                // Resources are named using a fully qualified name.
                Stream strm = Asm.GetManifestResourceStream(Asm.GetName().Name + "." + Name);
 
                // Reads the contents of the embedded file.
                StreamReader reader = new StreamReader(strm);
                return reader.ReadToEnd();
 
            }
            catch (Exception ex)
            {
                MessageBox.Show("In GetSQL: " + ex.Message);
                throw ex;
            }
        }
 
        private void ExecuteSql(string DatabaseName, string Sql)
        {
            System.Data.SqlClient.SqlCommand Command = new System.Data.SqlClient.SqlCommand(Sql, masterConnection);
 
            // Initialize the connection, open it, and set it to the "master" database
            masterConnection.ConnectionString = Properties.Settings.Default.masterConnectionString;
            Command.Connection.Open();
            Command.Connection.ChangeDatabase(DatabaseName);
            try
            {
                Command.ExecuteNonQuery();
            }
            finally
            {
                // Closing the connection should be done in a Finally block
                Command.Connection.Close();
            }
        }
 
        protected void AddDBTable(string strDBName)
        {
            try
            {
                // Creates the database.
                ExecuteSql("master", "CREATE DATABASE " + strDBName);
 
                // Creates the tables.
                ExecuteSql(strDBName, GetSql("tables.txt"));
 
                // Creates the stored procedure.
                ExecuteSql(strDBName, GetSql("getproduct.txt"));
 
            }
            catch (Exception ex)
            {
                // Reports any errors and abort.
                MessageBox.Show("In exception handler: " + ex.Message);
                throw ex;
            }
        }
 
 
        public override void Install(System.Collections.IDictionary stateSaver)
        {
            base.Install(stateSaver);
            AddDBTable("TestDB");
        }
 
        [System.Security.Permissions.SecurityPermission(System.Security.Permissions.SecurityAction.Demand)]
        public override void Uninstall(IDictionary savedState)
        {
            base.Uninstall(savedState);
            ExecuteSql("master", "DROP DATABASE TestDB");
        }
    }

6. Create a deployment project

a) On the File menu, click Add, and then click New Project.

b) In the Add New Project dialog box, open the Other Project Types node and select Setup and Deployment Projects in the Project Type pane. Then select Setup Project in the Templates pane. In the Name box, type WPFTestInstaller.

c) In the Properties window, select the ProductName property and type DB Installer.

d) In the File System Editor, select the Application Folder. On the Action menu, click Add, and then click Project Output.

e) In the Add Project Output Group dialog box, select Primary output for the WPFTest project.

If you want to create desktop Shortcut/Start->All Programs with Icon then follow below steps:

f) In the File System Editor, select the Application Folder. On the Action menu, click Add, and then click File.

g) Browse and select a .ico file to make it as Icon of your Project. Then click OK.

h) Right click on Primary output for WPFTest (Active) and select Create Shortcut to Primary output for WPFTest (Active).

i) Rename Shortcut to Primary output for WPFTest (Active) to your Application name (WPF Test).

j) Right click on WPF Test then select Properties Window, In the Icon section select dropdown and click on Browse.

k) In the Icon Window click Browse then double click Application Folder and select your Icon file and click OK.OK.

l) Drag the WPF Test and drop it into User's Desktop in File System Editor.

m) Repeat the step h, i, j and k and then Drag the WPF Test and drop it into User's Program Menu in File System Editor.

7. Create a custom action

a) Select the WPFTestInstaller project in Solution Explorer. On the View menu, point to Editor, and then click Custom Actions.

b) In the Custom Actions Editor, select the Install node. On the Action menu, click Add Custom Action.

c) In the Select item in project dialog box, double-click the Application Folder.

d) Select Primary output from DBCustomAction (Active), then click OK to close the dialog box.

e) Repeat the step b, c and d for Uninstall node of Custom Actions Editor.

f) On the Build menu, click Build WPFTestInstaller.

8. Install/Uninstall the application on your development computer.

a) Select the WPFTestInstaller project in Solution Explorer. On the Project menu, click Install.

b) Select the WPFTestInstaller project in Solution Explorer. On the Project menu, click Uninstall.

9. To get the installer msi

a) In the Solution Explorer right click on WPFTestInstaller and select Open Folder in Windows Explorer.

b) In the Debug Folder you will get your DB Installer.msi.

Take this DB Installer.msi and you can install it to other systems which has .net 4.0 and SQL Server 2008 Express Installed.

Source Code: WPFTest.rar (510.28 kb)

To Create this Application i have taken the help of Microsoft Walkthrough

Using a Custom Action to Create a Database at Installation

Sending Mail in Go-daddy Shared Hosting using Google Apps Mail

Mon, 09 Jul 2012 19:46:00 GMT

Most of the time we are facing problem when trying to use feedback form in the website which is hosted in GoDaddy servers in shared hosting and we are using Google Apps as mail for the domain.

When we are developing the application in local its working fine but when we deployed in production server it does not send any mail. This issue occures because GoDaddy does not allow external host server for sending mail.

For Google Apps normally we are using Gmails SMTP settings as:

1) SMTP Server: smtp.gmail.com

2) Port: 465/ 587

3) Enable SLL = True

but these credentials are not working in GoDaddy Shared hosting.

Below is the Code i am using for sending mail in GoDaddy Shared Servers.

HTML Markup:

<div style="margin:0 auto; width:900px; padding-left:50px; padding-top:220px; background-image:url

(images/bg.gif); text-align:center; font-family:Verdana; font-size:10pt; color:#ffffff;">
      
      <table>
      
        <tr>
            <td colspan="3" align="left"><h2>Mail Details:</h2></td>
        </tr>
      
        <tr>
            <td align="left" width="150px"><strong>Mail From</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left">
                <asp:TextBox ID="txt_mailfrom" runat="server" Width="200px"></asp:TextBox>
            </td>
        </tr>
      
        <tr>
            <td align="left" width="150px"><strong>Mail To</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left">
                <asp:TextBox ID="txt_mailto" runat="server" Width="200px"></asp:TextBox>
            </td>
        </tr>
      
        <tr>
            <td align="left" width="150px" colspan="3"
                style="font-weight: 700; font-size: medium">
                <h2>
                    Feedback:</h2>
            </td>
        </tr>
      
        <tr>
            <td align="left" width="150px"><strong>Name</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_name" runat="server" Width="200px" 

Height="22px"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="left" width="150px"><strong>Father's Name</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_father" runat="server" Width="200px" 

Height="22px"></asp:TextBox></td>
        </tr>
          
        <tr>
            <td align="left" width="150px"><strong>Contact Number</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_contact" runat="server" Width="200px" 

Height="22px"></asp:TextBox></td>
        </tr>
          
        <tr>
            <td align="left" width="150px"><strong>Email ID</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_mail" runat="server" Width="200px" 

Height="22px"></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
                    ErrorMessage="xyz@x.x" ControlToValidate="txt_mail"
                    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w

+)*"></asp:RegularExpressionValidator>
            </td>
        </tr>
        <tr>
            <td align="left" width="150px"><strong>Address</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_address" runat="server" Width="200px"
                    Height="35px" TextMode="MultiLine"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="left" width="150px"><strong>Message</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:TextBox ID="txt_msg" runat="server" Width="200px"
                    Height="35px" TextMode="MultiLine"></asp:TextBox></td>
        </tr>
          
        <tr>
            <td align="left" width="150px"><strong>Upload</strong></td>
            <td align="center" width="20px"><strong>:</strong></td>
            <td align="left"><asp:FileUpload ID="FileUpload1" runat="server" Width="200px" /></td>
        </tr>
          
        <tr>
            <td align="left" width="150px"><strong></strong></td>
            <td align="center" width="20px"><strong></strong></td>
            <td align="left">
                <asp:Button ID="btn_send" runat="server" Text="Submit" BackColor="#CC0000"
                    Height="25px" Width="90px" Font-Bold="True" ForeColor="White"
                    onclick="btn_send_Click" />  
                    <asp:Button ID="btnclear" runat="server" Text="Clear" BackColor="#CC0000"
                    Height="25px" Width="90px" Font-Bold="True" ForeColor="White"
                    onclick="btnclear_Click" />
            </td>
        </tr>
        <tr><td colspan="3" align="center">
            <asp:Label ID="lbl_msg" runat="server" ForeColor="#CC0000"></asp:Label>
            </td></tr>      
    </table>  
    </div>

Code Block should be as:

protected void Page_Load(object sender, EventArgs e)
    {
        lbl_msg.Text = "";
        if (!IsPostBack)
        {
            cleartext();
        }
  
    }
    protected void btn_send_Click(object sender, EventArgs e)
    {
        string from = txt_mailfrom.Text;
        string to = txt_mailto.Text;
        string body = "<b>Name : </b>" + txt_name.Text + "<br/><b>Father Name : </b>" + 

txt_father.Text + "<br><b>Contact No. : </b>" + txt_contact.Text + "<br/><b>Email : 

</b>" + txt_mail.Text + "<br/><b>Address : </b>" + txt_address.Text + "<br/><b>Message : 

</b>" + txt_msg.Text;
  
        string message = sendMail(from, to, body, "Feedback", FileUpload1);
        if (message == "")
        {
            lbl_msg.Text = "Message Send Successfully...";
        }
        else
        {
            lbl_msg.Text = message;
        }
          
        cleartext();
    }
    protected void btnclear_Click(object sender, EventArgs e)
    {
        cleartext();
    }
  
    private void cleartext()
    {
        txt_address.Text = string.Empty;
        txt_contact.Text = string.Empty;
        txt_father.Text = string.Empty;
        txt_mail.Text = string.Empty;
        txt_name.Text = string.Empty;
        txt_msg.Text = string.Empty;
        txt_mailfrom.Text = string.Empty;
        txt_mailto.Text = string.Empty;
    }
  
    public string sendMail(string from, string sendTo, string body, string subject, FileUpload file)
    {
        string message = "";
        try
        {
            const string SERVER = "relay-hosting.secureserver.net";
            using (System.Net.Mail.MailMessage mess = new System.Net.Mail.MailMessage())
            {
                System.Net.Mail.SmtpClient sc = new System.Net.Mail.SmtpClient();
                  
                mess.To.Add(sendTo);
                if (file.HasFile)
                    mess.Attachments.Add(new Attachment(file.PostedFile.InputStream, file.FileName));
                mess.Subject = subject;
                mess.Body = body;
                mess.IsBodyHtml = true;
                mess.From = new System.Net.Mail.MailAddress(from);
                sc.Host = SERVER;               
                sc.Send(mess);
           }
        }
        catch (Exception ex)
        {
            message = ex.ToString();
        }
        return message;
    }

Don't forget to add System.Net.MailNamespace

Note: Please make sure upload the sample files in production server then only it will work. For development server it will throw error.

Sample Attached: Sending Mail.rar (2.38 kb)