Skip to main content

How to use MultiView control in asp.net

MultiView and View Server Control
MultiView is an asp.net web server control. View control is also an asp.net web server control. but view control always be contained within multiview control. both multiview and view control act as a container for other controls and markup. only one view can be defined as active view in multiview. multiview ActiveViewIndex property specify the active view within view collections of a multiview. only active view control is rendered to the page.

we can navigate views by setting the multiview ActiveViewIndex property value. ActiveViewIndex property hold the specified view's index number. multiview control can include navigation buttons that we can add to each view.

we can create a navigation button by adding any Button, LinkButton or ImageButton server control to each view. for that we need to set the CommandName and CommandArgument properties of each views. reserved CommandName values are NextView, PrevView, SwitchViewByID and SwitchViewByIndex. NextView and PrevView corresponding CommandArgument have no values. SwitchViewByID CommandArgument value is ID of the view to switch to. SwitchViewByIndex CommandArgument value is index number of the view to switch to.

you can create a multi page form using multiview and view controls. but Wizard control is better for creating a multiple page form that need to fill step by step. multiview and view control provide support similar to the wizard control. wizard has more built in UI elements than multiview control. so multiview is better choice if we want to display view based on condition rather than sequence.

following example source code demonstrate us that how can we use multiview and view controls in asp.net. in this web form we create a multiview control and five view controls within it. each view display a beautiful image using Image server control. we also put a button control on each view to navigate views. when user click the navigation button, the multiview control display next view.
MultiView.aspx

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, System.EventArgs e) {
        if(!Page.IsPostBack){
            MultiView1.ActiveViewIndex = 0;
           }
    }

    void NextImage(object sender, System.EventArgs e)
    {
        MultiView1.ActiveViewIndex += 1;
    }

    protected void Page_PreRender(object sender, System.EventArgs e) {
        Label1.Text = "Beautiful birds images : " +
            (MultiView1.ActiveViewIndex + 1).ToString() +
            " of " + MultiView1.Views.Count.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use MultiView control in asp.net</title>
</head>
<body style="padding:25px">
    <form id="form1" runat="server">
    <div>
        <h2 style="color:MidnightBlue; font-style:italic;">      
            How to use MultiView
        </h2>      
        <hr width="450" align="left" color="Gainsboro" />
        <asp:Label
            ID="Label1"
            runat="server"
            Font-Bold="true"
            Font-Names="Comic Sans MS"
            ForeColor="Crimson"
            Font-Italic="true"
            Font-Size="X-Large"
            />
        <br /><br />
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
                <asp:Image 
                    ID="Image1" 
                    runat="server" 
                    ImageUrl="~/Images/birds1.jpg"
                    Height="300"
                    />
                <br />
                <asp:Button 
                    ID="Button1" 
                    runat="server" 
                    Text="Next Image" 
                    OnClick="NextImage"
                    Font-Bold="true"
                    ForeColor="Navy"
                    Height="45"
                    Width="150"
                    />
            </asp:View>
            <asp:View ID="View2" runat="server">
                <asp:Image 
                    ID="Image2" 
                    runat="server" 
                    ImageUrl="~/Images/birds2.jpg"
                    Height="300"
                    />
                <br />
                <asp:Button 
                    ID="Button2" 
                    runat="server" 
                    Text="Next Image" 
                    OnClick="NextImage"
                    Font-Bold="true"
                    ForeColor="Navy"
                    Height="45"
                    Width="150"
                    />
            </asp:View>
            <asp:View ID="View3" runat="server">
                <asp:Image 
                    ID="Image3" 
                    runat="server" 
                    ImageUrl="~/Images/birds3.jpg"
                    Height="300"
                    />
                <br />
                <asp:Button 
                    ID="Button3" 
                    runat="server" 
                    Text="Next Image" 
                    OnClick="NextImage"
                    Font-Bold="true"
                    ForeColor="Navy"
                    Height="45"
                    Width="150"
                    />
            </asp:View>
            <asp:View ID="View4" runat="server">
                <asp:Image 
                    ID="Image4" 
                    runat="server" 
                    ImageUrl="~/Images/birds4.jpg"
                    Height="300"
                    />
                <br />
                <asp:Button 
                    ID="Button4" 
                    runat="server" 
                    Text="Next Image" 
                    OnClick="NextImage"
                    Font-Bold="true"
                    ForeColor="Navy"
                    Height="45"
                    Width="150"
                    />
            </asp:View>
            <asp:View ID="View5" runat="server">
                <asp:Image 
                    ID="Image5" 
                    runat="server" 
                    ImageUrl="~/Images/birds5.jpg"
                    Height="300"
                    />
            </asp:View>
        </asp:MultiView>
    </div>
    </form>
</body>
</html>
More asp.net examples

Popular posts from this blog

How to use Table in asp.net

Table Web Server Control ASP.NET Table web server control display a table on a web page. It is a .NET web server control so we can program it in server code such as add, remove table row, cell programmatically. TableRow and TableCell web server controls allow us to display content for the Table. Table server control display tabular data and we can format Table server control using it's built in methods and properties. The big difference between HTML table and asp.net Table server control is that we can manipulate Table server control using an object model. Generally we should use Table server control when we intend to add remove rows and cells (columns) programmatically at run time.

Table server control acts as a parent (container) for TableRows controls. Table control's Rows property is a collection of TableRow objects. each TableRow control has a collection named Cells. Cells collection contains TableCell objects.

Actually table server control display the TableCell con…

How to use RadioButton control in asp.net c#

RadioButton web server control RadioButton control lets you make a group of radio buttons with other RadioButton. If you set it's GroupName property same for multiple radio buttons then all radio buttons with same name act as a single group. Within a group you can only select one RadioButton at a time. RadioButton group work as like RadioButtonList. With RadioButton control you can more customize it than RadioButtonList items.

Back color, border color, border style, font names, font bold, font italic, fore color (text color) and many more property help you to design RadioButton. It also support CSS class, theme and skin. Even validation are works with RadioButton control. RadioButton have AutoPostBack property and CheckChanged event. By using those feature you can determine immediately which RadioButton is selected from a group.

This example uses a RadioButton group with two RadioButton. Here we assign AutoPostBack property value to true and setup a CheckChanged event. When …

How to use RadioButtonList control in asp.net c#

RadioButtonList web server control ASP.NET RadioButtonList control enable user to select an item from list. RadioButtonList support data bind programmatically from database. We can also populate it manually by input list item inside RadioButtonList tag. RadioButtonList is a single selection radio button group. RadioButtonList have an items collection. We can determine which item is selected by test it's SelectedItem property.

We can change RadioButtonList design by setting up it's various property as like BackColor, BorderColor, BorderStyle, BorderWidth, CellPadding, CellSpacing, CssClass, Font-Bold, Font-Italic, Font-Names, Font-Overline, Font-Size etc. there are more three properties RepeatColumns, RepeatDirection and RepeatLayout which help you to place list item vertically or horizontally.

RadioButtonList have standard AutoPostBack property. As like other list control RadioButtonList have an excellent event SelectedIndexChanged. So that when someone select an item it…