Creating a simple ASP.NET 4 Web App using Visual Studio 2010

The goal of this end to end walkthrough is to create a really simple ASP.NET 4.0 Web Application which uses SQL Server database and is built using Visual Studio 2010 (VS 10)…  The 11 steps in this walkthrough are:

1. Create a new ASP.NET 4.0 Web Application Project (WAP)

2. Create a simple SQL Server Database using SQL Express

3. Add Tables to the Database and set foreign key relationships

4. Add data to the tables created

5. Add a MasterPage and ContentPage to the ASP.NET 4.0 WAP

6. Modify the Master Page to provide consistent look and feel to the site

7. Add datacontrols like GridView and bind them to SQL Express database

8. Add additional web page and use DataView to display more data

9. Use QueryBuilder to fetch data from multiple tables

10. Use AJAX to refresh only parts of the page rather than complete page

11. Hook up various pages and complete the experience….

To complete this walkthrough you will need Visual Studio 2010 Beta1 which you can download FOR FREE from http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx

Let us get started:

1. Create a new ASP.NET 4.0 Web Application Project (WAP)

Start an instance of Visual Studio 2010 and create a new WAP project by going to File –> New—> Project –> Web –> ASP.NET Web Application as shown below:

Also notice the nice looking VS 2010 new project dialog box…  If you notice at the the left you will also see “Online Templates” and capabilities to search templates…   This will be pretty handy when there will be a bunch of community created templates available…  Anyways for now go ahead and click “Ok” to create our new “1-ClickPublish” project…  After the creation of the project is successful your solution explorer should look as below:

2. Create a simple SQL Server Database using SQL Express

Visual Studio 2010 comes with SQL Server Express edition in build…  I will be using that for the walkthrough purposes although if you have full SQL Server then feel free to use the same…

Add a new “SQL Server Database” by right clicking on the App_Data folder and choosing Add—> New Item

The “Add New Item dialog box” has also got a new look in Visual Studio 2010 just like “Add New Project dialog box”…  I am going to name the database as 1-ClickPublish database, you can feel free to name it anything but do note that it will matter when it will come to deploying this database to remote web server…

3. Add Tables to the Database and set foreign key relationships

To modify this database and add tables to it I will use server explorer… You can open server explorer by going to View—> Server Explorer

By default the Server Explorer will show the connection to the database closed…  You can refresh the connection to open it…

Once you expand the node now you can right click on the tables folder and choose to add new table as shown below

Next we will create simple “Person” table with four columns (ID, FirstName, MiddleName & LastName)…  The ID column and the FirstName column are required and MiddleName + LastName column allow nulls…  For current illustrations I have used ID to be numeric and all the rest as varchars…  I have also set the ID column as an identity column so that we can create a relationship of the Person table with PersonAddress table which we will create next.  The table editor will look as below once you create all these columns correctly…

On clicking save Visual Studio will allow you to name the table which in my case, I will be naming as “Person”…

Similarly we will next create “PersonAddress” table with 8 columns and following details:

• ID | Numeric | Not Null | Identity
• Person_ID | Numeric | Not Null |
• AddressLine1 | varchar (100) | Not Null
• AddressLine2 | varchar (100) | Allows Null
• City| varchar (100) | Not Null
• State| varchar(100) | Allows Null
• Zip | numeric | Allows Null
• Country | varchar (100) | Not Null

Once the table is created it will look as below:

You can also go into both “Person” and “PersonAddress” tables, right click on the ID column and “Set Primary Key”…

Also now right click on the “PersonAddress” table and click relationships…  In the “Foreign Key Relationship dialog box” click the “Add” button to add a new relationship, then on the right side go to the (Name) column and change the name of the relationship to FK_Person_PersonAddress…

Next click on the “…” on the “Tables And Columns Specifications”as selected above… In the specifications dialog box create a relationship between with ID column of Person table as the primary key table and Person_ID column of the PersonAddress table as the Foreign key table and click “Ok”…

4. Add data to the tables created

After the above step you will have your table created, save and close the table designers now to populate the tables with some sample data…. Let us go back to the server explorer to do that… The sever explorer should look as below:

You can now right click on each of the tables and start populating data by clicking “Show table data”… Start populating the data in the Person table first as shown below…

Next populate sample data in the “PersonAddress” table as shown below:

With this the database should be good to go…

5. Add a MasterPage and ContentPage to the ASP.NET 4.0 WAP

Now let us go to the solution explorer and start editing the Web App by adding a simple Master Page to the project… Master page will allow us to maintain a consistent theme across the project…

Right click on the project node and click Add –> New Item…  This time navigate to the Web node and select “Master Page”… Rename the Master page here to Site.Master and click Add…

After adding the master page you can go back to the solution explorer and delete the Default.aspx page… The reason why I am deleting the page is coz it currently does not use the new Site.Master that we created…  

After deleting the Default.aspx and adding the master page the solution explorer will look as below:

Next you can go ahead and right click on the project to Add one more new item… This time add a “Web Content Form” and name it “Default.aspx”  when you do that then the next dialog will allow you to select the master page you would like to use… Select Site.Master as shown in the image below and hit OK as shown below…

With this we have a basic skeleton of a web application created and hooked up… 

6. Modify the Master Page to provide consistent look and feel to the site

I will now open the master page and try add some standard boiler plate content to it as shown below:

The above highlighted text will now appear on every page which will use “Site.Master”…

7. Add datacontrols like GridView to the content pages

Now let us go to Default.aspx and add few controls which will use the database we created earlier…  For this simply open Default.aspx and click on the toolbar to the left and open up the Data controls…  Next, drag and drop a Grid view from the tool box on to the “ContentPlaceHolder1” of Default.aspx as shown below:

There is a switch at the bottom of the code editor to move to the design view… Click that switch and view the grid view in the design view…  The reason for doing this is that design view shows us something we call as Smart tags for grid view… In the Smart tag we will choose to create a new Datasource to tie the grid view to our database…

Do note few quick things like Default.aspx’s design view is now showing us the master page content as well…  Also I have to explicitly select the Grid View and then the top right arrow on it will give me the smart tag options…

The New Data Source dialog will look as below and you need to select Database and click “ok”…

On clicking OK the “SQL Datasource” configuration wizard will kick off… and will look as below:

If you notice 1-ClickPublish.mdf database file will already be pre-populated in the drop down…  Simply select the 1-ClickPublish.mdf and click next… Now name the connectionString as “1-ClickPublishDB” and click next…

In next screen select the FirstName, MiddleName and LastName columns of the database and click “Next” as shown below…

Finally click the “Test Query” button to make sure your query is yielding results as shown below and click “Finish”

Now if you select Default.aspx in the Solution Explorer and Hit Ctrl+F5 then you should see our web application up and running as shown below…

Now let us put some reasonable headings etc to the page by going into the source view of Default.aspx (by clicking the source button at the bottom of the page...

Type in the code as shown below and switch to “Design View” again to preview your page:

The preview should look as below…

Now what we want to achieve is that when user clicks “View Addresses” button we want to be able to show a page with Persons with their Address details… 

8. Add additional web page and use DataView to display more data

For this let us add a new "Web Content Form” called “Address.aspx” which also uses the Site.Master… Once we do so then our solution explorer should look as below:

Let us double click Address.aspx and open it in the “Source View” and this time drag and drop a details view from the toolbar, which will make the page look as below:

Let us switch back to design view and try to add a SQL data source similar to the one we added for Default.aspx… 

9. Use QueryBuilder to fetch data from multiple tables

Although this time we want to be able to show the content of not only the PersonAddress table but also want to get First Name and Last Name from the Person table…  Hence on the “Configure Select Statements” step of the datasource wizard we will try to add a custom SQL Query to the datasource by following below steps:

On clicking next on the dialog you will get an opportunity to select a query builder as shown below:

On clicking the query builder you will be asked to “Add tables”… Add both “Person” and “PersonAddress” tables by clicking the Add button as shown below:

Now the two tables will get added to the query builder… In the query builder now feel free to select the columns you want to display in the detailed view…  Also note how the query builder is building the SQL statements on your behalf…

Click “OK” on query builder and you should be taken back to the SQL Data source configuration wizard

Notice that now the query is populated, click “Next”…  As we did for default.aspx, test your query and make sure that the data is getting retrieved…

You should now be seeing following dialog:

Click “Finish” now… In the “Design View” now click on the “DetailsView” control and click “F4”…. This should launch the properties pane for the “DetailsView” as shown below:

In the Properties of the DetailsView1 control set “AllowPaging”= True… This will allow your page to iteratively move between addresses instead of just showing one address… 

10. Use AJAX to refresh only parts of the page rather than complete page

Now let us switch to the source view and add quick AJAX capabilities to the page so that the entire page does not get refreshed every time you change the pagination on the Details View… To do this put the below specified code to your page…

Once you do this you should be good to test your “Address.aspx” page…  To test your “Address.aspx” page simply select it in the solution explorer and hit “Ctrl+F5”… You should now be able see your page as below:

11. Hook up various pages and complete the experience….

Now finally we want to link the Default.aspx Page to Address.aspx page by click of “View Addresses” button… To do this let us open “Default.aspx” page in Design View and double click the “View Addresses” button… This will open the Default.aspx.cs page with the Button Click event hooked up…  We can now write Response.Redirect(“Address.aspx”); into the event handler as shown below…

With this we now have a fully functional app  connected with backend database… If you now select Default.aspx and hit Ctrl+F5 then you should see the below page":

On clicking the “View Addresses” button you should be able to see the below page with pagination to view addresses one after another:

With you web application should be ready to be deployed…

Hope this walkthrough was useful!!

-Vishal

Database Deployment with Visual Studio 10

Visual Studio 2010 (VS 10) Beta1 was released recently...  You can download VS 10 Beta1 from Microsoft download page….

Do check out the update on Visual Studio features for Web Developers on our team blog…

We have been discussing about a bunch of deployment features previously and today we will discuss about Database Deployment with VS 10….

VS 10 will allow you to deploy your databases both while creating a web package as well as while publishing directly to a web server provided by your hoster…

To catch up on the previous web deployment posts check out the below links:

Web Deployment with VS 2010 and IIS

Web Packaging: Creating a Web Package using VS 2010

Web Packaging: Creating web packages using MSBuild

How does Web Deployment with VS 10 & MSDeploy Work?

Installing Web Packages using Command Line

Web.config Transformation

 

Apart from the “Package/Publish” tab, with VS10 we will now have a new tab called “Deploy-SQL” in the project properties of Web Application Projects (WAPs)

The “Deploy SQL” tab looks like below:

Firstly let us note that this tab is Build configuration aware i.e. you can configure different settings for “Release” vs “Debug” environment… I have set the configuration to “Release”  and Platform to “Any CPU” for the above example…

TIP:  If you are deploying to a hosted environment then you can create different build configurations per hoster e.g. “DiscountASP” or “OrcsWeb”, this way you can configure various Database deployment settings per hoster…  You can use the same principle for various different database servers you are going to even within your intranet…

Anyways, the first grid on “Deploy SQL”  tab looks like below and actually is a MASTER part of MASTER-DETAIL view of your Database Deployment Settings.  Every Database Entry in the grid below is a representative of a group of database settings representing source and destination database information:

i.e. Database Entry (Friendly Name) = Source Database Information + Destination Database Information

My advice would be to create one entry per every destination database you are deploying to…  The reason why I am emphasizing destination database is coz many folks want to deploy more than one source databases to a single destination database…

One classic example of this is when you are using ASP.NET membership or login features then ASP.NET automatically creates ASP.NET DB in your project AppData directory, apart from this people also like to create a separate ApplicationDB which has the application specific business data.  As you can imagine this results into two different source DBs.  When you are trying to deploy to a shared hosting environment then many times you are paying per database to your hoster and the obvious thought “my ApplicationDB does not conflict with ASP.NET DB in anyway, I am happy to have both of the DBs to go to the same destination DB without paying for two databases”…  In such a situation you would want to create one database entry in the grid above for every destination connection string that you have.

The “Add” button at the bottom allows you to add a “Friendly Name” for your Database Entry…  If you would like to go to more than one destination database you can feel free to add as many Database Entries in the grid above as you want… For simplicity of tracking I would recommend using your connectionString name as the Friendly Name in the grid above.

As you might have already noticed each entry in the grid also has a check box next to it…  The reason why this check box is provided is so that once you configure the database entry then you do not have to completely remove it  by clicking “Remove” button (and loose all the configured data)… If you do not want to include a  particular database Entry (friendly name) in a particular deployment scenario you can simply exclude it by un-checking the checkbox. 

In order to permanently “Remove” the database entry you can select the entry to be removed and can click the “Remove” button….

Let us now take a look at the details of a database entry (e.g details of “productsDB” in the above example).  As I mentioned above the details are going to be broken down into two major categories…

1. Destination Database Information

2. Source Database Information

_____________________________________________________________________________________________________

Destination Database Information: This section looks as below:

It is relatively simple, coz all it contains is connection string for the destination database… Typically when you get a hosted account your hoster will send you the connection string of your hosted database in an email.  This connectionString should go into the above text box.

This field is kept optional and the reason behind it is that if you are using Web Packaging as a model for your deployment and are likely to hand over the web package to your system administrator or someone who will provide connectionString at install time then you can feel free to leave this field empty. 

Do note that if you are directly publishing to a hoster (i.e. not packaging) and you have left this field empty then you will get an error during publishing.

__________________________________________________________________________________________________

Source Database Information: This section looks as below:

The first thing you will see in the Source Database Information is a check box which indicates “Pull data from an existing database” … If you have a local SQL Server database (SQL 2005 or 2008) which you are using for development then this will allow you to extract your database to deploy to the destination database (mentioned in the section above)….

The first setting under “Pull data from an existing database” is Connection string for the source database… This text box is enabled only when you check the check box for “Pull data from…”  You can also click the “…” button next to the connection string text box which will launch the connection String builder dialog as below:

This dialog can help you easily create the connection String for your local database…

The next set of controls under the source connection String text box allow you to determine what kind of SQL Script would like to generate from your source database.  Currently there are two options available…

Schema Only  - Choosing this will only script the schema of your source database

Complete Database – Choosing this will script both schema and data of your source database

On your dev SQL Server it is likely that you might have some test data, in that situation you would want to choose “Schema Only” option which will only pick up the DB schema leaving out the data…  On the other hand if you choose complete database everything from your source database will be scripted…

Insider Note:  VS 10 Database Deployment is using SQL Management Objects (SMO) behind the scenes to script your database…  SMO is a tried and tested API for scripting huge databases… scriptSchema & scriptData are SMO scripting options which Visual Studio is setting when you choose one of the options above…

The next check box is “Exclude object with no schema information” which will give you further fine grain control on scripting your database.  If you do not care about schemaQualify feel free to uncheck this checkbox…

Database Source Scripts -  You might have noticed that in this section there is already an entry called “[Auto-generated Schema Only]”… This entry is added to the source database scripts as soon as you check the “Pull data from an existing database”… At the bottom of Database Source Scripts grid you will notice “Add Script” and “Remove Script” button…  These buttons will allow you to add & remove extra .SQL scripts as your source…

Most of the times developers or DBAs create .SQL scripts to deploy databases…  These custom .SQL scripts can be added and ordered in the grid (and thereby during deployment) using the up and down arrows…  The “[Auto-generated Schema Only]” is a representative of the script that VS will automatically generate from your source database, it is added to the grid so that you can order it up and down along with the rest of the .SQL scripts that you might want to add…

Also note that if you are generating your .SQL scripts via tools like Visual Studio Database Edition (Data Dude) or Red Gate then you can add those scripts here to be included in your web package as well. 

NOTE: There is a way to set up automated build and deployment environment in which you can collect .SQL scripts from Data Dude or Red Gate and provide to VS 10 during web deployment.  I will cover this topic separately in a different blog post…

_________________________________________________________________________________

The last section of the “Deploy SQL” tab is a place for you to provide Database Deployment notes so that you can note specific steps you took or scripts you used while deploying databases; this is purely for your reference purposes…. The deployment notes section looks as below…

Once you have provided all of this information you are good to deploy your databases using Visual Studio 2010 Web Deployment…

Web Packaging  + DB Deployment

After setting up your DB deployment as shown above you can now right click on your project and hit Package –> Create Package as shown below…

The package created as a result will contain your database…  You can read details about creating and installing the web packages below:

Web Packaging: Creating a Web Package using VS 2010

Web Packaging: Creating web packages using MSBuild

Installing Web Packages using Command Line

 

Web Publishing + DB Deployment

Once you set up the DB then not only will it get included in Web Packages but will also be available to be deployed via Publishing…  You can publish you project by right clicking on your project and hit Publish as shown below…

 

I will soon write a detailed post on how to use the new “Publishing” features of Visual Studio 2010…

Hope this information was useful…

-Vishal