Getting Started and Deploy Asp.net App with Appharbor -- Cloud Platform as a service

CLOUD - So first thing we need to know here is what is a Cloud ? and how it is useful to us to use Cloud. Cloud is long network of interconnected computers that allow the avaliability of data over internet all the time .Cloud help to make our data secure and allow the user to run its application on cloud with full scalability and availaibility . We say it provides avalaibility of 100% because Cloud follows the approach of Replication of data to the other nodes to make ensuring the full availaibility of data even when the server that is actually assumed to have data or application is not availaible .

If we are accessing an Application on Cloud and at that particular time that server is down so how our Application Deployed on Server could be accessed Cloud Computing gives answer of this question By Cloud Computing when we deploy our application on cloud then cloud computing will replicate your application to other connected nodes also so that your application will be availabile when one of node is off and unable to provide the access to your application

AppHarbor is a fully hosted .NET Platform as a Service. AppHarbor can deploy and scale any standard .NET application to the cloud. AppHarbor is easy and simple to use . It provides number of additional addons for database and other applications to add it to your application. Here I am going to tell all the procedure to create and deploy asp.net application to appharbor cloud service.

Step1

Start your Browser and Put this Url in your address bar and Navigate to AppHarbor Website :- https://appharbor.com/ and Hit Enter

Step2
Click on  Get started Button . Then do simple signup procedure .Then Login to your AppHarbor Account.

Step3
After login Click on Your Applications Menu item on Top Menu Bar and Create a New application by supplying a name for the application Then Finally click on Create New Button

Step4
Now New application is successfully created on cloud . Now for deploying a .Net application with Sql Server database We require to add Sql server as a Addon to Our cloud App

Step5
Now click on Add Ons on sidebar Menu Then Scroll down and find Sql Server and Click on it.

Step6
Now SQL  SERVER Add details are shown Click on Free Install button . Then SQL SERVER add on will be installed for your application to use sql server database with .net application in cloud

Step7
Now on SQL SERVER Installation Success screen click on  sql server

Step8
Then click on Go To  Sql Server . Now your sql server Instance Details will be shown . The most important thing we need is connection string of database instance

Step9
Copy this connection string we will require it in Further steps

Step10
Now open your Visual Studio Command Prompt . It will be availaible in Microsoft visual studio 2010/2012 folder , if not found you can comment here on this post

Step11
Write the following command on this :-
 aspnet_regsql -A all -C "place your copied connection string here"     Now hit enter

 

Step12
Now Open Visual studio Click on File Click on New Project Choose ASP.NET WEB APPLICATION give it a Name and give proper save path like I give "C:/WindowsApplication3" and Hit Ok

 

Step13
Now Visual Studio will Present you with practice project already having some coded files .

Step14
Now open Web.Release.config file Uncomment the connectionstring tag and Replace the name of connection add tag to  "ApplicationServices" and Paste the connection we have copied earlier here and finally Press Ctrl + s to save all content . Now all work with visual studio is done.  Just  Run you application on localhost to know its working fine or not and it also compile all the code that is must required to deploy app on appharbor

 Step15
Now Open Git Bash If you have not installed it yet then wait for next article in which i will tell how to install Git Bash

Step16
After opening Git Bash Navigate to directory where you have saved your .net project like I have saved it in "C:/WebApplication3" . Use this command to go to this directory

cd c:/WebApplication3             Then Hit enter



Step17
Now Run following command to initialize Git Repository
 git init



Step18
Run following command to add repository to Git
git add .



Step19
Run following command to commit your data to Git repository
git commit -m "Added Project To Git:"



Step20
Sometime It may ask you for your Email Address pass it using following command
git config --global user.email "yourmail@example.com"

Step21
Now Clone your git Repository for that we require Repository Url for that Go to Appharbor.com then click on your applications Then Click on Application you have created Then in Sidebar click on   Repository Url then it will be automatically copied to your clipboard

 Step22
Now run the following command  :-
git remote add appharbor "paste copied url here"    ...........then hit enter


Step23
Now push your data or application to cloud or Git Repository by using following command
git push appharbor master

Step24
Now it will ask for password then enter password of your appharbor account and Hit Enter Now it will copy all files to Git Repository



Step25
Now your Application is successfully deployed to cloud To check it online you can first refresh your webpage where you have opened Appharbor account Then go to application we have created on appharbor and click on Hostnames and you can see a url there click on it or open it in new  tab it will show your website that you have uploaded

MonoDevelop Cross Platform Using Csharp

MonoDevelop is a revolution in the era of Cross development by using Microsoft .NET programming language like Csharp ( C# ) , Visual Basic and Jsharp ( J# ) . Monodevelop has removed blame that Microsoft .NET software can only run on Windows platforms This makes possible to run .net applications and to build a .Net Application on any platform

MonoDevelop is a cross-platform IDE  developed for Csharp ( C# ) programming language  and other .NET programming languages. MonoDevelop allows programmers to program desktop softwares and ASP.NET Web applications and websites  on Linux, Windows  and Mac OSX. MonoDevelop  makes possible for .net programmers to run , create and deploy their .net software applications on cross-platforms Any  .NET application developed  with Visual Studio can be used in linux or Mac with the help of MonoDevelop

Windows platform is fully supported  for running MonoDevelop and it is fully accepted. In past there were many issues regarding Mono Development but now  Many Windows specific issues have been fixed, and ome add-ins such as debugging and subversion support have been written specifically for Windows and it is fully supported by windows

By developing with mono specifically, you will be able to run your executable on any platform that has mono available for it. That in and of itself is mono's biggest advantage over developing on MSFT's .Net platform. Said differently: If you build you assembly with mono, you're guarantee cross-platform support

Features Of MonoDevelop

1. Multi-platform support

   It Supports Linux ( ubuntu etc ) , Windows( xp,7,8 etc ) and Mac OS X operating systems
   

2. Advanced Text Editing Facilities

   It provides Code completion support for Csharp  4 that is lastest version for csharp
   It also provides  code templates and  code folding.

3. Configurable workbench

   Fully customizable window layouts, user defined key bindings, external tools

4. Multi-language programming Facilities

   Monodevelop supports various programming languages like - C#, Visual Basic.Net, C/C++, Vala
   

1. GTK# Visual Designer

   Easily build GTK# applications
   
   
   

   Installation Steps for MonoDevelop in Windows

   1.   First you need to install GTK# for .NET, because the GTK# included with Mono is in Mono's      GAC

      Downloads links All GTK Versions
   2. Then After successfull Installation of Gtk# Now install Monodevelop. You can download Monodevelop from link below
      Download Monodevelop

   
   

   Installation Steps For Gtk# for MonoDevelop

   1. After Downloaded the Gtk# setup from link given in above section . Double click on setup and you will see the following startup screen
   
   
   

   

   MonoDevelop Cross Platform Using Csharp

2. Click Next to proceed the installation
3. Now here comes License Agreeement Click on Check Box to accept the license and click on Next Button
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
4. Now Choose or browse directory for Gtk# installation and click Next
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
5. In Next Window click install and you will the installtion progress
   

   

   MonoDevelop Cross Platform Using Csharp

   
   

    6. After full installation click on Finish

Installation Steps for Monodevelop

1.  After Downloaded the MonoDevelop setup from link given in above section . Double click on setup and you will see the following startup screen
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
2. Click Next to proceed the installation 
3. Now here comes License Agreeement Click on Check Box to accept the license and click on Next Button
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
   
   
4.  Now Choose or browse directory for  MonoDevelop installation and click Next
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
5. In Next Window click install and you will the installtion progress
   

   

   MonoDevelop Cross Platform Using Csharp

   
   
   

   

   MonoDevelop Cross Platform Using Csharp

   
        
    
6. After full installation click on Finish
   
   
   
   

MonoDevelop Cross Platform Using Csharp

POSSIBLE ERRORS DURING MONO INSTALLATION

ERROR :- Gtk# version 2.12.9 or greater must be installed

Gtk# version 2.12.9 or greater must be installed

Go Here For Solution To this Error Fix Gtk# version 2.12.9 or greater must be installed

Implementing Search Functionality in ASP.NET MVC 4

What we are Going To cover

* In this Tutrial we are going to cover how to implement search functionality in Asp.Net MVC 4 . In our web applications in MVC we often need to add the functionality to search the database objects for specific data based on some creteria like to find employees with name starting with 'N' or to find data of employees that have Gender Male

Download Demo App With Database Link Below

Creating Database For This Application

1. First create Database

* Open Microsoft Sql server . Click on New Query . Now execute the query below to create database

Create Database searchingInmvc

Create Database Searching in Asp.net MVC 4

2. Then Press F5 . This will create Database successfully

Create Table And Inserting Demo Data

create table tblEmployee         //creating table
(
ID int identity primary key,
Name nvarchar(50),
Gender nvarchar(50),
Email nvarchar(50)
)

Creating Table In database 

//Inserting Demo Data

Here , we are inserting 4  Rows in Database table

insert into tblEmployee values('John','Female','john@geeksprogrammings.blogspot.in')
insert into tblEmployee values('funky','Male','funky@geeksprogrammings.blogspot.in')
insert into tblEmployee values('wiley','Male','wiley@geeksprogrammings.blogspot.in')
insert into tblEmployee values('ceren','Female','ceren@geeksprogrammings.blogspot.in')

Inserting Data in Table 

Showing All Inserted Data

Download Database script file

In link below you can download the script file and then double click on file it will open in sql server . It will create the database automatically for you when you execute it

Create New MVC 4 Application in Visual Studio

1. Start Visual Studio with language selected as C#
2.Click on File --> Then click on New Project
3. Scroll down and select ASP.NET MVC 4 Web Application

Implementing Search Functionality in Asp.Net MVC 4

4. Give appropriate Name,Path and solution Name and Hit Enter
5. choose Empty Template
6. Choose Razor View Engine and Hit Enter
7. Now New MVC 4 web application is started

Adding Models to MVC 4 Application

1. In solution Explorer -- > Right click on Models --> Then click on New item



2. Then select ADO.NET Entity Data Model --.> Give it a valid name like 'sampledatamodel'
3. Click Add

Implementing Search Functionality in Asp.Net MVC 4

4. Now A dialog box appears choose database connection to sql server and give your connection string a name that will be give to connection string in web.config file

Implementing Search Functionality in Asp.Net MVC 4

5. click next
6. Now in next dialog box you will be presented with tables available in database table select you table

Implementing Search Functionality in Asp.Net MVC 4

7. Now click Finish
8. Now Entity model of table is generated you can rename your database here to 'Employee'

Implementing Search Functionality in Asp.Net MVC 4

9. Now Model is successfully Added

Adding Controller and Views To MVC 4 Application

To add controller to database --

1. Right click on Controllers folder in solution folder
2. click on Add --> Then click on Controller

Implementing Search Functionality in Asp.Net MVC 4

3. Now Add controller Dialog Box appears
4. Give your controller a name like 'HomeController'
5. In template choose  'MVC controller with read/write and views using Entity  Framework'
6. The Reason behind choosing this is it will automatically generate some pages to insert,delete , update data of model to which we are associating this controller
7. Now give the Model name that we have added in previous step 'Employee'
8. Now Choose dbcontext class from dropdown menu and finally  click ADD
9. This autimatically add Views for insert , update, delete and index view in views folder under controller named folder

Implementing Search Functionality in Asp.Net MVC 4

 10. Now Run your application . This will give output below:-

Implementing Search Functionality in Asp.Net MVC 4

Adding Style And Look To Application

So we are going to search the database and retrieve data from database and then show the retrieved result to user. For this we have to get some controls and code . The GUI design that are going to give to this application is as below :-

1. In solution Explorer under Index view Double click on Index.cshtml

2. Now just before the line '<h2>Index</h2>' add a line 

<div style='font-family:Arial'>

and close this div right below the code after table tag 

Other UpdationAre in Demo Project Downlao And Use it

3. Update your Index.cshtml file under view folder in solution Explorer with the code below

@model IEnumerable<SearchInMVC.Models.Employee>

@{

    ViewBag.Title = "Index";

}

<div style="font-family:Arial ">

<h2>Index</h2>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

<p>

@using (Html.BeginForm ("Index","Home",FormMethod.Get ))

{

<b>Search by:</b>@Html.RadioButton("searchBy","Name")<text> Name</text>

@Html.RadioButton("searchBy","Gender")<text>Gender</text><br />

@Html.TextBox("Search");<input type="submit" value="Search" />

    }

</p>

<table border="1">

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Gender)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Email)

        </th>

        <th>Action</th>

    </tr>

    @if (Model.Count() == 0)

    {

        <tr>

        <td colspan ="4">No Rows Match Search Criteria</td>

        

        </tr>

    }

    else

    {

foreach (var item in Model)

{

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Gender)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Email)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |

            @Html.ActionLink("Details", "Details", new { id = item.ID }) |

            @Html.ActionLink("Delete", "Delete", new { id = item.ID })

        </td>

    </tr>

}

    }

</table>

</div>

Now Run your Application and you can see the change with output below :-

Implementing Search Functionality in Asp.Net MVC 4

Code Description

In code above we have used Razor code and instead of using <form> tag that we usually use in html we have used Html Helper below

@using (Html.BeginForm ("Index","Home",FormMethod.Get ))

{

<b>Search by:</b>@Html.RadioButton("searchBy","Name")<text> Name</text>

@Html.RadioButton("searchBy","Gender")<text>Gender</text><br />

@Html.TextBox("Search");<input type="submit" value="Search" />

    }

In Html.BeginForm ("Index","Home",FormMethod.Get )

Here, Html.BeginForm  is used in place of using form tag . Html.BeginForm  Received 3 arguments .

Here, "Index" is Name of action that will be executed on posting form  to server

Here, "Home" is name of controller to which this link will be redirected when clicked

Here, " FormMethod.Get" type of encoding method that applied on data we are posting 

Now Open Controller And Add code below to Index Action of home controller

 if (searchby == "Gender")

            {

                return View(db.Employees.Where(x => x.Gender == search || search ==null).ToList());

            }

            else

            {

                return View(db.Employees.Where(x => x.Name.StartsWith(search)).ToList());

}

Download Demo App For searching in ASP.NET MVC 4

Download Database script file

Working with Master Pages Asp.net

Why Do We Need Master Pages ?

Most Web sites today have common elements used throughout the entire application or on a majority of the pages within the application. If you look at main page of Reuters News website  ( www.reuters.com ) , you can see common elements that are used throughout the entire web site. Here is screenshot of website given below :-

In this screenshot , notice header section , the navigation section, and footer section on the page. In fact, nearly every page within the entire applicaiton uses these same elements. Even before master pages, you had ways to put these elements into every page through a variety of means; but in most cases, doing so posed difficulties.

Some developers simply copy and paste the code for these common sections to each and every page that requires them. This works , but it's rather labor intensive. However, if you use the copy-paste method, whenever a change is required to one of these common sections of the application, you have to go into each and every page and duplicate the change.

How To Use Master Page In Asp.net

DEMO APP DOWNLOAD LINK IS AVAILABLE  BELOW

1. In Visual Studio click on file then New Project then Choose your preferred
language like i have used c# then choose Web  and Then click on Asp.NET Empty Web Application and click ok

2. Now empty web site solution is created for you

3. Now in solution explorer in right side panel Right click on you solution name

4. In popup menu click on Add then click on New Item

5. Now choose Master Page give it a name like 'master1.Master' and click ok

Each Master Page consist of ContentPlaceHolder  control that control provides the space to other webform that is inheriting this Masterpage to place its own content on that webform along with Content on Master Page The Master Page contents are availaible in Child Webform but we cannot edit these content in child webform But in Content placeholder we can add the content according to our requirements

Content Placeholder are used like below:- 

These lines of code are automatically added to your Master Page .

 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

<%-- This Place is available to Child web-form to put its content along wit master page --%>

</asp:ContentPlaceHolder>

To place default content within one of the content areas of master page, you simply put it in the contentPlaceholder server control on the master page itself or it is automatically added. Any content page that inherits this master page also inherits the default content

Calling Master Page Content Placeholder in other WebForm

Add  ' MasterPageFile ="~/master1.Master" '   to Page Tag at Top of your Webform

This tells that webform to inherit contents from its master Page and webform can also put its own content within content placeholder avaliable by Master Page

Demo App 

App To use Master Pages in Asp.net

Master Page Code

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="master1.Master.cs" Inherits="WebApplication5.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    This is Master Page

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

      

       

        </asp:ContentPlaceHolder>

    </div>

    </form>

</body>

</html>

Webform Page code

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/master1.Master" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>

<asp:Content runat ="server" ContentPlaceHolderID ="ContentPlaceHolder1"><p>

    <br />

    This is Child Page Inheriting Master Page</p>

</asp:Content>

Description of code :- In @ Page directive we have included the MasterPageFile that implements the Master Pages concept in your web application or website This highly reduces code in websites and webapplications and it reduces redundancy of code

In this code we have called or used the contentPlaceHolder that we have initialized in Master Page we can add contents to this Content Place Holder that is only specific to this page only.

Nesting Master Pages

Download Demo App  :- How To use Nesting Master Pages In Asp.Net

I hope you see the power that master pages provide to help you create templated web applications . so far you have been creating single master page that the content page can sue. Most companies and organisations, however are not just two layers. Many divisions and groups exist within the organization that might want to use variations of the master by, in effect , having a master page within a master page. With ASP>NET , this is quite possible.

How To USE DEMO APP

In this Demo App i have connected contains :-

( i )  master1.master

( ii ) master2.master  // inherit from master1

( iii) Default.aspx  // has master page - master 2

So we have 2 Master Pages and 1 Webform . These two master pages contain all Designing part of webpage and it remains same for full website so it kept in master . Master1 contains Header and Navigation part and Master 2 conatains other Remaining body part of webpage 

Code For Master Page 1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<%--oswd.org--%>

<head runat="server">

    <link href="Styles/style1.css" rel="stylesheet" type="text/css" />

    <title></title>

    f

</head>

<body>

    <form id="form1" runat="server">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

   <%--fgfg--%>

    <td class="shadow_left">&nbsp;</td>

    <td class="header_column">

<table width="100%" border="0" cellspacing="10" cellpadding="0">

      <tr>

        <td class="logo_area">Logo Here </td>

        <td width="300">

          <form id="form2" name="form1" method="post" action="">

  Search the website <br />

            <input name="search_text" type="text" id="search_text" />

            <input type="submit" name="Submit" value="Search" />

          </form>

          </td>

      </tr>

    </table></td>

    <td class="shadow_right">&nbsp;</td>

  </tr>

  <tr>

    <td class="horizontal_column">&nbsp;</td>

    <td class="horizontal_center"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="linkcontainer">

      <tr>

        <td><div class="navigation"><a href="#" class="main_link">Home</a></div></td>

        <td><div class="navigation"><a href="#" class="main_link">Gallery</a></div></td>

        <td><div class="navigation"><a href="#" class="main_link">About</a></div></td>

        <td><div class="navigation"><a href="#" class="main_link">Help</a></div></td>

        <td><div class="navigation"><a href="#" class="main_link">Partner</a></div></td>

      </tr>

    </table></td>

    <td class="horizontal_column">&nbsp;</td>

  </tr>

  <tr>

    <td class="shadow_left">&nbsp;</td>

    <td class="below_header">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum</td>

    <td class="shadow_right">&nbsp;</td>

  </tr>

  </table>

    </form>

     <asp:ContentPlaceHolder ID="contentholder" runat="server">

    </asp:ContentPlaceHolder>

    <tr>

    <td class="shadow_left">&nbsp;</td>

    <td class="bottom_link_container"><p><a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> </p>

    <p>All Right Reserved &copy; 2006 by bprizze<br />

      http://heartlessg.4uhost.info Web Master

    </p></td>

    <td class="shadow_right">&nbsp;</td>

  </tr>

</body>

</html>

Code for Master Page 2 ( master2.master )

<%@ Master Language="C#" MasterPageFile="~/master1.Master" AutoEventWireup="true" CodeBehind="master2.master.cs" Inherits="Masterpages.master2" %>

<asp:Content ID="content" ContentPlaceHolderID="contentholder" runat="server">

    <tr>

    <td class="shadow_left">&nbsp;</td>

    <td class="main_content_box"><table width="100%" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td class="left_content">

            <p>link</p>

            <p>Link</p>

            <p>link</p>

            <p>link</p>

             <p>link</p>

            <p>Link</p>

            <p>link</p>

            <p>link</p>

            <p>Link</p>

            

        </td>

        <td class="body_content" valign="top">

        <asp:ContentPlaceHolder ID="Main" runat="server">

        

        </asp:ContentPlaceHolder>

        &nbsp;</td>

      </tr>

    </table></td>

    <td class="shadow_right">&nbsp;</td>

  </tr>

  <tr>

    <td class="shadow_left">&nbsp;</td>

    <td class="middle_spacer"><div class="bottom_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum</div></td>

    <td class="shadow_right">&nbsp;</td>

  </tr>

</asp:Content>

Code For Default.Aspx

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/master2.Master" CodeBehind="default.aspx.cs" Inherits="Masterpages._default" %>

<asp:Content ID="content" ContentPlaceHolderID="Main" runat="server">

    <h1>Main page</h1>

</asp:Content>