Lição 1: Exploring Common Server Controls

Esta lição fala sobre os controles básico que usamos na web. Como postei
 no twitter, não deixa de ser interessante, muitas coisas que na prática
 não observamos, acabamos descobrindo quando pegamos um pouco de teoria.

Esta lição fala sobre alguns dos controles do asp.net, que a cada versão
 lança mais controles para poder disponibilizar ao usuário final do
sistema ou site uma experiência cada vez mais rica.

Os controles do asp.net herdam a classe WebControl, diferente dos
controles HTML. Os controles asp.net facilitam a manipulação dos mesmos
do lado do servidor, porém o resultado final para o cliente sera sempre
html, os controles do asp.net quando renderizados no browser são
renderizados como controles html comuns.

Um controle asp.net proporciona mais funcionalidades do que controles html, outra vantagem interessante é que eles tem a capacidade de detectar a capacidade do navegador e renderizar o código ideal para aproveitar o potencial do navegador. Além disso existem controles asp.net que não tem controles correspondente no html, são controles que surgiram para facilitar em algumas tarefas como o Calendar, Wizard, e a GridView.

A lição lista e explica as propriedades que são comuns nos controles asp.net. Não irei explicar cada uma, apenas colocarei aqui as que foram destacadas:
  • AccessKey
  • BackColor
  • BorderColor
  • BorderWidth
  • BorderStyle
  • CssClass
  • Style
  • Enabled
  • EnableTheming
  • EnableViewState
  • Font
  • ForeColor
  • Height
  • SkinID
  • TabIndex
  • ToolTip
  • Width
Apesar de existirem essas propriedades, onde a maioria é sobre o estilo do controle é recomenado o uso de uma folha de estilo, CSS, como já mostrado em lições anteriores.

A lição fala sobre a atualização de versões anteriores. O engine de renderização do asp.net 3, diferente do asp.net 3.5 e do 4. Claro que o objetivo é sempre melhorar, e fazer com que os códigos htmls renderizados para o usuário final sejam mais rápidos e eficientes. Porém quando migramos uma aplicação/site do asp.net 3.5 por exemplo para o 4, devido essa diferença do engine alguns itens em nossas páginas podem mudar.

O que fazer?

Existem duas soluções, a ideal, revisar seu código asp.net e ver o que mudou para ser melhor aproveitado. Porém como sabemos que nem sempre isso é possível, temos a opção de definir que nossa aplicação continuará usando o engine do framework 3.5. Pode fazer isso definindo no arquivo web.config:


<system.web>
<pages controlrenderingcompatibilityversion="3.5">
</pages>
</system.web>


Outro aspecto que é interessante ressaltar é que os controles do asp.net renderizam códigos html utilizando tabelas, como sabemos que é algo ultrapassado você tem a opção de alterar a propriedade RenderOuterTable para false, onde desta forma tudo sera renderizado conforme você trabalhou na sua folha de estilo.

Vamos aos controles desta lição:

O controle Label


O controle Label é utilizado quando você precisa exibir um texto em um determinado local de sua página, porém só utilize o controle Label do asp.net se precisa que seu valor seja dinâmico, quando é necessário altera-lo em tempo de execução, caso contrário utilize um texto estático do html que irá consumir menos recurso.

O controle Label é muito utilizado em formulários de preenchimento de dados, onde costumamos colocar o label a esquerda e os controles de textbox a direita por exemplo. Como os labels são muito comuns nesses casos, você pode definir teclas de atalhos do teclado para os labels. Por exemplo quando ele pressionar (Alt + U) ir para o textbox "Usuário''. Isto é muito útil com usuário que já tem uma experiências com teclado e não costumam utilizar o mouse, mas principalmente por questão de acessibilidade, pois nem todos os usuário hoje tem capacidade de controlar um mouse.

Para fazer esta associação da label e dos textbox a teclas de atalhos siga os passos:

  1. Adicione um controle Label e um Textbox;
  2. Defina a propriedade AccessKey da label para a letra que ativará o atalho, neste exemplo use a letra U;
  3.  Na propriedade Text da label coloque: Usuário, desta forma irá renderizar: Usuário;
  4. Na propriedade AssociatedControlID coloquei o ID do seu Textbox;
O que acontecerá? Quando o usuário estiver nessa página e pressionar (Alt + U) automaticamente o textbox de usuário irá receber o foco.

O controle Literal

O Literal deve ser utilizado quando deseja adicionar HTML puro em sua página, apesar da idéia parecer semelhante ao Label, o Literal não herda de WebControl e não acrescenta qualquer elemento html a página, onde já o label acrescenta um em sua página.

O Literal contém a propriedade Mode que é especificada a forma com que o conteúdo do Literal será tratado na página web. Existem 3 opções:
  • PassThrough: O texto será processado como ele foi passado ao Literal executando códigos htmls e até mesmo scripts que serã processados pelo navegador.
  • Encode: O conteúdo do texto é tratado como texto puro e não é processado como html ou scripts.
  • Transform: O conteúdo do texto é convertido para a linguagem do navegador podendo ser HTML, XHTML, WML ou cHTML. Onde nesses casos tags inválidas são removidas automaticamente.
 Abaixo exemplo de código e uma imagem de como o navegador processa ambos os casos:


protected void Page_Load(object sender, EventArgs e)
{
Literal1.Text =@"This is an <font size="7">example</font>"+
"<script>alert(""Hi from Literal1"");</script>";
Literal2.Text =@"This is an <font size="7">example</font>"+
"<script>alert(""Hi from Literal2"");</script>";<br>
Literal3.Text =@"This is an <font size="7">example</font>"+
"<script>alert(""Hi from Literal3"");</script>";

Literal1.Mode = LiteralMode.Encode;
Literal2.Mode = LiteralMode.PassThrough;
Literal3.Mode = LiteralMode.Transform;
}



Resultado:

imagem



O controle TextBox
Este é o que tem menos segredos dos citados pela lição. A lição explica as três propriedades de TextMode, onde a primeira e a padrão é SingleLine, MultiLine (onde conforme for digitando informação o textbox vai aumentado suas linhas e criando uma barra de rolagem) e Password (onde as informações digitadas recebem uma mascara para não exibir o que esta sendo digitado).

O TextBox possui o evento padrão TextChanged que é acionado quando o valor o texto é alterado, porém vale ressaltar que ele so irá executar o evento no servidor se a propriedade AutoPostBack estiver como true ou quando outro controle efetuar o Postback.

O controle CheckBox
 O controle CheckBox é utilizado quando queremos disponibilizar ao usuário a escolha ou não de algo.

Simplesmente a opção de Sim ou Não. Utilize a propriedade TextAlign para definir em qual lado da caixa de seleção ficará o texto. A propriedade Checked é utilizada para definir e obter o status do checkbox.


Assim como o textBox o CheckBox possui o evento CheckedChanged que é ativado quando seu valor é alterado, vale lembrar a mesma observação da propriedade AutoPostBack.


O controle RadioButton

Pensando que o CheckBox é um controle que da a opção de Sim e Não ao usuário, o controle RadioButton oferece várias opções para o usuário escolher uma sobre determinado grupo de itens. Para agrupar vários RadioButtons e garantir que somente um seja escolhido especifique o nome do grupo para todos eles, usando a propriedade GroupName. Para que exista um padrão, defina a propriedade Checked para true do RadioButton desejado.


Outra opção ao invés de criar vários RadioButton é criar um RadioButtonList e adicionar seus itens. 


As duas técnicas mencionadas acima são chamadas de Payment Type quando são usados vários controles RadioButton e Shipping Type quando é implementado um RadioButtonList.


O controle DropDownList

A intenção do DropDownList é a mesma do RadioButtonList, oferecer diversas opções para o usuário, a grande diferente é que o RadioButtonList exibe todas na tela, ja o DropDownList as opções ficam ocultas até que o usuário clique no controle e exiba todas as opções. O DropDownList deve ser escolhido quando existir um grande número de opções.

Caso não defina qual dos itens será o padrão o asp.net automaticamente deixará o primeiro item como padrão e já vira selecionado.

Você pode popular um DropDownList utilizando o método DropDownList.Items.Add passando como parâmetro uma string ou uma instância do objeto ListItem. Veja o exemplo no código abaixo:


for (int i = 1900; i < DateTime.Now.Year; i++)
{
BirthYearDropDownList.Items.Add(i.ToString());
}
if (!IsPostBack)
{
BirthYearDropDownList.SelectedIndex = 85;
}


Manipule o evento SelectedIndexChanged para executar algo quando o usuário selecionar algum item. Para verificar qual item esta selecinado utilize a propriedade SelectedValue.

  O controle ListBox

 O ListBox é como um CheckBoxList que permite ao usuário selecionar nenhum ou vários itens, assim como o DropDownList sua vantagem é que os dados ficam reduzidos não sendo exibidas todas as opções, ele cria uma barra de rolagem para navegar entre as opções.


Por padrão o ListBox permite ao usuário selecionar apenas uma opção, mas você pode alterar a propriedade SelectionMode para Multiple, permitindo assim selecionar várias opções. A dificuldade é que o usuário entenda como selecionar mais de um item, para isso ele deve manter a tecla Ctrl pressinada e escolher os itens desejados.


  O controle Button

O Button renderiza um botão comum na página que serve para executar um postback ao servidor. Existe duas formas de fazer isso, a padrão que é executando um submit, através do evento click do botão, como já foi explicado em lições anteriores. E um botão de comando.


Caso você tenha vários botões na sua página com funções semelhantes ao invés de criar o evento clique para cada botão, pode criar um único evento de comando que será executado por todos os botões. Defina o mesmo evento OnCommand para todos e defina a propriedade CommandName distinta para cada botão, que será a forma de identificar qual foi o botão clicado.


Exemplo:


<asp:button id="back" runat="server" oncommand="Button_Command" text="Back" commandname="Back">
<asp:button id="up" runat="server" oncommand="Button_Command" text="Up" commandname="Up">

protected void Button_Command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Back":
FeedbackLabel.Text = "Back";
break;
case "Up":
FeedbackLabel.Text = "Up";
break;
}
}</asp:button></asp:button>


Simples e útil!!

Saindo um pouco dos principais controles do asp.net a lição mostra também como tornar controles html controles de servidor. Em resumo a grande verdade é, basta definir a propriedade ID e adicionar a propriedade runat="server". Mesmo que seja uma simples div html, executando este processo você conseguirá acessar esta div pelo seu código c# e manipula-la pelo servidor.


A lição até mostra uma página asp, migrando para asp.net sem trocar os controles:




Asp:

<title>Customer Page</title>

<form name="Form1" method="post" action="update.asp" id="Form1">
<input name="CustomerName" type="text">
id="CustomerName" ><br>
<input name="SubmitButton" type="submit">
value="Submit" id="SubmitButton" >
</form>

Asp.NET:

<title>Customer Page</title>
<br>
<form name="Form1" method="post" id="Form1" runat="”server”"><br>
<input name="CustomerName" type="text">
id="CustomerName" runat=”server” ><br>
<input name="SubmitButton" type="submit">
value="Submit" id="SubmitButton" runat=”server”>
</form>


Repare que existe uma mudança na tag form também. Claro que isso limita um pouco sua página, pois o uso de controles asp.net deixará sua aplicação mais rica. Porém como vimos é possível.

Lição 2: Exploring Specialized Server Controls

Se olharmos a alguns anos atras, criar um simples calendário em uma página web era uma tarefa no minimo chata, era necessário criar tabelas, linhas e colunas, e adicinoar hyperlink nas datas, o javascript até poderia ajudar neste trabalho, mas ainda assim era uma tarefa chata.

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:
  1. Na ToolBox arraste o Controle Table para sua página.
  2. Vá ao arquivo de code-behind e crie o evento PreInit do seu formulário.
  3. Dentro deste evento escreva um loop para criar 5 linhas em seu controle.
  4. Dentro deste loop, adicione outro loop para criar 3 célular dentro de cada linha.
  5. Dentro do último loop modifique a propriedade TableCell.Tex para identificar a linha e a coluna.



protected void Page_PreInit(object sender, EventArgs e)
{
  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á:

imagem 

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="imagem". 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.


Abaixo 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.
</asp:imagemap>


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.


Understanding the HotSpotMode Property
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.
O código abaixo demonstra como usar, teremos uma imagem que contém 3 cores e é possível definir a região de cada cor:

public partial class HotSpotControl : System.Web.UI.Page
{
  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;                          
    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);
  }
}         
Resultado quando se clica no retângula verde: imagem

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 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.
O Calendar tem uma série de propriedades que permite você ajustar seu formato:
  • 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;
  • VisibleDate: define qual data será exibida quando o calendário for exibido;
  • WeekendDayStyle: estilo dos dias de final de semana.
  • O Calendar também possui eventos para se trabalhar. O evento primário é o SelectionChanged, ele causa um potback e é disparado no momento em que o usuário seleciona uma nova data no calendário. Dentro desta evento é possivel receber a data selecionada através da propriedade SelectedDate. 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);</datetime,string></datetime,>   
       
    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);                  
         }
    } 
    

    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:
    imagem
    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></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.
    É importante que você fala uma análisa do arquivo que esta sendo enviado para o servidor. Você pode analisar características como nome do arquivo, tamanho e tipo. Quando estiver tudo ok, utiliza o método SaveAs para completar o upload.

    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:

    imagem

    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></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.

    No exemplo a seguir com o clique do botão o usuário consegue esconder um grupo de controles que estão dentro do Panel:

    
    Código aspx:
        
    <form id="form1" runat="server">
    <div>
    <asp:button id="ButtonShowHide" runat="server" text="Login: hide form" <br="">
    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>
    
    <asp:textbox id="TextBox1" runat="server"></asp:textbox>
    <br><br>
    <asp:label id="Label2" runat="server" text="Password: "></asp:label>
    <br><br>
    <asp:textbox id="TextBox2" runat="server"></asp:textbox>
    <br><br>
    <asp:button id="ButtonLogin" runat="server" text="Login">
    </asp:button></asp:panel>
    </asp:button> 
    </form>
    
       
       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:

    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:

    imagem

    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.
    No exemplo a seguir o controle de Wizard é montado para dar opção do usuário escolher alguns itens do seu veículo. Os passos criados no Wizard são: Exterior, Interior, Opcionais, and Resumo. No Exterior contem 3 RadioButtons para escolher a cor externa: vermelho, azul ou preto. No passo do Interior contém 2 RadioButton para escolher se quer banco de couro ou de pano. Nos Opcionais contém CheckBox para escolher: Rádio, Bancos Aquecidos e Ar-Condicionado. No Resumo tem uma Label que é populada com as opções escolhidas. Veja como ficou:


    imagem

    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">
    </product></product></product></product></product></productlist>    
        
        
    Arquivo XSL: ProductList.xsl
    
    <!--?xml version="1.0" encoding="utf-8" ?-->
    <xsl:stylesheet version="1.0" <br="">
    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="/">
    
    <title>Product List</title>
    <center><br>
    <h1>Product List</h1>
    <xsl:call-template name="CreateHeading">
    </xsl:call-template></center></xsl:template></xsl:stylesheet>    
    <xsl:template name="CreateHeading">
    <br><br><br><br><br><br><br><xsl:call-template name="CreateTable">
    </xsl:call-template><table border="1" cellpadding="5">
    <tbody>
    <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>
    </tbody></table>
    </xsl:template>
    <xsl:template name="CreateTable">
    <xsl:for-each select="/ProductList/Product">
    </xsl:for-each></xsl:template>     </td></tr><tr>
    <td align="center">
    <xsl:value-of select="@Id">
    </xsl:value-of>
    <td align="center">
    <xsl:value-of select="@Department">
    </xsl:value-of>
    <td>
    <xsl:value-of select="@Name">
    </xsl:value-of>
    <td align="right">
    <xsl:value-of select="format-number(@Price,''$#,##0.00'')">
    </xsl:value-of></td>
    </tr>
    </tbody></table>
    

    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:

    imagem
    Com o controle Xml encerra o capítulo 4!!