Code .Net: Responsive ASP.NET Menu avec Bootstrap

Dans ce tutoriel, nous allons mettre en œuvre une barre de navigation en utilisant ASP.NET avec Bootstrap. Commençons par un appéçu du résultat:

Responsive ASP.NET Menu avec Bootstrap

Création du contrôle serveur avec les ressources css et javascript intégré:

Structure du projet

bootstrapMenu.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace BootstrapNavigation
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:bootstrapMenu runat=server></{0}:bootstrapMenu>")]
    public class bootstrapMenu : Label
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        private List<NavItem> mList;

        public List<NavItem> MenuList
        {
            get { return mList; }
            set { mList = value; }
        }
        protected override void OnLoad(System.EventArgs e)
        {
            base.OnLoad(e);

            HtmlGenericControl csslink = new HtmlGenericControl("link");
            csslink.ID = "GridStyle";
            csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(this.GetType(), "BootstrapNavigation.Css.bootstrap.css"));
            csslink.Attributes.Add("type", "text/css");
            csslink.Attributes.Add("rel", "stylesheet");
            Page.Header.Controls.Add(csslink);
            HtmlGenericControl csslink2 = new HtmlGenericControl("link");
            csslink2.ID = "GridStyle";
            csslink2.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(this.GetType(), "BootstrapNavigation.Css.navbar.css"));
            csslink2.Attributes.Add("type", "text/css");
            csslink2.Attributes.Add("rel", "stylesheet");
            Page.Header.Controls.Add(csslink2);

            ClientScriptManager cs = this.Page.ClientScript;
            cs.RegisterClientScriptResource(typeof(bootstrapMenu), "BootstrapNavigation.Scripts.jquery-1.11.1.min.js");
            cs.RegisterClientScriptResource(typeof(bootstrapMenu), "BootstrapNavigation.Scripts.bootstrap.min.js");
            cs.RegisterClientScriptResource(typeof(bootstrapMenu), "BootstrapNavigation.Scripts.navbar.js");
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

           
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            try
            {
                NavItem menu = new NavItem();

                output.Write(@"<div class='navbar-default navbar navbar-default navbar-fixed-top' role='navigation'>
                            <div class='container'>
                                <div class='navbar-header'>
                                    <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                                        <span class='sr-only'>Toggle navigation</span>
                                        <span class='icon-bar'></span>
                                        <span class='icon-bar'></span>
                                        <span class='icon-bar'></span>
                                    </button>
                                   
                                </div>

                    <div class='collapse navbar-collapse'>
                          <ul class='nav navbar-nav'>
                            ");

                //Adding menus
                output.Write(menuHtmlGenerator(mList));

                output.Write(@"</ul>
                    </div><!--/.nav-collapse -->
                  </div>
              </div>");
            }
            catch (Exception ex)
            {
                output.Write(ex);
            }
        }
        protected string menuHtmlGenerator(List<NavItem> mList)
        {
            StringBuilder s = new StringBuilder();
            var parentmenu = from parent in mList where parent.IsParent == true select parent;

            foreach (NavItem m in parentmenu)
            {
                s.Append(System.Environment.NewLine);
                s.Append("<li >");
                s.Append("<a href='" + m.Nom + "'  class='dropdown-toggle' data-toggle='dropdown' ");
                s.Append("title='" + m.Description + "' ");
                s.Append(">");
                s.Append(m.Description);
                s.Append("</a>");

                var query = (from item in mList where item.ParentId == m.Id select item);
                if (query.Count() > 0)
                {
                    s.Append(@"   <ul class='dropdown-menu multi-level'> ");
                    foreach (NavItem it in query)
                    {
                        s.Append(@"<li><a href='#'>" + it.Nom + "</a></li>");
                    }

                    s.Append("</ul>");
                }

                s.Append("</li>");

                s.Append(System.Environment.NewLine);
            }
            //Return Full HTML Code As String
            return s.ToString();
        }
    }
}

AssemblyInfo.cs

using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;

// General Information about an assembly is controlled through the following 
// set of attributes. Change these attribute values to modify the information
// associated with an assembly.
[assembly: AssemblyTitle("asp.net_bootstrap_menu")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("asp.net_bootstrap_menu")]
[assembly: AssemblyCopyright("Copyright ©  2014")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]

// Setting ComVisible to false makes the types in this assembly not visible 
// to COM components.  If you need to access a type in this assembly from 
// COM, set the ComVisible attribute to true on that type.
[assembly: ComVisible(false)]

// The following GUID is for the ID of the typelib if this project is exposed to COM
[assembly: Guid("245529e7-cce4-43ed-9e4f-cfb90d6805a7")]

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version 
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Build and Revision Numbers 
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

// Ressources utilisés par le contôle serveur
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Css.bootstrap.css", "text/css")]
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Css.navbar.css", "text/css")]
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Scripts.jquery-1.11.1.min.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Scripts.bootstrap.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Scripts.bootstrap.min.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("BootstrapNavigation.Scripts.navbar.js", "text/javascript")]

NavItem.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace BootstrapNavigation
{
    public class NavItem
    {
        public int Id { get; set; }
        public String Nom { get; set; }
        public String Description { get; set; }
        public bool IsParent { get; set; }
        public int  ParentId { get; set; }
        
    }
}

Demo

Demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="WebApplication3.Demo" %>

<%@ Register Assembly="BootstrapNavigation" Namespace="BootstrapNavigation" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-responsive.css" rel="stylesheet" />
    <link href="Content/site.css" rel="stylesheet" />
</head>
<body>
  <form id="form1" runat="server">
       
  <div class="container">
      <div class="sitename Intro">
          <h3>Bootstrap ASP.NET Menu</h3>
      </div>

      <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>

      <!-- Jumbotron -->
      <div class="jumbotron top-buffer">
        <h1>ASP.NET Bootstrap menu</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
       
      </div>

      <hr>

      <!-- Example row of columns -->
      <div class="row-fluid">
        <div class="span4">
          <h2>Element 1 </h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Element 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>
        <div class="span4">
          <h2>Element 3</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <div class="footer">
        <p>&copy; Hicham Lakhdar 2014</p>
      </div>

    </div> <!-- /container -->

    </form>
    
</body>
</html>

Demo.aspx.cs

using BootstrapNavigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Demo
{
    public partial class Demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
                bootstrapMenu navigationmenu = new bootstrapMenu();
                navigationmenu.MenuList = ListeMenus();
                ph.Controls.Add(navigationmenu);
            }
        }

        //Fill menu list.
        private List<NavItem> ListeMenus()
        {
            List<NavItem> list = new List<NavItem>();

            NavItem np = new NavItem();
            np.Id = 1;
            np.Nom = "Home";
            np.Description = "Home";
            np.IsParent = true;
            list.Add(np);

            for (int i = 1; i < 5; i++)
            {
                NavItem n = new NavItem();
                n.Id = i;
                n.Nom = "Menu " + i;
                n.Description = " Menu " + i;
                n.ParentId = 0;
                n.IsParent = true;
                list.Add(n);
            }
            np = new NavItem();
            np.Id = 6;
            np.Nom = "Item 1";
            np.Description = "Item 1";
            np.IsParent = false;
            np.ParentId = 3;
            list.Add(np);

            np = new NavItem();
            np.Id = 7;
            np.Nom = "Item 2";
            np.Description = "Item 3";
            np.IsParent = false;
            np.ParentId = 3;
            list.Add(np);

            np = new NavItem();
            np.Id = 8;
            np.Nom = "Item 3";
            np.Description = "Item 3";
            np.IsParent = false;
            np.ParentId = 3;
            list.Add(np);


            np = new NavItem();
            np.Id = 9;
            np.Nom = "Item 1";
            np.Description = "Item 1";
            np.IsParent = false;
            np.ParentId = 4;
            list.Add(np);

            np = new NavItem();
            np.Id = 10;
            np.Nom = "Item 1";
            np.Description = "Item 1";
            np.IsParent = false;
            np.ParentId = 4;
            list.Add(np);

            return list;
        }
    }
}

Download Control DLL : dll

Download Code source :BootstrapNavigation_ServerControl

Download demo 1: BootstrapNavigation_DemoWithDLL

Download demo 2: BootstrapNavigation_DemoWithCode

Code .Net

mercredi 10 décembre 2014

Responsive ASP.NET Menu avec Bootstrap

Création du contrôle serveur avec les ressources css et javascript intégré:

Demo

Aucun commentaire:

Enregistrer un commentaire