Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Create a Data-Driven Dynamic Web Page

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [] Hello and welcome to the 9-part "How do I" video series on Microsoft WebMatrix. You are currently watching part 5 of the series, "How do I: Create a Data-Driven Dynamic Webpage in WebMatrix?" In this example, we will demonstrate how to create a SQL server compact database in WebMatrix with a table that contains the data, and then write the code to retrieve the data from the database and display it in a web browser. Before we start creating a database, let's have a look at the final result of part 4 of the series. The page is showing the header, footer, and content with different layouts applied to it. Now let's begin with creating a database for the movie site. To do this, in the left pane of the window click the database work space. Next click add a database to your site in the center of the window. Based on the site name a database named Movies.stf gets created. Next let's add a table to the database. To do this select the new table tool in the ribbon on the top that displays various tools to manage the database. As a result, a new table is created and is opened in the column editor. The column editor is used to create new columns within the database table. Next let's add some columns to the database. First let's create the column ID. The ID is simply the identifier for a particular record. Now assign the value of the data type for this column as bigint and set the value of the Is Identity and is Primary Key attribute as true. Similarly, name the second blank row as name and assign the value of the data type as intext. Then name the third blank row as Release Year and assign the value of the data type as bigint. Finally, name the fourth blank row as Category and assign the value of the data type as intext. After creating all of the columns click the save button in the title bar to save the table. A dialog box opens up asking for the name of the table. Here name the table as Favorites and click Ok. After creating the table, let's add some data to the table. To do this navigate to the database explorer and double-click the favorites table. The favorites table opens up without any data. Next place the cursor into the Name field of the table and give it a value. Then press the Tab key on the keyboard to move the cursor to the next field named ReleaseYear. Give it a value, then press the Tab key again and enter some value in the last field, Category. Repeat this same process 4 times to enter to enter the details of some movies. Until now, we have seen how to create a database table and fill it with some data. Next let's see how to access the database table in various dynamic web pages. To do this, click the files workspace in the left pane of the window, then create a new CSHTML page and name it dataMovies.cshtml. After this replace all the code in the page with the static HTML that we have been using for the movies div. Next let's introduce this page with the movies database. To do this enter some code at the top of the dataMovies.cshtml. This code would tell the server to open the movies database and get all the records from the database table. After this remove the static HTML code from the movies div. Then add some code using the Razor syntax to display the details of the movies from the database table named Favorites. Now run this page in the web browser to see the result. The details of all the movies are shown. As you know, the page is dynamic and loads the movies based on the data in the database. So let's add another movie to the database and see what happens. To do this navigate back to the database editor, open the Favorites table, and then add a new row of data. Then run the page in the web browser. It shows a similar result as earlier along with showing the details of the new movie as well. This sample application shows how you can create and manage a SQL server compact database in WebMatrix to make the website more dynamic and data-driven. Thanks for watching the video, hope you enjoyed it, and see you next time. [Microsoft] [] []

Video Details

Duration: 4 minutes and 37 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Sep 26, 2013

Part 5 is all about data, where you’ll learn how to use a database in your web page, and make it more dynamic.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.