Upload
conor
View
56
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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• Add, delete and change some basic
information on movies
Database TermsTable
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.)
RowsColumn, Field
Primary Key Column Name
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
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
Add some data …
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
Code for the WebGrid Helper
• Razor code, insert between the curly braces {}• Code walkthru
var db = Database.Open("WebPagesMovies");var selectedData = db.Query("SELECT * FROM Movies");var grid = new WebGrid(source: selectedData);
Set the page title to “Movies” inside the <head> element
<head> <meta charset="utf-8" /> <title>Movies</title></head>
More code
• Inside the body element, add the following code:
<h1>Movies</h1> <div> @grid.GetHtml() </div>
<h1>Movies</h1><div> @grid.GetHtml()</div>
Display selected columns
• Replace the @grid.GetHtml() with the following:
@grid.GetHtml( columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ))
WebGrid Column Display
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>
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") ))
Prettier web page
Add Paging
• var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
Web Page with Paging
FINIS(The End)