O asp.net possui diversos controles onde o objetivo é justamente este facilitar no desenvolvimento de páginas que necessitam desses recursos. Esta lição irá falar sobre os seguinte controles que facilitam a nossa vida:
- Table
- Image
- ImageButton
- ImageMap
- Calendar
- FileUpload
- Panel
- MultiView
- Wizard
- Xml
The Table, TableRow, and TableCell Controls
Antigamente, e alguns desenvolvedores até hoje utilizam tables, tr e td html. Mas sabemos que devemos evitar o uso dessas tags html e usar divs, span e etc... Porém fica dificil fazer tudo com divs, quando se tem a necessidade de exibir dados tabulados.
Estes controles do asp.net tem o mesmo objetivo da table, tr e td do html, a grande diferença é que são Server Controls e por isso podem ser criados e manipulados em tempo execução.
O controle table possui uma propriedade que é uma coleção do controle TableRow, e por sua vez o TableRow possui uma propriedade que é uma coleção dos controles TableCell. Todos eles herdam a classe WebControl, por isso possuem as propriedades comuns como Font, BackColor e ForeColor.
Adding Rows and Cells Dynamically to a Table Control
O Visual Studio permite que você crie seu controle Table pelo designer dele, simplesmente arrastando o controle para sua página e editando suas propriedades, onde terá a opção de adicionar linhas e em seguida células. Porém se irá criar tabelas estáticas que não serão manipuladas em tempo de execução é recomendado que utilize as tabelas do html, pois terão melhor performance que os Controls Server do asp.net.
O único motivo para utilizar este controle é a necessidade de manipular em tempo de execução, a baixo código explicando:
- Na ToolBox arraste o Controle Table para sua página.
- Vá ao arquivo de code-behind e crie o evento PreInit do seu formulário.
- Dentro deste evento escreva um loop para criar 5 linhas em seu controle.
- Dentro deste loop, adicione outro loop para criar 3 célular dentro de cada linha.
- Dentro do último loop modifique a propriedade TableCell.Tex para identificar a linha e a coluna.
{
Table1.BorderWidth = 1;
for (int row = 0; row < 5; row++)
{
TableRow tr = new TableRow();
for (int column = 0; column < 3; column++)
{
TableCell tc = new TableCell();
tc.Text = string.Format("Row:{0} Cell:{1}", row, column);
tc.BorderWidth = 1;
tr.Cells.Add(tc);
}
Table1.Rows.Add(tr);
}
}
Neste código repare que foi modificado a propriedade Table1.BorderWidth e BorderWidth de cada célula também, o resultado será:
The Image Control
O controle de image como o nome ja sugere, renderiza uma imagem no browser, mais uma vez vale lembrar que só é válido usar este controle caso queira manipular em tempo de execução, caso contrário utilize a tag <img> do html. Aliás, o controle Image do asp.net irá renderizar uma <img> quando for processado.
O controle Image herda da classe WebControl e os controles ImageMap e ImageButton herdam diretamente de Image.
A propriedade primária do Image é ImageUrl que contém o caminho da imagem que será exibida no browser, mas existem mais algumas propriedades:
- AlternateText: Esta propriedade tem diversas funções. Quando por algum motivo a imagem não for carregada no browser, o texto que irá aparecer no lugar dela é o que for definido nesta propriedade. A maioria dos navegadores exibe o texto desta propriedade quando passa o cursor do mouse por cima da imagem, como um Tooltip. E a função que considero mais importante é que ajuda usuário com necessidade especiais de acessibilidade para navegar em sua página. Caso sua imagem tenha um link utilize esta propriedade para descrever seu link, caso seja uma imagem de conteúdo descreva a imagem com palavras chaves para facilitar motores de busca a indexar sua imagem corretamente.
- ImageAlign: Esta propriedade especifica a posição da imagem em relação a outros objetos em sua página. Existem as seguintes opções: NotSet, Left, Right, Baseline, Top, Middle, Bottom, AbsBottom, AbsMiddle, ou TextTop.
- DescriptionUrl: Esta propriedade é outro recurso de acessibilidade, quando for usados leitores não visuais para acessar sua página, ele irá encontrar nesta propriedade um link, tem que ser uma url, que irá direcionar para uma página com texto explicativo ou audio, explicando melhor o que é aquela imagem.
- GenerateEmptyAlternateText: Definindo esta propriedade para true, quando a página for carregada e por algum motivo a imagem não seja carregada a propriedade alt do objeto <img> ficará: alt="". Desta forma quando for usado um leitor não visual o software irá ignorar esta imagem, entendo que ela não tem significado para a página.
A baixo um exemplo de código de como criar um controle Image em tempo de execução:
protected void Page_Load(object sender, EventArgs e)
{
Image1.ImageUrl = "~/images/whale.jpg";
Image1.DescriptionUrl = "~/WhaleImageDescription.htm";
Image1.AlternateText = "This is a picture of a whale";
}
The ImageButton Control
O controle de Image não possui o evento click, se você necessitar deste evento, é necessário utilizar o controle ImageButton ou ImageMap, estes controles são renderizados como o controle Image com a diferença de funcionar como um botão, com estes controles é possível também localizar as coordenadas x e y de onde o usuário clicou, caso queira tomar alguma decisão em relação a este aspecto.
O controle ImageButton é renderizado no html como: <input type="image">, por ter eventos associados a ele, é possível executar um PostBack em seu formulário através do controle. Por herdar diretamente do controle Image o ImageButton possui as mesmas propriedades como AlternateText, DescriptionUrl, ImageAlign, e GenerateEmptyAlternateText.
O ImageButton assim como o Button possui dois eventos o click e o command, a diferença entre eles já explique em lições anteriores. O segundo parâmetro de ambos os eventos é do tipo ImageClickEventArgs, que é o parâmetro que possui as coordenadas do clique.
O código a seguir demonstra o clique em um ImageButton:
public partial class ImageButton_Control : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.ImageUrl = "~/images/redblue.jpg";
ImageButton1.AlternateText =
"This is a button. The left side is red. The right is blue.";
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
ImageButton1.AlternateText =
string.Format("Button Clicked at {0},{1}", e.X, e.Y);
}
}
Repare que no evento Click do botão, é definida a propriedade AlternateText com os valores das coordenadas de onde o usuário clicou.
The ImageMap Control
O ImageMap é similar ao ImageButton, a grande diferença é que em qualquer lugar que clicar do ImageButton irá ocasionar o PostBack, já com o ImageMap é possível definir regiões "hot spots" que irão ocasionar o PostBack.
O ImageMap quando renderizado gera o elemento html: <img usemap="#myMap">. Assim como o ImageButton o ImageMap herda diretamente da classe Image, por isso possui as mesmas propriedades.
No asp.net o ImageMap é representado pelo elemento: <asp:ImageMap> e seus elementos são: CircleHotSpot, RectangleHotSpot, e PolygonHotSpot.
Working with HotSpot Classes
O HotSpot é uma área pré-definida da imagem que quando clicada irá executar uma ação. É possível criar várias áreas dentro da mesma imagem. As classes que herdam da classe HotSpot são CircleHotSpot, RectangleHotSpot, e PolygonHotSpot. Propriedades:
{
Image1.ImageUrl = "~/images/whale.jpg";
Image1.DescriptionUrl = "~/WhaleImageDescription.htm";
Image1.AlternateText = "This is a picture of a whale";
}
The ImageButton Control
O controle de Image não possui o evento click, se você necessitar deste evento, é necessário utilizar o controle ImageButton ou ImageMap, estes controles são renderizados como o controle Image com a diferença de funcionar como um botão, com estes controles é possível também localizar as coordenadas x e y de onde o usuário clicou, caso queira tomar alguma decisão em relação a este aspecto.
O controle ImageButton é renderizado no html como: <input type="image">, por ter eventos associados a ele, é possível executar um PostBack em seu formulário através do controle. Por herdar diretamente do controle Image o ImageButton possui as mesmas propriedades como AlternateText, DescriptionUrl, ImageAlign, e GenerateEmptyAlternateText.
O ImageButton assim como o Button possui dois eventos o click e o command, a diferença entre eles já explique em lições anteriores. O segundo parâmetro de ambos os eventos é do tipo ImageClickEventArgs, que é o parâmetro que possui as coordenadas do clique.
O código a seguir demonstra o clique em um ImageButton:
public partial class ImageButton_Control : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.ImageUrl = "~/images/redblue.jpg";
ImageButton1.AlternateText =
"This is a button. The left side is red. The right is blue.";
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
ImageButton1.AlternateText =
string.Format("Button Clicked at {0},{1}", e.X, e.Y);
}
}
Repare que no evento Click do botão, é definida a propriedade AlternateText com os valores das coordenadas de onde o usuário clicou.
The ImageMap Control
O ImageMap é similar ao ImageButton, a grande diferença é que em qualquer lugar que clicar do ImageButton irá ocasionar o PostBack, já com o ImageMap é possível definir regiões "hot spots" que irão ocasionar o PostBack.
O ImageMap quando renderizado gera o elemento html: <img usemap="#myMap">. Assim como o ImageButton o ImageMap herda diretamente da classe Image, por isso possui as mesmas propriedades.
No asp.net o ImageMap é representado pelo elemento: <asp:ImageMap> e seus elementos são: CircleHotSpot, RectangleHotSpot, e PolygonHotSpot.
Working with HotSpot Classes
O HotSpot é uma área pré-definida da imagem que quando clicada irá executar uma ação. É possível criar várias áreas dentro da mesma imagem. As classes que herdam da classe HotSpot são CircleHotSpot, RectangleHotSpot, e PolygonHotSpot. Propriedades:
- AccessKey: já explicado anteriormente em outros controles;
- AlternateText: já explicado anteriormente em outros controles;
- HotSpotMode: Comportamento quando clicar na área (HotSpot) criada. Pode ser definido como: NotSet, Inactive, Navigate, ou PostBack;
- NavigateUrl: Url que irá navegar quando a área for clicada;
- PostBackValue: Uma string que será passada para o lado do servidor quando a área for clicada;
- TabIndex: Número indice do HotSpot;
- Target: A janela ou frame que será exibido o resultado do clique da área.
A propriedade HotSpotMode é usada para definir o comportamento do HotSpot quando ele for clicado. Esta propriedade pode ser definida tanto em um HotSpot como no controle ImageMap. Se você definir o valor desta propriedade para ambos, prevalecerá o valor que estiver no HotSpot e ignorará o valor atribuido ao ImageMap. Vamos aos valores permitidos desta propriedade:
- NoSet: É usado quando você quer herdar o comportamento padrão definido no controle ImageMap, você define a propriedade no ImageMap e no HotSpot deixe como NotSet;
- Navigate: Simples, especifique uma url que será aberta quando clicar em seu HotSpot;
- PostBack: Quando o HotSpot for clicado ele irá executar um PostBack em seu formulário enviando os dados para o servidor. Basta criar o evento e informar o valor da propriedade PostBackValue que será passada no parâmetro ImageMapEventArgs do seu evento.
- Inactive: Como o nome já diz não será feito nada. Por que usar? Você pode criar HotSpot de zonas complexas, onde você define uma área inativa dentro de outro HotSpot ativo.
public partial class HotSpotControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ImageMapStopLight.ImageUrl = "~/images/stoplight.jpg";
{
protected void Page_Load(object sender, EventArgs e)
{
ImageMapStopLight.ImageUrl = "~/images/stoplight.jpg";
ImageMapStopLight.AlternateText = "Stoplight picture";
ImageMapStopLight.HotSpotMode = HotSpotMode.PostBack;
RectangleHotSpot redHotSpot = new RectangleHotSpot();
redHotSpot.Top = 0;
redHotSpot.Bottom = 40;
redHotSpot.Left = 0;
redHotSpot.Right = 40;
redHotSpot.PostBackValue = "RED";
ImageMapStopLight.HotSpots.Add(redHotSpot);
RectangleHotSpot yellowHotSpot = new RectangleHotSpot();
yellowHotSpot.Top = 41;
yellowHotSpot.Bottom = 80;
yellowHotSpot.Left = 0;
yellowHotSpot.Right = 40;
yellowHotSpot.PostBackValue = "YELLOW";
ImageMapStopLight.HotSpots.Add(yellowHotSpot);
RectangleHotSpot greenHotSpot = new RectangleHotSpot();
greenHotSpot.Top = 81;
ImageMapStopLight.HotSpotMode = HotSpotMode.PostBack;
RectangleHotSpot redHotSpot = new RectangleHotSpot();
redHotSpot.Top = 0;
redHotSpot.Bottom = 40;
redHotSpot.Left = 0;
redHotSpot.Right = 40;
redHotSpot.PostBackValue = "RED";
ImageMapStopLight.HotSpots.Add(redHotSpot);
RectangleHotSpot yellowHotSpot = new RectangleHotSpot();
yellowHotSpot.Top = 41;
yellowHotSpot.Bottom = 80;
yellowHotSpot.Left = 0;
yellowHotSpot.Right = 40;
yellowHotSpot.PostBackValue = "YELLOW";
ImageMapStopLight.HotSpots.Add(yellowHotSpot);
RectangleHotSpot greenHotSpot = new RectangleHotSpot();
greenHotSpot.Top = 81;
greenHotSpot.Bottom = 120;
greenHotSpot.Left = 0;
greenHotSpot.Right = 40;
greenHotSpot.PostBackValue = "GREEN";
ImageMapStopLight.HotSpots.Add(greenHotSpot);
}
protected void ImageMapStopLight_Click(object sender, ImageMapEventArgs e)
{
Label1.Text = string.Format("You clicked the {0} rectangle.", e.PostBackValue);
}
}
greenHotSpot.Left = 0;
greenHotSpot.Right = 40;
greenHotSpot.PostBackValue = "GREEN";
ImageMapStopLight.HotSpots.Add(greenHotSpot);
}
protected void ImageMapStopLight_Click(object sender, ImageMapEventArgs e)
{
Label1.Text = string.Format("You clicked the {0} rectangle.", e.PostBackValue);
}
}
Resultado quando se clica no retângula verde:
The Calendar Control
O controle Calendar irá exibir um calendário em sua página. Ele é usado para seleção de datas, seja um única data ou um conjunto de datas. No asp.net o elemento dele é o <asp:Calendar>, quando renderizado em sua página ele irá gerar uma <table> html associada com javascripts que o próprio asp.net irá criar.
Como eu disse o Calendar tem a opção de selecionar nenhum ou várias datas, isto é contralado pela propriedade SelectionMode, e as opções disponíveis são:
- Day: permite selecionar uma data simples;
- Week: permite selecionar uma data simples ou uma semana completa;
- WeekMonth: permite selecionar uma data simples, uma semana completa ou todo o mês;
- one: não permite que você selecionar qualquer data.
- Caption: texto renderizado no calendário;
- CaptionAlign: alinhamento do texto: Top, Bottom, Left, Right, ou NotSet;
- CellPadding: espaço da célula para a borda da célula;
- CellSpacing: espaço entra cada célula;
- DayHeaderStyle: o estilo que será aplicado aos dias da semana;
- DayNameFormat: o formato dos nomes dos dias das semanas: FirstLetter,
FirstTwoLetters, Full, Short, Shortest; - DayStyle: estilo padrão para os dias do calendário;
- FirstDayOfWeek: o dia da semana que será exibido na primeira coluna do calendário;
- NextMonthText: texto que será exibido no controle de navegação para ir para o próximo mês, por padrão o usado é >. Este controle de navegação só é habilitado quando a propriedade ShowNextPrevMonth for true;
- NextPrevFormat: define o formato dos controles de navegação próximo e anterior. Pode ser definido como CustomText (padrão), FullMonth(exemplo Janeiro) ou ShortMonth (exemplo Jan);
- NextPrevStyle: estilo que será aplicado aos controles de navegação;
- OtherMonthDayStyle: estilo dos dias do calendário e não são do mês selecionado;
- PrevMonthText: texto que será exibido no controle de navegação para ir para o mês anterior, por padrão o usado é <. Este controle de navegação só é habilitado quando a propriedade ShowNextPrevMonth for true;
- SelectedDate: data selecionada pelo usuário;
- SelectedDates: coleção de datas selecionada pelo usuário, quando assim for permitido;
- SelectedDayStyle: estilo da data selecionada;
- SelectionMode: valor que indica como as datas podem ser selecionadas, como ja expliquei a cima;
- SelectMonthText: texto exibido para a seleção do mês, por padrão é >>;
- SelectorStyle: estilo para os seletores de semana e mês;
- SelectWeekText: texto de seleção da semana no seletor;
- ShowDayHeader: indica se o header do dia deve ser exibido;
- ShowGridLines: indica se deve exibir gridLines;
- ShowNextPrevMonth: indica se os controles de navegação entre meses deve ser exibido;
- ShowTitle: indica se o titulo deve ser exibido;
- TitleFormat: indica como deve ser o formato do título, exibindo o mês ou mês e ano;
- TitleStyle: estilo do título;
- TodayDayStyle: estilo do dia atual;
- TodaysDate: data de hoje;
- UseAccessibleHeader: quando definido como true os headers do dia serão gerados como <th>, é o padrão, quando definido como false serão gerados <td>;
- VisibleDate: define qual data será exibida quando o calendário for exibido;
- WeekendDayStyle: estilo dos dias de final de semana.
Outro evento é o VisibleMonthChanged que também causa um postback e é disparado no momento em que o usuário altera o mês que esta visivel no calendário.
O calendar é tipicamente usado como um selecionador de datas, mas pode ser usado para exibir tarefas agendadas.Utilizando o evento DayRender, que é disparado no momento em que o calendário esta sendo criado e irá ser renderizado no html a cada dia do mês, você pode adicionar controles como um label junto com o dia do calendário.
O código abaixo demonstra como exibir as informações em texto de datas especiais junto com o dia no calendário.
private Dictionary<DateTime, string> scheduleData = new Dictionary<DateTime,string>(5);
protected void Page_Load(object sender, EventArgs e)
{
// Load the schedule (which would be read from a database)
scheduleData.Add(new DateTime(2011, 1, 9), "Vacation Day");
scheduleData.Add(new DateTime(2011, 1, 18), "Budget planning meeting");
scheduleData.Add(new DateTime(2011, 2, 5), "Conference call");
scheduleData.Add(new DateTime(2011, 2, 10), "Meet with art director");
scheduleData.Add(new DateTime(2011, 2, 15), "Vacation day");
Calendar1.Caption = "Personal Schedule";
protected void Page_Load(object sender, EventArgs e)
{
// Load the schedule (which would be read from a database)
scheduleData.Add(new DateTime(2011, 1, 9), "Vacation Day");
scheduleData.Add(new DateTime(2011, 1, 18), "Budget planning meeting");
scheduleData.Add(new DateTime(2011, 2, 5), "Conference call");
scheduleData.Add(new DateTime(2011, 2, 10), "Meet with art director");
scheduleData.Add(new DateTime(2011, 2, 15), "Vacation day");
Calendar1.Caption = "Personal Schedule";
Calendar1.FirstDayOfWeek = FirstDayOfWeek.Sunday;
Calendar1.NextPrevFormat = NextPrevFormat.ShortMonth;
Calendar1.TitleFormat = TitleFormat.MonthYear;
Calendar1.ShowGridLines = true;
Calendar1.DayStyle.HorizontalAlign = HorizontalAlign.Left;
Calendar1.DayStyle.VerticalAlign = VerticalAlign.Top;
Calendar1.DayStyle.Height = new Unit(75);
Calendar1.DayStyle.Width = new Unit(100);
Calendar1.OtherMonthDayStyle.BackColor = System.Drawing.Color.Cornsilk;
Calendar1.TodaysDate = new DateTime(2011, 1, 1);
Calendar1.VisibleDate = Calendar1.TodaysDate;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
ActionLabel.Text = string.Format("Selection changed to: {0}", Calendar1.SelectedDate.ToShortDateString());
}
protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
ActionLabel.Text = string.Format("Month changed to: {0}", e.NewDate.ToShortDateString());
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
if (scheduleData.ContainsKey(e.Day.Date))
{
Literal lit = new Literal();
lit.Text = "<br />";
e.Cell.Controls.Add(lit);
Label lbl = new Label();
lbl.Text = (string)scheduleData[e.Day.Date];
lbl.Font.Size = new FontUnit(FontSize.Small);
e.Cell.Controls.Add(lbl);
}
}
Calendar1.NextPrevFormat = NextPrevFormat.ShortMonth;
Calendar1.TitleFormat = TitleFormat.MonthYear;
Calendar1.ShowGridLines = true;
Calendar1.DayStyle.HorizontalAlign = HorizontalAlign.Left;
Calendar1.DayStyle.VerticalAlign = VerticalAlign.Top;
Calendar1.DayStyle.Height = new Unit(75);
Calendar1.DayStyle.Width = new Unit(100);
Calendar1.OtherMonthDayStyle.BackColor = System.Drawing.Color.Cornsilk;
Calendar1.TodaysDate = new DateTime(2011, 1, 1);
Calendar1.VisibleDate = Calendar1.TodaysDate;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
ActionLabel.Text = string.Format("Selection changed to: {0}", Calendar1.SelectedDate.ToShortDateString());
}
protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
ActionLabel.Text = string.Format("Month changed to: {0}", e.NewDate.ToShortDateString());
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
if (scheduleData.ContainsKey(e.Day.Date))
{
Literal lit = new Literal();
lit.Text = "<br />";
e.Cell.Controls.Add(lit);
Label lbl = new Label();
lbl.Text = (string)scheduleData[e.Day.Date];
lbl.Font.Size = new FontUnit(FontSize.Small);
e.Cell.Controls.Add(lbl);
}
}
Este código define no evento Page_Load algumas propriedades do calendário, e utiliza o evento Calendar1_DayRender para fazer a verificação se a data é uma data especiail para ser exibida. Veja o resultado:
The FileUpload Control
O controle FileUpload permite ao usuário fazer o upload de arquivos para o servidor. Este controle exibe um textbox e um botão. O usuário pode informar o caminho completo do arquivo ou clicar no botão e navegar pelo browser até encontrar o arquivo desejado.
Sua tag no asp.net é <asp:FileUpload> quando renderizado no html ele gera um <input type="file">.
O FileUpload não ocasiona postback de forma automática, somente é feito o postback por intervenção de outro controle como um botão de enviar/gravar ou outro.
As propriedade para acessar o arquivo são:
- FileBytes: Expõe o arquivo como um array de byte;
- FileContent: Expõe o arquivo como stream;
- PostedFile: Expõe o arquivo como objeto do tipo HttpPostedFile. Este objeto contém outras propriedades como ContentType e ContentLength.
O tamanho máximo do arquivo que pode ser utilizado é configurado pelo atributo MaxRequestLength que fica no elemento httpRuntime no arquivo web.config. Se o usuário tentar postar algo maior do que o delimitado o upload irá falhar.
No exemplo a baixo foi criado uma página com um FileUpload e um botão para salvar o arquivo em uma pasta chamada Uploads:
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
Label1.Text = string.Format("File Length: {0}<br />File Name: {1}<br />MIME Type: {2}",
FileUpload1.FileBytes.Length, FileUpload1.FileName, FileUpload1.PostedFile.ContentType);
FileUpload1.SaveAs(MapPath("~/Uploads/" + FileUpload1.FileName));
}
else
{
Label1.Text = "No file received.";
}
}
Como resultado, após clicar no botão submit o arquivo será salva na pasta destino e exibirá suas popriedades na label:
The Panel Control
O Panel é usado como um container. Ele é útil quando você precisar agrupar um grupo de controles. O exemplo mais comum é colocar vários controles dentro dele e conseguir esconder e exibir todos alterando somente a propriedade visible do Panel.
No asp.net sua tag é <asp:Panel> quando renderizado no html será gerado uma <div>. Algumas propriedades do Panel:
- BackImageUrl: Usado para exibir uma imagem de fundo no Panel;
- HorizontalAlignment: Define o alinhamento horizontal dos controles que estão dentro do Panel;
- Wrap: Especifica se os controles que estão dentro do Panel continuam na próxima linha quando acabar o espaço da linha.
- DefaultButton: Especifica o botão que será disparado quando o focu estiver no Panel e o usuário pressionar a tecla Enter.
Código aspx:
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="ButtonShowHide" runat="server" Text="Login: hide form"
width="200" onclick="ButtonShowHide_Click"/>
<asp:Panel ID="Panel1" runat="server" BackColor="Beige" Width="200">
<asp:Label ID="Label1" runat="server" Text="User name: "></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Password: "></asp:Label>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="ButtonLogin" runat="server" Text="Login" />
</asp:Panel>
</div>
</form>
</body>
Código c#:
protected void ButtonShowHide_Click(object sender, EventArgs e)
{
Panel1.Visible = !Panel1.Visible;
if (Panel1.Visible)
{
ButtonShowHide.Text = "Login: hide form";
}
else
{
ButtonShowHide.Text = "Login: show form";
}
}
Neste exemplo clicando no botão o usuário ira alterar em esconder e exibir os controles de login.
The MultiView and View Controls
Assim como o Panel, os controles de MultiView e View trabalham como container para agrupar controles. A MultiView funciona como container da View, que por sua vez é o container dos demais controles. Dentro de uma MultiView podem contar várias Views. Esses controles foram criados para trabalhar juntos e não podem ser usados separadamente.
Você deve usar a propriedade ActiveViewIndex ou o método SetActiveView para definir qual View é exibida. Se o ActiveViewIndex for definido como -1, nenhum controle de View será exibido, se for passada uma View inválida ou null para o método SetActiveView uma exception será disparada. Repare que somente uma View pode estar ativa por vez.
Um exemplo útil do uso desses controles é a criação de wizards, onde por exemplo um usuário deve seguir de 3 a 4 passos para se registrar em um site. Cada passo desse registro pode estar em uma View diferente, veja na imagem:
Para gerenciar esta página foram criados command buttons para navegação. Quando o usuário clicar no botão através da propriedade CommandName do CommandEventArgs será possível identificar no evento qual botão foi clicado. Veja o código:
public partial class ViewControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void Button_Command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Step1Next":
MultiView1.ActiveViewIndex = 1;
break;
case "Step2Back":
MultiView1.ActiveViewIndex = 0;
break;
case "Step2Next":
MultiView1.ActiveViewIndex = 2;
break;
case "Step3Back":
MultiView1.ActiveViewIndex = 1;
break;
case "Finish":
//hide control from user to simulate save
MultiView1.ActiveViewIndex = -1;
break;
}
}
}
Quando a página for exibida sera mostrada a primeira View para o usuário como o primeiro passo, e conforme ele for navegando as demais Views vão sendo exibidas e outras escondidas:
The Wizard Control
O controle Wizard é um controle complexo que agrega controles para que o usuário possa de forma continua inserir informações em sua webpage. O Wizard funciona de forma semelhante aos controles de MultiView e View explicados anteriormente. A idéia dele é criar um passo a passo lógico de um processo.
O que é feito com o Wizard pode muito bem ser feito com várias páginas, mas esta é a diferença principal, com o Wizard você centraliza tudo em uma unica página, facilitando o processo de desenvolvimento.
O Wizard possui um header para customizar com informações do passo especifico que o usuário esta naquele momento. Possui uma sidebar que irá conter os controles de navegação entre cada passa do Wizard. É possível programar qual passo é exibido, não obrigando o usuário a passar em todos os passos de forma linear caso não queira.
O que determina qual botão é exibido ou não é a propriedade StepType da classe BaseWizardStep. Os valores disponíveis são:
- WizardStepType.Auto: este é o valor padrão. Os botões são renderizados com base na localização do passo dentro da coleção do Wizard;
- WizardStepType.Complete: este é o passo final da coleção de passos, os botões de Final e Anterior serão exibidos;
- WizardStepType.Start: este é o primeiro passo, e somente o botão de próximo irá aparecer;
- WizardStepType.Step: este é um passo intermediário, os botões de Próximo e Anterior são renderizados.
Após cada passo do Wizard ser criado, foi criado um código para popular a Label quando chegar ao Resumo, também foi adicionado código no evento Page_Load da página para determinar o primeiro passo do Wizard. E no evento Wizard1_FinishButtonClick foi adicionado código para exibir os resultados na label.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Wizard1.ActiveStepIndex = 0;
}
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
Wizard1.Visible = false;
Response.Write(string.Format("Finished<br />{0}", Label1.Text));
}
protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if (Wizard1.WizardSteps[e.NextStepIndex].Title == "Summary")
{
StringBuilder sb = new StringBuilder();
foreach (WizardStep ws in Wizard1.WizardSteps)
{
foreach (Control c in ws.Controls)
{
if (c is CheckBox)
{
CheckBox cb = (CheckBox)c;
if (cb.Checked)
{
sb.AppendFormat("{0}<br />", cb.Text);
}
}
}
}
Label1.Text = sb.ToString();
}
}
Quando a página for exibida, o primeiro passo será exibido ao usuário (Exterior), o usuário pode ir passo a passo ou ir direto para o passo final clicando em Finish. Quando clicar no Finish o controle de Wizard será escondido e irá aparecer o Resumo onde a Label é populada com as opções escolhidas.
The Xml Control
O controle Xml é utilizado para exibir o conteúdo de arquivos Xml. Este controle é bastante útil quando seus dados estão armazenados em arquivo Xml e você precisa executar uma transformação para Extensible Stylesheet Language (XSL). Os dados podem ser renderizados e exibidos para o usuário utilizando o controle Xml.
O documento Xml será exibido se especificada a propriedade DocumentSource ou a propriedade DocumentContent. A propriedade DocumentSource aceita uma string que contém o caminho do arquivo Xml a ser carregado. A propriedade DocumentContent aceita uma string com o conteúdo do Xml.
A propriedade TransformSource aceita um parâmetro opcional que contém o caminho de um arquivo XSL que será aplicado ao Xml. Esta propriedade também aceita um objeto do tipo Transform. O controle Xml contém a propriedade TransformArgumentList que aceita parâmetros que serão passados para a transformação XSL.
No código a seguir o controle Xml é utilizado para exibid o contéudo de um arquivo Xml após uma transformação XSL é aplicada. A seguir o arquivo Xml e o arquivo XSL:
Arquivo XML: ProductList.xml
<?xml version="1.0" encoding="utf-8" ?>
<ProductList>
<Product Id="1A59B" Department="Sporting Goods" Name="Baseball" Price="3.00" />
<Product Id="9B25T" Department="Sporting Goods" Name="Tennis Racket" Price="40.00" />
<Product Id="3H13R" Department="Sporting Goods" Name="Golf Clubs" Price="179.00" />
<Product Id="7D67A" Department="Clothing" Name="Shirt" Price="12.00" />
<Product Id="4T21N" Department="Clothing" Name="Jacket" Price="45.00" />
</ProductList>
Arquivo XSL: ProductList.xsl
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:labs="http://labs.com/mynamespace">
<xsl:template match="/">
<html>
<head>
<title>Product List</title>
</head>
<body>
<center>
<h1>Product List</h1>
<xsl:call-template name="CreateHeading"/>
</center>
</body>
</html>
</xsl:template>
<xsl:template name="CreateHeading">
<table border="1" cellpadding="5">
<tr >
<th bgcolor="yellow">
<font size="4" >
<b>Id</b>
</font>
</th>
<th bgcolor="yellow">
<font size="4" >
<b>Department</b>
</font>
</th>
<th bgcolor="yellow">
<font size="4" >
<b>Name</b>
</font>
</th>
<th bgcolor="yellow">
<font size="4" >
<b>Price</b>
</font>
</th>
</tr>
<xsl:call-template name="CreateTable"/>
</table>
</xsl:template>
<xsl:template name="CreateTable">
<xsl:for-each select="/ProductList/Product">
<tr>
<td align="center">
<xsl:value-of select="@Id"/>
</td>
<td align="center">
<xsl:value-of select="@Department"/>
</td>
<td>
<xsl:value-of select="@Name"/>
</td>
<td align="right">
<xsl:value-of select="format-number(@Price,'$#,##0.00')"/>
</td>
</tr>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Para exibir o resultado foi adicionado um controle Xml na página e o código a seguir:
public partial class XmlControlVb : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Xml1.DocumentSource = "~/App_Data/ProductList.xml";
Xml1.TransformSource = "~/App_Data/ProductList.xsl";
}
}
Quando a página é exibida os arquivos são carregados e o resultado:
Com o controle Xml encerra o capítulo 4!!
