Multiview Control [ASP.net]

This simple article is about using the Multi View control in ASP.net.

The Multi View control is useful when you have different type of content to be display in one page. Multiview control is an ideal solution for that.

  1. First simply create a new project.
  2. Then drag a MultiView control to the page from the tool box.
  3. Now drag n drop view control from the tool box.
  4. So now you can add any content into this view control (Ex:-Textbox)
  5. You can add many view controls as you like, so that you can have separate content in your page.
  6. For your simplicity, I have shown my Default.aspx page so that you can follow that protoype.

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
    <title>Untitled Page</title>
</head>
<body>
    <form id=”form1″ runat=”server”>
        <br />
        <asp:RadioButtonList ID=”RadioButtonList1″ runat=”server” AutoPostBack=”True” OnSelectedIndexChanged=”RadioButtonList1_SelectedIndexChanged”
            RepeatDirection=”Horizontal”>
            <asp:ListItem Value=”0″>View 1</asp:ListItem>
            <asp:ListItem Value=”1″>View 2</asp:ListItem>
            <asp:ListItem Value=”2″>View 2</asp:ListItem>
        </asp:RadioButtonList><br />
        <br />
        <asp:MultiView ID=”MultiView1″ runat=”server”>
            <asp:View ID=”View1″ runat=”server”>
        <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox><br />
        <br />
        <asp:Button ID=”Button1″ runat=”server” Text=”Button” /> </asp:View>
            <asp:View ID=”View2″ runat=”server”>
                <asp:Calendar ID=”Calendar1″ runat=”server”></asp:Calendar>
            </asp:View>
            <asp:View ID=”View3″ runat=”server”>
                <asp:FileUpload ID=”FileUpload1″ runat=”server” /></asp:View>
        </asp:MultiView><br />
        <br />
    </form>
</body>
</html>

In this example I used a radio button list to display different ‘Views’. You need to provide the handler event for that radioButton list. So poen your Default.aspx.cs and put the code below.using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = Convert.ToInt32(RadioButtonList1.SelectedValue);
    }
}

 Now everything is done, simply run the project. As you select different radio buttons, the page is posted back and different content will be displayed in the same page. cool!

Enjoy!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s