locked
How to make views on multiview display on same place every time? RRS feed

  • Question

  • User-2071692902 posted

    I have a simple app with multiview control and three views inside it. And I have three buttons outside the multiview to moving between views. But I run into slight snag that every time I press on the button to display one of the view, it display on it's position on the design mode and I want it to display on same place every time (on view 1 position)

      

     <form id="form1" runat="server">
    <div>
    <br />
    <asp:Button ID="Button5" runat="server" CssClass="auto-style1" OnClick="Button5_Click" style="z-index: 1; top: 49px; ; height: 31px; left: 232px; right: 305px;" Text="View 3" />
    <asp:Button ID="Button4" runat="server" CssClass="auto-style1" OnClick="Button4_Click" style="z-index: 1; left: 115px; top: 47px; " Text="View 2" />
    <asp:Button ID="Button6" runat="server" CssClass="auto-style1" OnClick="Button6_Click" style="z-index: 1; top: 48px; " Text="View1" />
    <asp:MultiView ID="MultiView1" runat="server">
    <asp:View ID="View1" runat="server" EnableTheming="False">
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 2" />
    <br />
    <asp:Label ID="Label1" runat="server" style="z-index: 1; left: 12px; top: 103px; " Text="Part 1"></asp:Label>
    </asp:View>
    <asp:View ID="View2" runat="server" EnableTheming="False" EnableViewState="False">
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" style="z-index: 1; left: 12px; top: 233px; " Text="Go To Part 3" />
    <br />
    <asp:Label ID="Label2" runat="server" style="z-index: 1; left: 12px; top: 199px; " Text="Part 2"></asp:Label>
    </asp:View>
    <asp:View ID="View3" runat="server">
    <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" style="z-index: 1; left: 12px; top: 329px; " Text="Go To Part 1" />
    <br />
    <asp:Label ID="Label3" runat="server" style="z-index: 1; left: 12px; top: 295px; " Text="Part 3"></asp:Label>
    </asp:View>
    </asp:MultiView>
    </div>
    </form>
    </body>
    </html>
    ================================================================ protected void Button6_Click(object sender, EventArgs e) { MultiView1.ActiveViewIndex = 0; } protected void Button1_Click(object sender, EventArgs e) { MultiView1.ActiveViewIndex = 1; } protected void Button5_Click(object sender, EventArgs e) { MultiView1.ActiveViewIndex = 2; }

    Sunday, January 27, 2019 1:07 AM

Answers

  • User409696431 posted

    The only thing you are showing in your Views are buttons and labels that are absolutely positioned on different places on the page.  They will be displayed where you have told them to display: in those different positions.

    The default behavior of a MultiView is that each active view displays in the same place (and everything is inside the view).  Depending on what is in the views, they may be different sizes and take up more or less space.  You override that behavior with your absolute positioning of the buttons and labels..

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 27, 2019 1:31 AM
  • User839733648 posted

    Hi Omanxp45-1,

    According to your description and code, I suggest that you should define the style the same with the all the view.

    Since you've designed the style differently, it will show in different position.

    My understanding is that you want the result is like this:

    .Aspx

        <form id="form1" runat="server">
            <div>
                <br />
                <asp:Button ID="Button5" runat="server" CssClass="auto-style1" Style="z-index: 1; top: 49px; ; height: 31px; left: 232px; right: 305px;" Text="View 3" OnClick="Button5_Click" />
                <asp:Button ID="Button4" runat="server" CssClass="auto-style1" Style="z-index: 1; left: 115px; top: 47px; " Text="View 2" OnClick="Button4_Click" />
                <asp:Button ID="Button6" runat="server" CssClass="auto-style1" Style="z-index: 1; top: 49px; ; left: 10px;" Text="View1" OnClick="Button6_Click" />
                <asp:MultiView ID="MultiView1" runat="server">
                    <asp:View ID="View1" runat="server" EnableTheming="False">
                        <asp:Button ID="Button1" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 2" OnClick="Button1_Click" />
                        <br />
                        <asp:Label ID="Label1" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 1"></asp:Label>
                    </asp:View>
                    <asp:View ID="View2" runat="server" EnableTheming="False" EnableViewState="False">
                        <asp:Button ID="Button2" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 3" OnClick="Button2_Click" />
                        <br />
                        <asp:Label ID="Label2" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 2"></asp:Label>
                    </asp:View>
                    <asp:View ID="View3" runat="server">
                        <asp:Button ID="Button3" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 1" OnClick="Button3_Click" />
                        <br />
                        <asp:Label ID="Label3" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 3"></asp:Label>
                    </asp:View>
                </asp:MultiView>
            </div>
        </form>

    Code behind.

            protected void Button1_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 1;
            }
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 2;
            }
    
            protected void Button3_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 0;
            }
    
            protected void Button6_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 0;
            }
    
            protected void Button4_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 1;
            }
    
            protected void Button5_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 2;
            }

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 28, 2019 8:36 AM

All replies

  • User409696431 posted

    The only thing you are showing in your Views are buttons and labels that are absolutely positioned on different places on the page.  They will be displayed where you have told them to display: in those different positions.

    The default behavior of a MultiView is that each active view displays in the same place (and everything is inside the view).  Depending on what is in the views, they may be different sizes and take up more or less space.  You override that behavior with your absolute positioning of the buttons and labels..

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 27, 2019 1:31 AM
  • User-2071692902 posted
    So is there any way to make views appear on one place :the view one position. When I recall any of them.
    Sunday, January 27, 2019 11:55 AM
  • User409696431 posted

    I already told you the problem.   If you want the buttons / labels to appear in the same place, don't style them to appear in different places.

    Since you have no other content in your views, I can't comment on that other than to say that the veiws would replace each other, in the same place, unless you styled them not to.

    Monday, January 28, 2019 1:59 AM
  • User839733648 posted

    Hi Omanxp45-1,

    According to your description and code, I suggest that you should define the style the same with the all the view.

    Since you've designed the style differently, it will show in different position.

    My understanding is that you want the result is like this:

    .Aspx

        <form id="form1" runat="server">
            <div>
                <br />
                <asp:Button ID="Button5" runat="server" CssClass="auto-style1" Style="z-index: 1; top: 49px; ; height: 31px; left: 232px; right: 305px;" Text="View 3" OnClick="Button5_Click" />
                <asp:Button ID="Button4" runat="server" CssClass="auto-style1" Style="z-index: 1; left: 115px; top: 47px; " Text="View 2" OnClick="Button4_Click" />
                <asp:Button ID="Button6" runat="server" CssClass="auto-style1" Style="z-index: 1; top: 49px; ; left: 10px;" Text="View1" OnClick="Button6_Click" />
                <asp:MultiView ID="MultiView1" runat="server">
                    <asp:View ID="View1" runat="server" EnableTheming="False">
                        <asp:Button ID="Button1" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 2" OnClick="Button1_Click" />
                        <br />
                        <asp:Label ID="Label1" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 1"></asp:Label>
                    </asp:View>
                    <asp:View ID="View2" runat="server" EnableTheming="False" EnableViewState="False">
                        <asp:Button ID="Button2" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 3" OnClick="Button2_Click" />
                        <br />
                        <asp:Label ID="Label2" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 2"></asp:Label>
                    </asp:View>
                    <asp:View ID="View3" runat="server">
                        <asp:Button ID="Button3" runat="server"  Style="z-index: 1; left: 12px; top: 137px; " Text="Go To Part 1" OnClick="Button3_Click" />
                        <br />
                        <asp:Label ID="Label3" runat="server" Style="z-index: 1; left: 12px; top: 103px; " Text="Part 3"></asp:Label>
                    </asp:View>
                </asp:MultiView>
            </div>
        </form>

    Code behind.

            protected void Button1_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 1;
            }
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 2;
            }
    
            protected void Button3_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 0;
            }
    
            protected void Button6_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 0;
            }
    
            protected void Button4_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 1;
            }
    
            protected void Button5_Click(object sender, EventArgs e)
            {
                MultiView1.ActiveViewIndex = 2;
            }

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 28, 2019 8:36 AM