Imprimir Post

Caminho Rápido – Utilizando o elemento ListBox para criar uma caixa de listagem em uma Aplicação do tipo ASP.NET MVC

Resumo:

O objetivo desta publicação é ensinar como utilizar o elemento ListBox para criar uma caixa de listagem em uma Aplicação do tipo ASP.NET MVC à partir da ferramenta de desenvolvimento Microsoft Visual Studio.

O guia será apresentado de maneira a minimizar a parte teórica ao essencial e elevar a parte prática até a concretização do objetivo.

Palavras-chaves:

Visual, Studio, Utilizar, Elemento, ListBox, Listagem.

Texto:

Adendo

Para realização das tarefas referentes ao objetivo do post, foram utilizados os seguintes Programas:

  • Windows 10 Pro;
  • Microsoft Visual Studio Community 2015 Ultimate (Update 3).

A única configuração realizada após a instalação dos programas acima, foi manter o Microsoft Visual Studio sendo executado como usuário Administrador do Sistema Operacional, a fim de evitar maiores problemas.

Mãos à Obra

A sequência será apresentada de maneira a entender que o leitor já possua a estrutura do projeto tipo ASP.NET MVC da postagem: “Caminho Rápido – Determinando uma Aplicação de apoio do tipo ASP.NET MVC“.

Relembre - Aplicação de apoio ASP.NET MVC

Aplicação de apoio ASP.NET MVC:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Aplicação de Apoio

Microsoft Visual Studio Community 2015 – Aplicação de Apoio

Adicionando o Controller ClienteController

À partir do projeto anteriormente criado, adicionar um Controller nomeado como ClienteController:

Controller em uma Aplicação ASP.NET MVC - Relembre - Controller

Tela ao adicionar o Controller ClienteController:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 - Tela após adicionar o Controller

Microsoft Visual Studio Community 2015 – Tela após adicionar o Controller

Adicionando a View Index

À partir do Controller anteriormente criado (ClienteController), adicionar uma View nomeada como Index:

View em uma Aplicação ASP.NET MVC - Relembre - View

Tela ao adicionar a View Index:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 - Tela após adicionar a View

Microsoft Visual Studio Community 2015 – Tela após adicionar a View

Alterando a View Index Cliente

Localizar a pasta Cliente. Na área à direita nomeada como: Solution Explorer, deve-se clicar duas vezes (2x) sobre Index.cshtml, alterando este arquivo para o seguinte código:

Tela ao colar o código:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Por fim, deve-se salvar a View Index e suas alterações clicando no botão Salvar. Tela com a confirmação positiva (ver rodapé da janela) ao clicar no botão Salvar:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Alterando a View Index Default

Localizar a pasta Default. Na área à direita nomeada como: Solution Explorer, deve-se clicar duas vezes (2x) sobre Index.cshtml, alterando este arquivo para o seguinte código:

Tela ao colar o código:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Por fim, deve-se salvar o arquivo Index e suas alterações clicando no botão Salvar. Tela com a confirmação positiva (ver rodapé da janela) ao clicar no botão Salvar:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Finalizando o exemplo, resta apenas executar a Aplicação, deve-se então clicar no botão Start Debugging (F5):

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Execução da Aplicação

Microsoft Visual Studio Community 2015 – Execução da Aplicação

Tela ao clicar no botão Start Debugging (F5):

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 - Página Principal (Default)

Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) – Página Principal (Default)

Tela ao clicar no Link Ir para página Cliente:

Utilizando o elemento ListBox para criar uma caixa de listagem - Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) - Página Cliente

Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) – Página Cliente

Considerações Finais:

Esta publicação visa utilizar o elemento ListBox para criar uma caixa de listagem em uma Aplicação do tipo ASP.NET MVC.

Vale destacar que:

  • ListBox é um elemento que representa uma caixa de listagem.
  • No exemplo, houve a modificação de elementos de texto no Design particular tanto da View Index pertencente a Default, quanto na View Index de Cliente.

Design particular em uma Aplicação ASP.NET MVC - Relembre - Design particular

  • Além disso, ListBox é transcrito em código como @Html.ListBox(string, new[] { new SelectListItem { Text = string, Value = string } } ) na View Index de Cliente definindo uma caixa de listagemÉ importante ressaltar que o elemento ListBox foi utilizado uma única vez, declarando varias opções que ficarão à disposição de escolha, ou múltipla escolha:
    • Da primeira até última ocasião segue-se a mesma lógica @Html.ListBox(“lstFuncionario”, new[] { new SelectListItem { Text = “João de Almeida”, Value = “1”  } … Onde lstFuncionario após renderizado será o nome (name) e identificador (id) de um elemento select, será uma das opções (option) de valor (value) que também fará parte deste elemento e ainda irá possuir uma estilo de design específico utilizando para tanto o parâmetro new { @class = “form-control”,  @style = “width: 280px; height:100px;” }).
  • O elemento ActionLink também está presente como recurso no exemplo, porém apenas como redirecionamento entre as páginas.

ActionLink em uma Aplicação ASP.NET MVC - Relembre - ActionLink

  • Apesar do foco ser o elemento ListBox, o elemento Label também está presente para enriquecer o exemplo (porém sem maiores detalhes).

Referências Bibliográficas:

As referências bibliográficas não se aplicam a este post.

Sobre o autor

Thiago Richard Vanicore

Thiago Richard Vanicore formou-se em análise e desenvolvimento de sistemas, possui certificação ITIL Foundation V2 e entre seus conhecimentos estão: ASP .Net (WebForms/MVC5/Web API) C#, HTML5, Html/XHtml, CSS3, JQuery, JQuey Mobile, JavaScript, Xml, Ajax, Json, Microsoft SqlServer, MySql, Firebird, Azure, Visual Studio Online, Scrum, UML, CRM, Quality Assurance, CTI (Computer Telephony Integration) MPSBR (Melhoria de Processos do Software Brasileiro).

Link permanente para este artigo: http://linksinergia.com.br/2017/05/24/caminho-rapido-utilizando-o-elemento-listbox-para-criar-uma-caixa-de-listagem-em-uma-aplicacao-do-tipo-asp-net-mvc/