Bootstrap Responsive ASP.Net Menu control for Mobile Phone Tablet and Desktop display

Last Reply on Jan 16, 2018 12:58 AM By Andrea

Posted on Jan 16, 2018 12:58 AM

 

<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false">
                <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                    class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ASPSnippets</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
            </asp:Menu>
        </div>
    </div>
</div>
 

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData(0);
        PopulateMenu(dt, 0, null);
    }
}
 
private DataTable GetData(int parentMenuId)
{
    string query = "SELECT [MenuId], [Title], [Description], [Url] FROM [Menus] WHERE ParentMenuId = @ParentMenuId";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        DataTable dt = new DataTable();
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Parameters.AddWithValue("@ParentMenuId", parentMenuId);
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}
 
private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
{
    string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
    foreach (DataRow row in dt.Rows)
    {
        MenuItem menuItem = new MenuItem
        {
            Value = row["MenuId"].ToString(),
            Text = row["Title"].ToString(),
            NavigateUrl = row["Url"].ToString(),
            Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
        };
        if (parentMenuId == 0)
        {
            Menu1.Items.Add(menuItem);
            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
        }
        else
        {
            parentMenuItem.ChildItems.Add(menuItem);
        }
    }
}

 

<script type="text/javascript">
    //Disable the default MouseOver functionality of ASP.Net Menu control.
    Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
        return false;
    };
    $(function () {
        //Remove the style attributes.
        $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
           
        //Apply the Bootstrap class to the Submenu.
        $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
           
        //Apply the Bootstrap properties to the Submenu.
        $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");
           
        //Apply the Bootstrap "active" class to the selected Menu item.
        $("a.selected").closest("li").addClass("active");
        $("a.selected").closest(".dropdown-toggle").addClass("active");
    });
</script>

help me if "About", "Contact"  menu have also submenu...

Posted on Jan 16, 2018 12:58 AM