Pages with Multiple Views in ASP.NET
M.SarulathaAssistant ProfessorDept. of CA.,JJC.
From time to time, it's useful to
gather controls together in several panes and give the user the opportunity to
page through the panes. During the lifetime of ASP.NET 1.0, Microsoft released
several rich dynamic (though officially unsupported) controls that emitted
DHTML instead of regular HTML. A trio of these controls, the TabStrip, the
MultiView (an older version), and the PageView, worked together to form
essentially a set of tabbed panes.
These controls aren't available in
ASP.NET 2.0; however, two controls-the MultiView and the View-go a long way
toward providing similar functionality. The MultiView acts as a container for
Panel-like controls (View controls). The MultiView includes support for paging
through the various Views held within it. The MultiView shows a single View at
a time.
The following exercise provides an
example that shows how the MultiView and the View controls work together.
Using the MultiView and View controls
1.
Add a new Web
form to the ControlPotpourri site. Name it UseMultiview. You'll add a MultiView
to this form and then add some Views to it.
2.
Add a MultiView
to this Web form.
3.
The main
purpose of the MultiView is to manage a set of Views. To add a View to a
MultiView, pick it up and drop it inside the MultiView. Add three Views to the
Web form like so:
Add some content to each of the Views. You
can think of the Views very much like panes. In this example, the first view
includes a TextBox and a button. The second view includes a DropDownList, and a
PalindromeCheckerCompositeControl from Tutorial 5. The following graphic
illustrates how the Views look in the designer.
To cause the MultiView and the first View to show up, set the
ActiveViewIndex property to 0 to show the first pane.
Add some controls to navigate between the Views in the MultiView. Add
two buttons to the bottom of the form. Call them Previous and Next-they'll be
used to page through the Views.
Add event handlers for the buttons by double-clicking on each of them.
Add code to the page through the Views. This code responds to the button
clicks by changing the index of the current View.
protected void ButtonPrev_Click(object
sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex == 0)
{
MultiView1.ActiveViewIndex = 2;
}
else
{
MultiView1.ActiveViewIndex -= 1;
}
}
protected void ButtonNext_Click(object
sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex == 2)
{
MultiView1.ActiveViewIndex = 0;
}
else
{
MultiView1.ActiveViewIndex += 1;
}
}
Compile the project and browse to the Web page. Pressing the navigator
buttons will cause post-backs to the server, which will render the individual
views. The following graphic shows how the MultiView and View number 3 appear
in a browser.
As you can see, the MultiView and the
View classes act as panes that you can swap in and out. They represent a great
way to manage the surface area involved in collecting large amounts of data.
We'll see another version of this kind of control when we look at the Wizard
control in conjunction with the session state.
Comments
Post a Comment