How to Use the Photo Gallery Template for ASP.NET Web Pages

WebMatrix templates get you started with creating a website. Templates help you in these ways:

  • You get a professional-looking website right away that you can use either without any changes or with just a little customizing.
  • The site includes built-in features like database access.
  • You can use the template as a learning tool that shows you how to use ASP.NET Web Pages to create real-world sites.

The Photo Gallery template creates a personal site where you can share photos. You can create photo galleries, upload pictures, tag pictures, and add comments.

This article walks you through the following:

  • How to create a site from the WebMatrix Photo Gallery template for ASP.NET Web Pages.
  • An overview of the template contents.
  • Suggestions for tasks to get started with the site that’s created by the template.
  • Notes about some of the features in the site.

Create a site from the Photo Gallery template

1. In WebMatrix, select File –> New –> Site from Template Gallery.

2. In the ASP.NET category, select Photo Gallery.

3. In the Site Name box, enter a name and then click Next.

image

Site Contents

When you create a site based on the Photo Gallery template, your site includes the following features:

  • A consistent layout for all pages on the site.
  • Professional look.
  • A CSS-based layout that automatically reformats pages for devices (like phones) that have limited display are.
  • Built-in support for security (login capability). You have to register and log in in order to be able to upload photos and manage them.

The following table lists the folders and files that are created from the Photo Gallery template.

Account folder

This folder contains pages that are used to let people register and log in.

App_Code folder

This folder contains utility programs that are used to help manage photos in the site.

App_Data folder

This folder contains the following:

· A PhotoGallery.sdf database file that contains uploaded photos, photo and gallery information, and membership information.

· Data files for components (NuGet packages) that are installed by default by the template.

bin folder

This folder contains the executable files (DLLs, assemblies) that are part of ASP.NET Web Pages. If you install new components (NuGet packages), the executable files for those components are installed in this folder.

Content folder

This folder contains the.css files that are used by the site. There are separate .css files for the default layout (Site.css) and for layout on mobile devices (Site.mobile.css).

This site also contains jQuery files that are used to render on mobile devices.

Images folder

This folder contains graphics that are referenced in the site layout.

Photo folder

This folder contains the pages that you use to work with individual photos (view, edit, and remove photos) and edit tags.

Scripts folder

This folder contains jQuery libraries. The site uses jQuery files for client-side validation in the registration and login pages.

Tag folder

This folder contains the pages that you use to add and edit tags, and to view photos by tag.

User folder

This folder contains pages that let you edit your user profile and that display your public profile, and to view photos by user.

_AppStart.cshtml file

This page contains initialization code that runs before any page in the site runs. By default, this file is where the database for membership is initialized.

_PageStart.cshtml file

This page contains code that runs during every request before any page in the root folder runs. In this case, the code in this site sets the layout page for all the other pages in the site root.

_SiteLayout.cshtml file

This page defines the layout for all the pages in the site.

_SiteLayout.Mobile.cshtml

This page defines the layout for all the pages in the site when they are requested from a mobile device.

Default.cshtml file

This is the site’s home page. It displays the galleries.

New.cshtml file

This page lets you create a new gallery.

Thumbnail.cshtml file

This page creates the thumbnail images that are displayed on the default page. See Template Notes later in this document for details.

Upload.cshtml file

This page lets you upload photos.

View.cshtml file

This page displays the photos for a selected gallery.

web.config file

This file contains configuration settings for the site.

robots.txt file

This file is used by search-engine crawlers to determine what files in the site to index. For more information, see The Web Robots Pages.

Note Search-engine crawlers usually read and honor the robots.txt file, but the file is not designed as a security measure. Do not use the robots.txt file as a way to try to hide files.

Getting Started Tasks

After creating a site based on the Photo Gallery template, you typically perform the tasks that are described in this section.

Registering on the site

After you’ve created the site, you need to register and log in so that you can work with photos.

1. Run the site.

2. At the top of the page, click the Login link.

3. In the Login page, click the Register link.

4. Enter login credentials and then click Register. After you’ve registered, you’re automatically logged in.

Editing your profile

After you’ve registered, you can edit your profile.

1. Run the site.

2. At the top, click Account.

3. Enter or edit your personal information, and then click Save.

Uploading photos

1. Run the site.

2. Log in, if you haven’t already.

3. At the top of the page, click Galleries.

4. Click the Create a New Gallery link.

5. In the New Gallery page, enter a name and then click Create.

6. In the gallery page, click Upload a Photo.

7. In the Upload Photo page, upload a photo. If you want to upload more than one photo at a time, click the Add more files link to display additional upload boxes.

Note: To remove the note about the 4MB limit, edit Upload.cshtml and remove the element <p class="message info"> that contains the text. For information about how to allow larger files, see "Allowing larger photos" below.

Photos that you upload are visible to everyone. All logged-in users can tag them and comment on them.

Viewing photos, tagging photos, and adding comments

1. Run the site.

2. At the top of the page, click Galleries.

3. Click a gallery to view the photos in that gallery.

4. To see or edit tags or comments, click an individual photo.

Enabling CAPTCHA in the registration page

You can help prevent spam robots (“bots”) from registering at your site by adding a CAPTCHA test to the Account/Register.cshtml page.

1. Sign up for an account at the Recaptcha.org site. The site assigns you public key and a private key.

Note   Recaptcha verification is tied to a specific domain. If you’re testing your site in WebMatrix, be sure to get a set of keys for the localhost domain.

2. Open the Account/Register.cshtml page.

3. In the code, remove the comment markers (//) from the lines that begin with if(!Recaptcha.Validation("PRIVATE_KEY")).

4. Replace PRIVATE_KEY with your private key.

5. In the markup, remove the comment markers (@* *@) from around @Recaptcha.GetHtml("PUBLIC_KEY",theme: "white").

6. Replace PUBLIC_KEY with your public key.

7. Remove the <div> element that contains the text about CAPTCHA verification.

For more information, see Using a CAPTCHA to Prevent Bots from Using Your ASP.NET Web Razor) Site.

Allowing larger photos

By default, the site limits you to uploading photos that are no larger than 4MB. If you try to upload a photo that’s larger than that, you see an error message that says Maximum request length exceeded:

image

You can allow larger photos by changing the site configuration.

1. Open the web.config file.

2. Find the <system.web> element.

3. Inside that element (as a child of it), add an <httpRuntime> element and set the new element’s maxRequestLength value to a size larger than 4096. The size is set as an integer that represents kilobytes (KBs). For example, to change the site to allow photos up to 8MB, add this:

<system.web>
  !-- Other settings here -->
  <httpRuntime maxRequestLength="8192" />
</system.web>

Publishing the site

After you have finished customizing the site, you can publish it so that others can see it. For details, see Introducing ASP.NET Web Pages 2 - Publishing a Site by Using WebMatrix. (Although that article is the last tutorial in a tutorial set, you can follow the instructions provided there.)

Updating packages in the template

The site template includes NuGet packages that are already installed in your site. Occasionally these packages are updated. To see if there are updates, do this:

1. In WebMatrix, open your site and go to the Files workspace.

2. In the ribbon, click the Gallery button.

3. In the NuGet Gallery dialog box, click Installed.

Template Notes

  • Database. The photos you upload are stored in the PhotoGallery.sdf database in the App_Data folder. The database contains tables for the photos themselves, for the gallery information, tags, and comments. The database is also used to store login information.
  • Uploading photos. The Upload.cshtml page shows how to upload photos and store them in the database. In the markup, the FileUpload helper displays the text box and button that you use to find and enter the path to a photo. By default, the helper lets you click a link in order to display additional boxes, which lets you upload multiple photos at once. In the code, the WebImage helpers is used get the uploaded photo and provide a byte array that can be saved in the database. For more information about uploading photos, see Working with Images in an ASP.NET Web Pages (Razor) Site.
  • Getting form values and values from the URL. Various pages (such as /New.cshtml and Account/Register.cshtml) show how to process information that users enter into an HTML form. The Photo/Edit.cshtml page (among others) shows how to read a value that’s passed as part of the URL (like this: /photo/view/id). See also Semantic URLs later in this list.
  • Logged-in users. Users who are not logged in (that is, anonymous users) can view photos and download them. Users who are registered and logged in can upload photos, tag them, and add comments. All logged-in users can access all photos on the site.
  • Thumbnails. Several pages (such as /View.cshtml, Tag/View.cshtml, and Photo/View.cshtml) show thumbnail (reduced-size) versions of the photos you’ve uploaded. The thumbnails are created by invoking a Thumbnail.cshtml page that takes the photo ID as value. The thumbnail page reads the photo from the database, uses the WebImage helper to resize the photo, and then renders the resized photo. The thumbnails can be displayed by using Thumbnail.cshtml/id as the src attribute for an <img> element, like this example from the /View.cshtml page:

<img src="~/Photo/Thumbail/@photo.Id" ... />

There are several versions of the Thumbnail.cshtml file in different folders. Each renders thumbnails in a different way.

  • Semantic URLs. The site folders are organized in a way that lets the site use URLs in a semantic way. There are folders for the various ways that you can view information in the site: photos by gallery; individual photos; photos by tag; and individual users. Each of these functions is represented by a different folder (root, Photo, Tag, and User). Each of these folders has a View.cshtml file that displays the information for that function. The View.cshtml file in turn takes a value that is passed as part of the URL that tells the View page what to display. The following URLs illustrate how this works:
    • /view/id. This URL (the View page in the site root) shows all the photos in the gallery whose ID is id.
    • /photo/view/id. This URL shows the details for the photo whose ID is id.
    • /tag/view/tag. This URL shows all the photos that are tagged with tag.
    • /user/view/id. This URL shows details about the user whose ID is id and the photos that that user has uploaded.
  • Layouts and mobile devices. The template illustrates how to create a different layout for desktop browsers and for mobile browsers. The default layout is created using the _SiteLayout.cshtml and Site.css files. However, if a page in the site is requested from a mobile device, the site automatically uses _SiteLayout.Mobile.cshtml and Site.mobile.css. For more information, see Rendering ASP.NET Web Pages (Razor) Sites for Mobile Devices.
  • User-input validation. The Account/Register.cshtml page validates user input by using the Validation helper. It also validates that a user name is not already in use by making a query to the database; if the user name already exists, the page sets an error using ModelState.AddError, which causes the page to display an error in the Html.ValidationSummary method.
  • Using jQuery. Pages that let you enter information as text (for example, /New.cshtml, Account/Register.cshtml, Account/Login.cshtml, and User/Edit.cshtml) show how to use jQuery for “unobtrusive” client-side user input validation.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!