1 / 20

WebMatrix 3

WebMatrix 3. Module 3 - Databases. Objectives. Build a database and database tables Add data to a database Display data from a database on a web page Run SQL commands Customize the WebGrid helper. The Web Application. A Movie tracking app

conor
Download Presentation

WebMatrix 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WebMatrix 3 Module 3 - Databases

  2. Objectives • Build a database and database tables • Add data to a database • Display data from a database on a web page • Run SQL commands • Customize the WebGrid helper

  3. The Web Application • A Movie tracking app • Add, delete and change some basic information on movies

  4. Database Terms Table Primary Key Column Name Column, Field Rows A database may contain many tables. A Table is a collection of rows. A Row is a collection of columns. Column contents are homogeneous (strings, numerics, boolean, etc.)

  5. Creating a database • Open WebMatrix • Create an Empty Site called WebPageMovies • Click on Databases in the left pane • Click on New Database in the Ribbon • WebMatrix creates WebPageMovies.sdf database

  6. Create a Table • In the ribbon, click New Table. • Enter “Movies” as the Table Name • Design the columns by entering data as shown below (be exacting – read your work) • Ctrl+S or Save in Quick Access

  7. Add some data …

  8. Display data with the WebGrid Helper • Click the Files workspace in the left pane • Note the App_Data folder created by WebMatrix • This is where the .sdf file you created resides • Create a new file • New (in ribbon) • Choose cshtml file type to create • Name the new page “Movies.cshtml” • Note the skeleton code generated automatically

  9. Code for the WebGrid Helper • Razor code, insert between the curly braces {} • Code walkthru vardb = Database.Open("WebPagesMovies"); varselectedData = db.Query("SELECT * FROM Movies"); var grid = new WebGrid(source: selectedData); Set the page title to “Movies” inside the <head> element <head> <metacharset="utf-8"/> <title>Movies</title> </head>

  10. <h1>Movies</h1><div> @grid.GetHtml() </div> More code • Inside the body element, add the following code: <h1>Movies</h1> <div> @grid.GetHtml() </div>

  11. Display selected columns • Replace the @grid.GetHtml() with the following: @grid.GetHtml( columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ) )

  12. WebGrid Column Display

  13. Change the look of the grid • Add the following <style> element to the <head> tag: <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } .alt { background-color: #E8E8E8; color: #000; } </style>

  14. Change the look of the grid … • Change the grid.GetHtml() to the following: @grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ) )

  15. Prettier web page

  16. Add Paging • var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

  17. Web Page with Paging

  18. FINIS(The End)

More Related