Part III: Enhancing the Interface and User Experience in VS .NET

Paint QR Code in VS .NET Part III: Enhancing the Interface and User Experience

To test the no data message at runtime, follow these steps: 1 Configure the data source so that no items are returned You can do so by wiping all the records out of the database or by creating a select statement that you know won t return results 2 Set the ListView control s InsertItemPosition property value to None This step is necessary because the ListView ignores the EmptyDataTemplate when InsertItemTemplate is enabled

Although not required for this example, the <ItemSeparatorTemplate> generates the markup that goes between items The separator usually delimits rows in a grid The following markup adds a vertical block between items in the sample project:

<ItemSeparatorTemplate> <li> <div class= OneMovie style= width:1px; background-color:Silver > </div> </li> </ItemSeparatorTemplate>

If you run the code in this section without the styles, you see one long, odd-looking bulleted list The page is functional in that you can edit and delete items But, without a better layout, who would want to use it

Two style rules, MovieList and OneMovie, are critical to the layout because they handle the alignment and remove the default list item bullets Follow these steps to add the basic formatting to the ListView elements: 1 Open julielistviewaspx in Source view 2 In the <style></style> area (add the tags if they don t exist), add the following style class for the MovieList and <li> tag:

MovieList li { display: inline; float: left; margin-bottom: 15px; margin-left: 15px; }

The preceding uses display:inline and float:left to change the list items (<li>) from a vertical to a horizontal display 3 Add a class named OneMovie to create a 100-pixel by 175-pixel boxlike container out of the <div> tags embedded in the <li> item:

OneMovie { background: #b9d3ee; border: #648abd 2px solid; color: maroon; font-size: small; height: 100px; padding: 4px; width: 175px; }

With the preceding code, the list items adjust and flow as you resize the browser If you d rather constrain the items to a fixed width, put the ListView control inside a container tag:

I haven t shown the remaining style classes because they don t control the layout You can download them from the book s Web site

The ASPNET DataPager control lets users deal with data in small chunks by stepping through it one page at a time You can set the number of items per page and the pager appearance The built-in navigation options are Next/Previous buttons and numeric paging Follow these steps to add paging to this chapter s ListView sample:

1 Open julielistviewaspx in Source view 2 From the Toolbox, drag a DataPager control from the Data section and drop it before the closing </form> tag 3 In the DataPager control s Properties window (F4), in the Fields property, click the ellipsis button () The Fields dialog box appears 4 In the Available Fields area, click Numeric Pager Field, click Add, and then click OK The Fields dialog box closes and you return to the Properties window 5 Back in the Properties window, set the PagedControlID to the name of the ListView control that you want paged, usually ListView1 6 Set the PageSize property value to the number of items that should appear on the page at one time, such as 5 When included in a <div> tag for style and formatting, the preceding steps create the following markup:

<div class= datapager > <asp:DataPager PageSize= 5 ID= DataPager1 PagedControlID= ListView1 runat= server > <Fields><asp:NumericPagerField /></Fields> </asp:DataPager> </div>

To position the DataPager, try this style:

datapager { clear: both; display: block; font-size: medium; text-align: center; }

You can also put the DataPager control inside the ListView control s required <LayoutTemplate> area In that case, you don t need to designate the PagedControlID property because the DataPager defaults to paging its container, which is the ListView