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 datasource.

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 class="ui-widget">
    <input style="width: 400px" id="testinput" type="textbox" class="ui-widget-content ui-corner-all" /><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" />
    <div id="list" style="height: 300px; width: 400px;"></div>
</div>

This markup will add a text box, button, and list. When the button is clicked, the data from a remote data source will appear in the list.

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