locked
How to created this left sidebar menu on a webform? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-609535877 posted

    I will implement a web form with two columns( one for left side bar menu and right for content page). There are several vertical listed links pointing to web pages within the site. How do implement the page when a user clicks the links right column shows the linked page? Thanks in advance. 

    Wednesday, July 25, 2018 1:11 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-330142929 posted

    Hi Zhao790,

    According to your description, I suggest you could use the traditional Div with Css to achieve the purpose of two-column layout, and then uses IFrame tags to implement embedded web pages.

    I have made a demo, wish it is useful to you.

    Result.

    aspx.

            <h2>Management</h2>

        <div id="div">

            <div id="div1">

                <asp:TreeView ID="TreeView1" runat="server">

                    <Nodes>

                        <asp:TreeNode NavigateUrl="~/WebForm1.aspx" Target="Right" Text="Home" Value="Home">

                            <asp:TreeNode NavigateUrl="~/WebForm2.aspx" Target="Right" Text="New Node" Value="New Node"></asp:TreeNode>

                            <asp:TreeNode NavigateUrl="~/WebForm5.aspx" Target="Right" Text="New Node" Value="New Node"></asp:TreeNode>

                        </asp:TreeNode>

                    </Nodes>

                </asp:TreeView>

            </div>

            <div id="div2">

                <iframe id="Right" name="Right" runat="server" frameborder="0" scrolling="auto" width="100%" height="90%"></iframe>

            </div>

        </div>

    Style

        <style>

        * {

            margin: 0;

            border: 0;

            padding: 0;

        }

        #div {

            display:flex;

        }

 

        #div1, #div2 {

            height:800px;

        }

 

        #div1 {

            flex:0 0 200px;

            border: 1px solid #00ffff;

        }

 

        #div2 {

            flex:1 1;

 

            border: 1px solid #0094ff;

        }

</style>

    We could use the iframe name to assign the src property.

    //iframe loading page by code behind.

this.Right.Attributes.Add("src", "/WebForm1.aspx");

    Feel free to let me know if you have any questions.

    Best Regards

    Abraham

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 26, 2018 3:11 PM