wijgallery Step 1 of 3: Setting up the View

In this step, you'll begin by setting up the view. You'll add content to the gallery.

Note: This step assumes that you have created a MVC Tools project. See the Creating an MVC Tools Project topic for more information.

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="wijgallery">
    <ul>
        <li><img src="http://lorempixum.com/750/300/sports/1" alt="Sports 1" />
        <span>Word Caption 1</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/2" alt="Sports 2" />
        <span>Word Caption 2</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/3" alt="Sports 3" />
        <span>Word Caption 3</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/4" alt="Sports 4" />
        <span>Word Caption 4</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/5" alt="Sports 5" />
        <span>Word Caption 5</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/6" alt="Sports 6" />
        <span>Word Caption 6</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/7" alt="Sports 7" />
        <span>Word Caption 7</span></li>
        <li><img src="http://lorempixum.com/750/300/sports/8" alt="Sports 8" />
        <span>Word Caption 8</span></li>
    </ul>
</div>

This markup will add the gallery content to the page.

In this step, you created the View. In the next step, wijgallery Step 2 of 3: Initializing the Widget, you'll add script to initialize the widget.