Tải bản đầy đủ - 0 (trang)
A Simple ASP.NET Web Forms–based Web Application Using HTML5

A Simple ASP.NET Web Forms–based Web Application Using HTML5

Tải bản đầy đủ - 0trang

chapter 1 ■ Overview of HTML5 and ASP.NET 4.5



Add three folders to the application: Images, Media, and Scripts. These folders store images, media

files (audio/video), and script files, respectively. Place a few MP3 audio files and MP4 video files in the

Media folder. Also copy jQuery and Modernizr library files into the Scripts folder. Figure 1-21 shows the

Solution Explorer after setting up these folders.



■ Note  If you haven’t downloaded the latest versions of the jQuery and Modernizr JavaScript libraries yet, you can

do so by visiting the respective web sites (http://jquery.com and http://modernizr.com). Keep a copy of

these files handy, because you use them in the examples throughout this book. You can also access them from the

Microsoft Content Delivery Network (CDN); that way, you don’t need to maintain a local copy of the files. Visit

http://www.asp.net/Ajaxlibrary/cdn.ashx for more details.



Figure 1-21. Solution Explorer with script, audio, and video files



Adding a Master Page and a Content Page

After you create the project, add a master page to the web application using the Add New Item dialog

(Figure 1-22).



21



www.it-ebooks.info



chapter 1 ■ Overview of HTML5 and ASP.NET 4.5



Figure 1-22. Adding a master page

Name the master page MasterPage.master, and add the markup shown in Listing 1-4.

Listing 1-4. Markup from MasterPage.master

<%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”MasterPage.master.cs”

Inherits=”Example_03.MasterPage” %>







Welcome to my HTML5 web site!

























22



www.it-ebooks.info



chapter 1 ■ Overview of HTML5 and ASP.NET 4.5











Notice that the markup shown in Listing 1-4 uses several HTML5-specific tags mentioned earlier in

Table 1-1. Also notice that the jQuery and Modernizr script files are referenced in the master page so that

not every content page has to refer to them again. As you enter the markup, notice how Visual Studio

IntelliSense shows HTML5-specific tags, making your job easy.

Now add a new web form with a master page using Add New Item dialog, and select

MasterPage.master as its master page (Figure 1-23).



Figure 1-23. Adding a web form with master page

Next, add the markup shown in Listing 1-5 to Default.aspx.

Listing 1-5. Markup for Default.aspx

<%@ Page Title=”” Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/MasterPage.Master”

CodeBehind=”Default.aspx.cs” Inherits=”Example_03.Default” %>


runat=”server”>



Play random Audio and Video files!









23



www.it-ebooks.info



chapter 1 ■ Overview of HTML5 and ASP.NET 4.5




























The markup shown in Listing 1-5 renders two buttons, one