Example of Multiview control in asp.net Or How to use Multiview control in asp.net | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget