Dynamic Web Sites in ASP.NET

In this tutorial we gonna cover how to create a dynamic web using ASP.NET. This is a very lovely topic for everyone who's interested in creating advanced web sites.

You might be wondering why you would need a dynamic website. You can that all modern websites such as yahoo or msn becomes more and more dynamic. Web site which adopts its look according to visitor's needs can provide better service. Further more, dynamic websites can save your clients from suffering to accomplish some tasks that only developers can do.

Now let's get started. There is sample Dynamic Web Site project, used in this tutorial. Of course, you can start with the new project. In that case, open your visual studio, and create a new website. Call it "DynamicWorld" and choose "visual basic" as the default language for our project.
Now let's suppose we have a page that support multiple languages, say French, English and Spanish. And it comes that the administrator want to control what languages appear on his site. Therefore, we will need to create a back end application where the administrator can activate languages at any time he wants.
Now before we implement the backend page, we need to create a database to retrieve the data from it. In this example, we will use SQL server 2000.
Open your SQL Server 2000 Enterprise Manager, and create a new database, call it "DynamicWorld".
Expand the database you just created, and right click on tables, and select Create Table. Design the table as in the following image:

Save the new table with the name "Flags". Now we need to fill one record in this table. To do this, right click on the table you just created, select "open table" -> "select All Rows". set all values in the first row to zero.

Now we created everything we need concerning our simple database. We need to implement the back end page that the administrator will have access to.
In general, this page must be protected by a username and password, but since this examples illustrates the "Dynamic" issues, then we will skip the username and password section in this lesson.
Create a new folder, and call it "Admin". To do this right click on the solution and select "New Folder".

Right click on the folder and select Add New Item. A Dialog box appears asking you to choose a template, choose Web Form and leave the default options.

This is the page that the administrator will use to control the front page. Design the page to be similar to the following image.

Nothing much, just few labels and checkboxes and a single button... call the checkboxes as follow: "chkEnglish", "chkFrench" and "chkSpanish". Set your button's name to "btnSubmit".

Now it's time to start some coding. Double click on the page to handle the OnLoad event. Write the following:

        If Page.IsPostBack = False Then

            Dim con As New System.Data.SqlClient.SqlConnection
            con.ConnectionString = "data source=.;initial catalog=DynamicWorld;integrated security=sspi;"
            Dim adp As New System.Data.SqlClient.SqlDataAdapter("select * from Flags", con)
            Dim dt As New System.Data.DataTable
            adp.Fill(dt)

            If dt.Rows(0).Item("English") = 0 Then
                chkEnglish.Checked = False
            Else
                chkEnglish.Checked = True
            End If

            If dt.Rows(0).Item("French") = 0 Then
                chkFrench.Checked = False
            Else
                chkFrench.Checked = True
            End If

            If dt.Rows(0).Item("Spanish") = 0 Then
                chkSpanish.Checked = False
            Else
                chkSpanish.Checked = True
            End If

        End If

First the postback issue is very important, the goal of this page is to load the current languages that are selected by the administrator. So the postback check if the page is loading for the first time, this is very important because the administrator will be able to modify the values, so we don't want this code to be executed everytime the user hits "Submit".

We created a connection using the System.Data.SqlClient namespace. In the connection string we set the database name that we're dealing with "DynamicWorld" in our case.

"adp" variable is the SqlDataAdapter that we used to connect to the database with. The SqlDataAdapter is very useful, it connects to sql server, open the database, retrieve the informations and then close the database.

After we made several checks, if the record in the first row of the database is set to zero (depending on the column), then the checkbox is cleared, otherwise (actually if it's set to 1 as we will see later on), the checkbox will be checked.

Now it's time to change the records, to do this, double click on the Submit Button to enter to the code. Write the following:

        Dim con As New System.Data.SqlClient.SqlConnection
        con.ConnectionString = "data source=.;initial catalog=DynamicWorld;integrated security=sspi;"
        Dim myCommand As New System.Data.SqlClient.SqlCommand

        Dim myFrench, myEnglish, mySpanish As Integer

        If chkFrench.Checked = True Then
            myFrench = 1
        Else
            myFrench = 0
        End If

        If chkEnglish.Checked = True Then
            myEnglish = 1
        Else
           myEnglish = 0
        End If

        If chkSpanish.Checked = True Then
            mySpanish = 1
        Else
            mySpanish = 0
        End If

        myCommand.CommandText = "update Flags set Spanish=" & mySpanish & ", French=" & myFrench & ",English=" & myEnglish
        myCommand.Connection = con

        con.Open()
        myCommand.ExecuteNonQuery()
        con.Close()

The Command is used here instead of the SqlDataAdapter, because we're inserting or updating data, while the use of SqlDataAdapter is mainly aimed to retrieve data from the database. Note that we had to open the database, execute the query, and then close the database again.

Now it's time to implement the front page. here's the three flags we gonna use:

Go to your front page (named Default.aspx), click on the source tab, and in the source, place the following HTML code inside the form tag:

Note that this is a dynamic table and we're going to create the content of this table at runtime.
Go back to Design view, and double click in the middle of the page to call the "onLoad" event of this page, write the following:

        Dim con As New System.Data.SqlClient.SqlConnection
        con.ConnectionString = "data source=.;initial catalog=DynamicWorld;integrated security=sspi;"
        Dim adp As New System.Data.SqlClient.SqlDataAdapter("select * from Flags", con)
        Dim dt As New System.Data.DataTable
        adp.Fill(dt)

        If dt.Rows(0).Item("English") = 1 Then
            Dim myRow As New HtmlTableRow
            Dim myCell As New HtmlTableCell
            myCell.InnerHtml = "<img src=English.jpg />"
            myRow.Cells.Add(myCell)

            myTable.Rows.Add(myRow)

        End If

        If dt.Rows(0).Item("French") = 1 Then
            Dim myRow As New HtmlTableRow
            Dim myCell As New HtmlTableCell
            myCell.InnerHtml = "<img src=French.jpg />"
            myRow.Cells.Add(myCell)

            myTable.Rows.Add(myRow)

        End If

        If dt.Rows(0).Item("Spanish") = 1 Then
            Dim myRow As New HtmlTableRow
            Dim myCell As New HtmlTableCell
            myCell.InnerHtml = "<img src=Spanish.jpg />"
            myRow.Cells.Add(myCell)

            myTable.Rows.Add(myRow)

        End If

Et Voilà. Now our simple page should be working amazingly. If you activate the French and Spanish Languages from the Admin section, you will get result in a page similar to this:

Now it's time to try it yourself. This is the basic idea behind creating a dynamic website, you can make alot more huge sections that are dynamic, but the concept is pretty much the same. Happy Coding!

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback |