Muitas vezes nos vemos em situações em que criamos um site, porém algum tempo depois, quando precisamos criar um novo menu, temos que alterar a página e realizar o upload novamente para a hospedagem do site. Vendo esse cenário, este artigo vai mostrar como criar um menu dinâmico. Para isso, basta apenas criar o menu na sua base de dados e pronto: ele está atualizado na sua página, facilitando muito a construção de aplicações web.
Vamos iniciar pela criação da tabela no Banco de Dados,e para isso é só abrir o Management Studio e conectar em uma instância no banco de Dados. Feito isso, localize sua base de dados, clique com o botão direito do mouse e selecione a opção new query, conforme a Figura 1, e coloque o código da Listagem 1.
Figura 1. Acessando uma nova Query
Listagem 1. Código de criação da Tabela
CREATE TABLE [dbo].[MENU](
[ID_MENU] [int] IDENTITY(1,1) NOT NULL,
[DESCR_MENU] [varchar](50) NOT NULL,
[NOME_MENU] [varchar](50) NOT NULL,
[HIERARQUIA_MENU] [varchar](150) NULL,
CONSTRAINT [PK_MENU] PRIMARY KEY CLUSTERED
(
[ID_MENU] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE =
OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
Após a tabela criada é necessário alimentá-la. Caso queira, segue na Listagem 2 o código para alimentá-la e se preferir pode preenche-la da forma que achar necessário.
Listagem 2. Inserindo Registros na Tabela
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('HOME','HOME',null,'HOME.aspx')
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('ARQUIVO','ARQUIVO',null,null)
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('NOVO','NOVO','ARQUIVO',null)
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('PROJETO','PROJETO','ARQUIVO/NOVO','Projeto.aspx')
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('SOLUÇÃO','SOLUCAO','ARQUIVO/NOVO','Solucao.aspx')
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('CONFIGURAR','CONFIGURAR',null,null)
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('PROJETO','PROJETO','CONFIGURAR','CONFIGPROJETO.aspx')
Insert Into Menu (DESCR_MENU,NOME_MENU,HIERARQUIA_MENU,LINK_MENU) values('SOLUÇÃO','SOLUCAO','CONFIGURAR','CONFIGSOLUCAO.aspx')
Após o preenchimento ela deverá ficar conforme a Figura 2.
Figura 2. Tabela preenchida
Vamos entender qual o sentido de cada campo da Tabela:
- o Campo ID_MENU serve apenas como chave primária caso seja necessário ter nomes de menus repetidos;
- o Campo NOME_MENU é o nome do menu sem conter acentos;
- DESCR_MENU é o campo que contem a descrição que será exibida no menu;
- HIERARQUIA_MENU é onde se deve colocar todos os menus que são pais desse item separados pelo sinal “/“;
- LINK_MENU deve conter o Link do .aspx que o menu abrirá.
Agora com a tabela já criada no banco de dados e previamente alimentada, vamos criar nossa aplicação: abra o Visual Studio 2010 e acesse o menu File ->New ->Project (Figura 3).
Figura 3. Iniciando novo Projeto
Na janela seguinte digite “empty” na caixa de pesquisa e selecione BlankSolution. Altere a propriedade Name para SLMenuDinamicoAsp ou para nome que preferir, conforme mostra a Figura 4.
Figura 4. Nova Solution
Se olharmos no Solution Explorer veremos que foi criada uma solução vazia, então agora clique com o botão direito do mouse e escolha Add...> New Project.
Crie um projeto do Tipo Class Library e altere a propriedade Name para DAL, conforme demonstrado nas Figuras 5 e 6.
Figura 5. Adicionando um projeto a Solução
Figura 6. Adicionado um projeto Class Library
Agora vá até o Solution Explorer, clique com o botão direito do mouse sobre o projeto DAL (Class Library) e escolha Add.. New item > ADO.NET Entity Data Mode. Na propriedade Name coloque MenuModel, conforme as Figuras 7 e 8.
Figura 7. Adicionando um novo Item ao Projeto
Figura 8. Adicionando ADO.NET Entity Data Model
Agora você deve selecionar Generate from database e clicar em Next, conforme a Figura 9.
Figura 9. Opção de Geração do Entity Data Model
Clique no botão New Connection, configure as informações conforme seu banco de dados clique em OK. No textBox coloque MenuEntities e marque a opção “Yes, Include de Sensitive data in the connection string.” . Clique em Next, selecione a tabela Menu e clique em Finish. Veja os passos nas Figuras 10, 11, e 12.
Figura 10. Configurando o Banco de Dados
Figura 11. Configurando o App.config
Figura 12. Selecionando a Tabela
Agora altere o nome das propriedades da Entidade Menu para que elas fiquem conforme a Figura 13.
Figura 13. Tabela Menu no Entity
Acesse o Solution Explorer e clique com o botão direito do mouse sobre a nossa solução e selecione Add.. New Project. Na tela que irá se abrir escolha a opção ASP.NET Web Application e na propriedade Name coloque webMenu (Figura 14).
Figura 14. Adicionado um projeto ASP.NET Web application
Ainda no Solution Explorer, clique com o botão direito do mouse sobre nosso projeto webMenu e selecione Add reference - é aqui que vamos fazer a referência do Projeto DAL (Figura 15), então para isso, na tela que se abriu selecione a aba Projec >projeto Dal e clique em ok, conforme mostra a Figura 16.
Figura 15. Adicionado referência
Figura 16. Projeto DAL
Agora vamos começar a implementação: vá no solution explorer e abra o arquivo Site.Master. Esse é o arquivo Master Page do nosso site, ou seja, alterando o menu nele, todas as páginas que descendem dela ficarão com o menu dinâmico.
Ao criar um projeto ASP.NET Web Application, o Visual Studio já traz o site.Master com algumas implementações padrões e já coloca um item do Tipo menu. Localize o código do Menu e substitua-o pelo código da Listagem 3.
Listagem 3. Código do ASP Menu
<asp:Menu ID="menuSistema" runat="server" BackColor="#E2E8E8" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="Small"
ForeColor="#284E98" StaticSubMenuIndent="10px"
Font-Bold="True" Orientation="Horizontal">
<StaticSelectedStyle BackColor="#E2E8E8" />
<StaticHoverStyle BackColor="#E2E8E8"
ForeColor="white" />
<StaticMenuItemStyle HorizontalPadding="5px"
VerticalPadding="2px" />
<DynamicHoverStyle BackColor=
"#CACFD5" ForeColor="White" />
<DynamicMenuStyle BackColor="#E2E8E8" />
<DynamicSelectedStyle BackColor="#CACFD5" />
<DynamicMenuItemStyle HorizontalPadding="5px"
VerticalPadding="2px" />
</asp:Menu>
Localize também onde está a div com class igual à title e substitua pelo código da Listagem 4.
Listagem 4. Código do Titulo
<div class="title">
<h1>
Menu Dinamico com Asp.Net
</h1>
</div>Agora clique com o botão direito no Site.Master e selecione a opção View Code. O Visual Studio te levará para o código, ou seja, para o arquivo Site.Master.cs. Veja na Figura 17.
Figura 17. Acessando o Código
No arquivo Site.Master.cs vamos implementar o nosso Método que irá montar o menu dinamicamente. Na Listagem 5 segue o código do Método.
Listagem 5. Metodo MomtaMenu()
void MontaMenu()
{
MenuItem _menuPai = null;
MenuItem _menu = null;
MenuEntities ctx = new MenuEntities();
List<MENU> _lMenu = ctx.MENU.ToList();
foreach (var itemMenu in _lMenu)
{
if (String.IsNullOrEmpty(itemMenu.HIERARQUIA))
{
_menuPai = new MenuItem(" "
+ itemMenu.DESCRICAO
+ " ", itemMenu.NOME, "",
itemMenu.LINK);
menuSistema1.Items.Add(_menuPai);
}
else
{
_menuPai =
menuSistema1.FindItem(itemMenu.HIERARQUIA);
_menu = new MenuItem(itemMenu.DESCRICAO,
itemMenu.NOME, "",
itemMenu.LINK);
_menuPai.ChildItems.Add(_menu);
}
}
}Após a criação do Método, você deverá acessar o Método Page_Load e nele chamar o nosso método MontaMenu(), lembrando que sempre deve ser verificado se é o valor de IsPostBack é falso para chamar o método (Listagem 6).
Listagem 6. Chamada do metodo MontaMenu()
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MontaMenu();
}
}Agora vamos rodar aplicação e ver o Resultado. Porém, aparecerá o erro exibido na Figura 18.
Figura 18. Erro de Configuração
O erro acima ocorre porque não foi configurada a conexão com o Banco de Dados. Quando adicionamos um ADO.NET Entity Data Model, ele cria a string de conexão no projeto atual, ou seja, no nosso caso ele criou a conexão no projeto DAL. Para resolver esse problema, acesse o Solution Explorer, clique duas vezes sobre o projeto webMenu para expandir e clique duas vezes sobre o arquivo web.config para abri-lo. Localize a tag “<connectionStrings>” a coloque o código contido na Listagem 7. Lembrado que você deve substituir a palavra senha pela senha do usuário do seu SQLServer.
Listagem 7. String de Conexão
<connectionStrings>
<add name="MenuEntities" connectionString="metadata=res://*/MenuModel.csdl|res://*/MenuModel.ssdl|res://*/MenuModel.msl;provider=System.Data.SqlClient;provider connection string="data source=localhost;initial catalog=Tutoriais;user id=sa;password=senha;multipleactiveresultsets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
Agora rode novamente sua aplicação e o resultado esperado é conforme mostra Figura 19.
Figura 19. Resultado Final
A criação de um Menu Dinâmico dá um pouco mais de trabalho na implementação, por outro lado, isso irá facilitar muito em futuras manutenções na sua aplicação web, pois bastará realizar upload do arquivo aspx e incluir o registro na tabela de Menu e já estará funcionando. E em caso de exclusão é bem mais simples ainda, bastando apenas deletar o registro da tabela menu e a aplicação estará atualizada.
Espero que tenham gostado.
Até a próxima.
