News

This blog has been shifted to Innovation Escalator.

Sunday, July 31, 2011

How to use multiview in asp.net ??

Multiview and view were the new controls added in ASP.NET 2.0, these controls are very much useful in making tab like control and may be used to create simple image gallery with previous and next buttons. In this tutorial I will explain you how to use multiview and view as a simple image gallery, the tab control will be published after this tutorial on readers appeal.
Here are the simple steps to start working with multiview and view controls:

STEP 1: You need to just drag and drop the multiview control and the number of views you want inside that multiview. (Note - views can only be taken inside a multiview).
It should appear somewhat like the fig below:



 Step 2: Now you need to set the content of each view control, content can be any thing i.e. simple plain text or images or any other asp or HTML control, here we are building a image gallery so we will use images as our content.
Step 3: As from the name multiview its clear that you can set multiple views to a single control and at a time only one is visible, so now its time to change controls on user choice, i will do it on a button click you may do it on whichever event you like. Firstly on page load event we need to set the first view as a default view, he code of this is written in page load function
 protected void Page_Load(object sender, EventArgs e)
{
          if (!IsPostBack)
          {
                     MultiView1.SetActiveView(View1);
                     Label1.Text = MultiView1.Views.Count.ToString();
           }
}
here MultiView1 is the name of the multiview taken and SetActiveView method is used to set the view in active mode i.e which is visible, here its View1. Here the Label1 is used to take a record currently which view is set in active mode.
now on button click you need to change the active view which can be simply done by SetActiveView(). I have taken two buttons Prev and Next. Prev buttons takes you to the previous image and the next button to the next image in the gallery.
Function on Next Button Click

    protected void Next_Click(object sender, EventArgs e)
    {
           int index = MultiView1.ActiveViewIndex;
           int count = Convert.ToInt32(Label1.Text);
           if (index == 0)
             Prev.Enabled = true;
           index = index + 1;
           MultiView1.SetActiveView(MultiView1.Views[index]);
           if (index+1 == count)
            Next.Enabled = false;
    }
Function on Prev Button Click
    protected void Button1_Click(object sender, EventArgs e)
    {
            int index = MultiView1.ActiveViewIndex;
            int count = Convert.ToInt32(Label1.Text);
            if (index+1 == count)
             Next.Enabled = true;
            index = index - 1;
            MultiView1.SetActiveView(MultiView1.Views[index]);
            if (index == 0)
             Prev.Enabled = false;
    }
The above code uses a label which stores the index of the current active view and the index variable stores the number of views present in that multiview:
int index = MultiView1.ActiveViewIndex;
the above line i.e. ActiveViewIndex() gets the number of views present in a multiview.
Hope you enjoy making your image gallery using a simple multiview control rather that using large javascripts.
Request for source code if needed and tab control tutorial via multiview.

No comments:

Post a Comment