The Artist Web Form

The artist page has been added to The World of Art web app. The Artist Page was developed using an ASP.NET WebForm component in Visual Studio 2010.

This Artist page demonstrates the implementation of three user interface controls;

  • asp:DetailsView
  • asp:GridView
  • asp:SqlDataSource

These are server side controls which use the view state and post back model. More information on the programming model is available at the ASP.Net community. The SQL data source control handles database connection and data retrieval tasks. The detail view provides a single row view of the database table. The grid view provides a multi-row view in a spreadsheet style. Learn more at Introduction to ASP.NET Controls

As you can see, the Artist page automatically inherited the look and feel of the Master page, which comes with the Web app template in Visual Studio 2010. This was done by making the Artist page a subordinate of the Master page. I also used cascading style sheet classes to control the appearance and positioning of elements on the page, avoiding in-line sytling as much as possible. We will definitely cover Master Pages and Cascading Style Sheets in future posts.

Click on the following image to see the detail view and the grid view user interface controls. This is a snapshot of how these controls look in the visual designer, in Visual Studio 2010.  You can also see the SQL data source control way at the bottom. This control is used specifically for data access. See more information on basic data access in web page.

Web page development using an ASP.Net Web From

ASP.NET Web From

Click on the next image to see the XHTML source code of the detail view and the grid view. You will see that the detail view and grid view are both data bound to the SQL data source control. See more information on Data Bound Web Server Controls.

Source view of Detail View and Grid View

Source view of ASP.NET Web form to render artist content

The next image illustrates the source code of the SQL data source control. The connection string property, and a select command property, are utilized in this example. The SQL data source control retrieves data from the database using an SQL SELECT statement, which you can customize to your requirements. The SQL data source control also manages connecting and disconnect from the remote database. The actual connection string, and the key to the connection string, are stored in the connection string element of the Web Configuration file. We will cover several topics related to the Web Configuration file in future posts.

SQL Data Source Control

The SQL Data Source Control

2 thoughts on “The Artist Web Form

  1. Pingback: Artist Content Added to The World of Art Web App | The Lexicon of Software

  2. Pingback: Evolution of the User Interface | The Lexicon of Software

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">