vb net book.pdf

tag. This code does the same thing as the code

c14.indd 589

12/7/2012 3:41:31 PM

590

x

CHAPTER 14 APPLICATIONS WITH ASP.NET, MVC, JAVASCRIPT, AND HTML

you added to the ASPX page, but it’s much cleaner and easy to read. When you run the application you should see a page similar to the one shown in Figure 14-24.

FIGURE 14-23: Web Form with mixed code and markup running in the browser

FIGURE 14-24: Razor page with mixed code and markup running in the browser

c14.indd 590

12/7/2012 3:41:32 PM

Server-Side Development

x 591

Layout Pages In Web Forms you used master pages to define the overall layout of the site and content pages to define the content of individual pages. Web Pages have a similar concept with a somewhat simplified implementation. Instead of a master page you have a layout page. The name of this page should start with an underscore as the Web Pages infrastructure will not allow users to navigate to pages named this way. The layout page included in the project template is named _SiteLayout.vbhtml. The interesting markup is contained inside the body div tag. Here you have two place holders for content marked by @RenderSection and @RenderBody. (code fi le: _SiteLayout.vbhtml)

@RenderSection("featured", required:=false)

@RenderBody()

One of the content pages included in the project template is Default.vbhtml. This content page is linked to the layout page by the Layout property. Each @Section section defi nes the content for the corresponding @RenderSection in the layout page—in this case it’s the featured section. Note that this section has been marked as optional so it did not have to be defi ned. Finally you have markup outside a @Section section. This content corresponds to the @RenderBody in the layout page (code fi le: Default.vbhtml): @Code Layout = "~/_SiteLayout.vbhtml" PageData("Title") = "Home Page" End Code @Section featured

End Section

We suggest the following:

Database Access Software architecture best practices indicate that you should separate applications into logical layers: user interface, business logic, data access, and data storage. The Web Forms application you just built only implemented the user interface; you didn’t have any business logic to speak of, so you did not implement that layer; you used the pre-created Northwind.Services assembly for data access; and you used SQL Server Express for data storage. There are many benefits to using this kind of logical architecture, but to do so adds some complexity to the application development process.

c14.indd 591

12/7/2012 3:41:32 PM

592

x

CHAPTER 14 APPLICATIONS WITH ASP.NET, MVC, JAVASCRIPT, AND HTML

As mentioned earlier, Web Pages and Razor are designed to be simple, easy to learn, and easy to use. To achieve these goals the general development practice is to build self-contained pages where all the data access, business logic, and user interface needed for a page is included in the page itself. You’ll follow this practice while building this Web Pages application. To be able to connect to a database you need to add a database connection string to the Web.config fi le. Open this fi le and add the element inside the element shown in bold (code fi le: Web.config):

With the connection string configured you’ll now add a page that shows data from the Categories table. Add a new Razor content page named CategoryList.vbhtml and set the page title and layout page to “Category List” and “~/_SiteLayout.vbhtml” respectively (code fi le: CategoryList-Step01. vbhtml). @Code PageData("Title") = "Category List" Layout = "~/_SiteLayout.vbhtml" End Code

Now add the following code to open a connection to the Northwind database and retrieve the CategoryID and CategoryName for each of the rows in the Category table. You can do this inside the existing @Code section or you can add the code inside a new @Code section. Notice the very simple syntax used to perform these operations. The call to the Query method returns an IEnumerable(Of Object), where each object in the collection has properties representing the values of the columns returned from the query. These properties are late-bound so they will not appear in Intellisense (code file: CategoryList-Step01.vbhtml). @Code Dim db = Database.Open("Northwind") Dim categories = db.Query( "SELECT CategoryID, CategoryName FROM Categories") End Code

Now add the markup to show each of the category names in an unordered list. As mentioned earlier, the CategoryName property is late-bound and will not appear in Intellisense (code file: CategoryList-Step01.vbhtml).

Product Categories

@category.CategoryName

The complete page should look like that in Listing 14-1. If you run the application you should see a page similar to the one shown in Figure 14-25 (code fi le: categoryList-Step01.vbhtml). @Code PageData("Title") = "Category List" Layout = "~/_SiteLayout.vbhtml" End Code @Code Dim db = Database.Open("Northwind") Dim categories = db.Query( "SELECT CategoryID, CategoryName FROM Categories") End Code

Product Categories

@category.CategoryName

FIGURE 14-25: Category List page running in the browser

c14.indd 593

12/7/2012 3:41:32 PM

594

x

CHAPTER 14 APPLICATIONS WITH ASP.NET, MVC, JAVASCRIPT, AND HTML

Helpers In lieu of controls, Razor uses Helpers. The two are similar in that they are reusable components that assist you in implementing common functionality, but Helpers are simpler—they do not expose events and do not have a design experience. They weren’t identified as such, but the code you used in the Category List page used Database Helpers. Now you’ll create a page that uses the WebGrid Helper to show product information. Add a new Razor content page named ProductList.vbhtml. Set the page title and layout page and then add code to retrieve the ProductID, ProductName, QuantityPerUnit, and UnitPrice from the Products table in the Northwind database. Your code should look something like this (code fi le: ProductList-Step01.vbhtml): @Code Layout = "~/_SiteLayout.vbhtml" PageData("Title") = "Product List" End Code @Code Dim db = Database.Open("Northwind") Dim sql = "SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice " + "FROM Products " Dim products = db.Query(sql) End Code

Now add the following code to create an instance of the WebGrid Helper, and have it generate the HTML markup representing the grid in the page body (code file: ProductList-Step01.vbhtml). @Code @* Code removed for brevity *@ Dim grid As New WebGrid(source:=products, rowsPerPage:=20) End Code

All Products

@grid.GetHtml( tableStyle:="grid", columns:=grid.Columns( grid.Column("ProductID", "ID"), grid.Column("ProductName", "Name"), grid.Column("QuantityPerUnit", "Unit"), grid.Column("UnitPrice", "Unit Price") ) )

If you run the application you should see a page similar to the one shown in Figure 14-26.

c14.indd 594

12/7/2012 3:41:33 PM

Server-Side Development

x 595

FIGURE 14-26: Product List page running in the browser

Passing Information between Pages Now that you have both Category and Product List pages, you can tie the two together. You can change the items in the category list to links and, when one of the links is clicked, navigate to the Product List page showing the items in the selected category. Start by modifying the code and markup in CategoryList.vbhtml to render a link to ProductList (in Web Pages you do not need to include the extension on the page name in the URL). Add a query string parameter named catid and set it to the current category’s ID (code file: CategoryListStep02.vbhtml). @For Each category In categories @

@category.CategoryName

Next

Back in ProductList.vbhtml you need to check to see if a parameter named catid has been passed to you. If it has then you’ll show the products for the associated category; if it hasn’t then you’ll show all products. You can use the Request object to get the value of the query string parameter. You also need to update the