Create sidebar in Content page with Master Page in ASP.Net

Last Reply 28 days ago By dharmendr

Posted 29 days ago

Hello Sir,

How to create a sidebar in contenpage which is not present in masterpage.

please help.

Thanks


Posted 29 days ago

Hello Sir,

Below is the code for the masterpage.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Knowledge</title>

    <!-- CSS -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css' />
    
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
   
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body class="archive">
    <form id="form1" runat="server">
        <!-- Header -->
        <header class="hero overlay">
           
            <div class="masthead single-masthead">
                <div class="container">
                    <div class="row">
                    </div>
                </div>
            </div>
        </header>

        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>

                <div class="col-lg-4">
                    <div class="sidebar">
                         
                        <div class="pt-50">
                            <div class="widget fix widget_categories">
                                <span class="icon icon-folder"></span>
                                <h4>Popular Knowledgebase Topics</h4>
                                <ul>
                                    <li><a href="index.aspx">Modules </a></li>
                                    <li><a href="Admin.aspx">Admin </a></li>
                                    
                                   
                                    <li><a href="Staff_Mngmt.aspx">Staff Management </a></li>
                                 
                                    <li><a href="Inventory.aspx">Inventory</a></li>
                                    <li><a href="Quality.aspx">Quality </a></li>
                                   
                                  
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
           </div>
            </div>
        <footer>
            <div class="container">
                <div class="row">
                  
                    <div class="col-md-6"></div>
                    <div class="col-lg-6 col-md-4 col-sm-12">
                        <div class="copyright">
                           
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <script src="assets/js/jquery-1.12.3.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/main.js"></script>
    </form>
</body>
</html>

Sir, I want to add one more sidebar above Popular Topics in contentpage, here every content page will have different sidebar apart from the masterpage.please help

Thanks


Posted 29 days ago

I will get back to you tomorrow.



Posted 28 days ago

Hi democloud,

Add another ContentPlaceHolder above the side bar menu for adding the contentpage menu with it.

Check this example. Now please take its reference and correct your code.

HTML

Master Page

<html>
<head runat="server">
    <title></title>
    <!-- CSS -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body class="archive">
    <form id="form1" runat="server">
        <!-- Header -->
        <header class="hero overlay">

            <div class="masthead single-masthead">
                <div class="container">
                    <div class="row">
                    </div>
                </div>
            </div>
        </header>

        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">

                        <div class="pt-50">
                            <div class="widget fix widget_categories">
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                                </asp:ContentPlaceHolder>
                                <span class="icon icon-folder"></span>
                                <h4>Popular Knowledgebase Topics</h4>
                                <ul>
                                    <li><a href="index.aspx">Modules </a></li>
                                    <li><a href="Admin.aspx">Admin </a></li>
                                    <li><a href="Staff_Mngmt.aspx">Staff Management </a></li>
                                    <li><a href="Inventory.aspx">Inventory</a></li>
                                    <li><a href="Quality.aspx">Quality </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="container">
                <div class="row">

                    <div class="col-md-6"></div>
                    <div class="col-lg-6 col-md-4 col-sm-12">
                        <div class="copyright">
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </form>
</body>
</html>

Content page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    Content page content
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <h4>New Topics</h4>
    <ul>
        <li><a href="index.aspx">Test 1 </a></li>
    </ul>
</asp:Content>