Example of Multiview control in asp.net Or How to use Multiview control in asp.net

Introduction: In this article today I am going to explain how we can use the multiview control in asp.net.

 In the previous article I have explained Explain hidden fields in asp.net with example, Explain Querystring in asp.net with example, Advantages and Disadvantages of Querystring, Explain cookies in asp.net OR Explain cookies with example in asp.net and Pass multiple variables using Querystring in asp.net .

Implementation:

We use the multiview control to create the multipage form and divide the content of a page into different groups.

HTML Markup:

    <asp:MultiView ID="MultiView1" runat="server">

        <asp:View ID="firstview" runat ="server">

        <table>

        <tr><td colspan="2"><strong>Enter Personal Detail</strong></td></tr>

        <tr><td></td><td></td></tr>

        <tr><td>First Name:</td><td>

            <asp:TextBox ID="frstname" runat="server"></asp:TextBox></td></tr>

            <tr><td></td><td></td></tr>

         <tr><td>Last Name:</td><td>

             <asp:TextBox ID="lastname" runat="server"></asp:TextBox></td></tr>

              <tr><td></td><td>

                  <asp:ImageButton ID="imgnextbutton" runat="server"

                      ImageUrl="~/images/actions_go_next.png" Height="37px" Width="44px"

                      onclick="imgnextbutton_Click" /></td></tr>

                      </table>      

        </asp:View>

        <asp:View ID="secondview" runat ="server">

        <table>  

         <tr><td colspan="2"><strong>Address Detail</strong></td></tr>

        <tr><td></td><td></td></tr>    

        <tr><td>Address:</td><td>          

            <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>          

        </td></tr>

        <tr><td></td><td></td></tr>

         <tr><td>City:</td><td>

             <asp:DropDownList ID="ddlcity" runat="server">

                 <asp:ListItem>Delhi</asp:ListItem>

                 <asp:ListItem>Kolkata</asp:ListItem>

                 <asp:ListItem>Mumbai</asp:ListItem>

             </asp:DropDownList>

         </td></tr>

          <tr><td> 

              <asp:ImageButton ID="imgpreviousbutton" runat="server"

                  ImageUrl="~/images/actions_previous_go.png" Height="37px" Width="44px"

                  onclick="imgpreviousbutton_Click"/></td><td>

              <asp:ImageButton ID="imgnextbutton1" runat="server"

                  ImageUrl="~/images/actions_go_next.png" Height="37px" Width="44px"

                  onclick="imgnextbutton1_Click" />

              </td></tr>

              </table>      

        </asp:View>

        <asp:View ID="finalview" runat ="server">

        <table> 

         <tr><td colspan="2"><strong>Qualification Detail</strong></td></tr>

        <tr><td></td><td></td></tr>

        <tr><td>Highest Qualification:</td><td>

            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td></tr>

            <tr><td></td><td></td></tr>

         <tr><td>Passing Year:</td><td>

             <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td></tr>       

              <tr><td>

                  <asp:ImageButton ID="imgpreviousbutton1" runat="server"

                      ImageUrl="~/images/actions_previous_go.png" Height="37px" Width="44px"

                      onclick="imgpreviousbutton1_Click" /></td><td>

                  <asp:ImageButton ID="btnsubmit" runat="server"

                      ImageUrl="~/images/submit_button.png" Height="29px" Width="106px" />

                  </td></tr>

        </table>

        </asp:View>

         <asp:View ID="View4" runat ="server">

         <table>

         <tr>

         <td>End</td>

         </tr>

         </table>        

         </asp:View>

        </asp:MultiView>

Write the code in (aspx.cs file) C#:

protected void Page_Load(object sender, EventArgs e)

    {

      

        SetDefaultView();

    }

  protected void imgnextbutton_Click(object sender, ImageClickEventArgs e)

    {

        MultiView1.ActiveViewIndex = 1;

    }

    protected void imgpreviousbutton_Click(object sender, ImageClickEventArgs e)

    {

        MultiView1.ActiveViewIndex = 0;

    }

    protected void imgnextbutton1_Click(object sender, ImageClickEventArgs e)

    {

        MultiView1.ActiveViewIndex = 2;

    }

    protected void imgpreviousbutton1_Click(object sender, ImageClickEventArgs e)

    {

        MultiView1.ActiveViewIndex = 1;

    }

In VB:

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

        MultiView1.ActiveViewIndex = 0

    End Sub

    Protected Sub imgnextbutton_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles imgnextbutton.Click

        MultiView1.ActiveViewIndex = 1

    End Sub

    Protected Sub imgpreviousbutton_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles imgpreviousbutton.Click

        MultiView1.ActiveViewIndex = 0

    End Sub

    Protected Sub imgnextbutton1_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles imgnextbutton1.Click

        MultiView1.ActiveViewIndex = 2

    End Sub

    Protected Sub imgpreviousbutton1_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles imgpreviousbutton1.Click

        MultiView1.ActiveViewIndex = 1

    End Sub

Output:

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.