Example of Multiview control in asp.net Or How to use Multiview control in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Example of Multiview control in asp.net Or How to use Multiview control 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:

Example of Multiview control

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon