wijpopup 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 popup.

Note: This step assumes that you have created a MVC Tools project. See the Creating an MVC Tools Project topicfor 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="food">
    <img src="http://lorempixel.com/400/200/food/1/" alt="Popup Food!" />
</div>
<div>
    <input type="button" id="Button1" onclick="popupbeside();" value="popup" />
</div>

This markup will add an image and button to the page. When the button is clicked, the image will appear.

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