Compartilhar via


Passo a passo: Criando elementos reusáveis com controles de usuário do ASP.NET

Controles de usuário ASP.NET lhe permitem encapsular a funcionalidade de vários controles de servidor em uma unidade.Controles de usuário são compostos de um ou mais controles de servidor ASP.NET —Button Controles, TextBox Controles e assim por diante — juntamente com qualquer código que é necessário para os controles por Formulário a função que você deseja realizar.O controle do usuário também pode incluir propriedades personalizadas ou métodos que revelem a funcionalidade do controle do usuário para um contêiner, que é normalmente um página ASP.NET.

Nesta explicação passo a passo, você criará um controle de usuário ASP.NET que atua como um controle seletor.O controle seletor possui duas listas, com um conjunto de opções numa lista (a origem).Os usuários podem selecionar itens na SourceList Lista e em seguida, adicione os itens para o TargetList Lista.

Este explicação passo a passo tem três partes, da seguinte maneira:

  • Na primeira parte, você criará o controle de usuário básico, adicionando controles e código.

  • Na segunda parte, você criará uma nova página ASP.NET (a página host), e em seguida, adicionará o controle de usuário à página ASP.NET.

  • Na terceira parte, você adicionará propriedades e métodos personalizados para o controle de usuário para que você possa interagir com o controle da página host.

Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:

  • Criar um controle de usuário e adicionar controles de servidor ASP.NET ao controle de usuário.

  • Criar propriedades e um método no controle de usuário.

  • Adicionar um controle de usuário a uma página host.

  • Adicionar código à página host para tratar o controle de usuário.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário o seguinte:

  • A ferramenta de desenvolvimento Web da Microsoft Visual Web Developer.

  • O Framework Microsoft .NET .

Esta explicação passo a passo presume que você tenha uma compreensão geral de trabalho no Visual Web Developer.Para obter uma introdução, consulte Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer.

Criando o Site Web

Se você já tiver Criado um site da Web em Visual Web Developer (por exemplo, por concluir Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site e Ir para a Avançar seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File menu, aponte para Novoe em seguida, clique em Site.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. No mais Direito. Local Digite o nome da pasta onde você deseja manter as páginas do site da Web.

    Por exemplo, digite a nome da pasta C:\WebSites.

  5. Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar no.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando o Controle do Usuário

Criar um controle de usuário é semelhante a criar uma página da Web ASP.NET.Na verdade, um controle de usuário é eficientemente um subconjunto de um página ASP.NET e pode incluir a maioria dos tipos de elementos que você colocar em um página ASP.NET.

Para criar um controle de usuário

  1. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  2. Na Adicionar novo item <Path> caixa de diálogo, em Modelos Visual Studio instaladoClique em Web User Control.

  3. Na Name (Nome) caixa, digite ListPicker.

    O arquivo controle de usuário terá uma extensão .ascx, que é Adicionado automaticamente para ListPicker.

  4. Na Linguagem lista, Selecionar a programação Idioma que você prefere trabalhar no.

  5. Clique em Adicionar.

    O novo controle é criado e aberto no o Designer.A marcação para o controle for semelhante a que para uma página, com uma exceção importante: não há nenhum @ Page diretiva na parte superior da página.Em vez disso, há um @ Controle Diretiva, que identifica o arquivo para ASP.NET como um controle de usuário.

Adicionando Controles do Servidor ao Controle do Usuário

Nesta parte da o explicação, você adicionará os controles que compõem a interface do usuário ao controle do usuário.

Para adicionar os controles do servidor

  1. Alterne para o modo Design. (Se você estiver trabalhando com uma página code-behind, alterne para o controle ListPicker.aspx e alterne para o modo Design).

  2. Sobre o Tabela Menu, clique em Inserir tabela.

  3. Use o Inserir tabela caixa de diálogo para criar uma tabela com uma linha e três colunas e em seguida, clique em OK.

    Você está criando a tabela para manter os controles; ou seja, uma tabela de layout.

  4. Na tabela, na coluna esquerda, digite Available e, em seguida, pressione ENTER para criar uma nova linha.

  5. Na coluna à direita, digite Selected e, em seguida, pressione ENTER para criar uma nova linha.

  6. a partir de Padrão Agrupar na caixa de ferramentas, arraste os controles a seguir para a tabela e definir suas propriedades, conforme indicado.

    Controle

    Propriedades

    Arraste um ListBox (caixa de listagem) para a coluna esquerda e colocá-lo em Disponível.

    Height 200px

    ID: SourceList

    Width 200px

    Arraste um Button para a coluna do meio.

    ID: AddAll

    Texto: >>

    Arraste um Button para a coluna do meio.

    ID: AddOne

    Texto (A barra de espaços) > ( A BARRA DE ESPAÇOS)

    Arraste um Button para a coluna do meio.

    IDRemover:

    Texto (SPACEBAR)X(SPACEBAR)

    Arraste um ListBox (caixa de listagem) Para o Direito de coluna e colocá-lo em Selected.

    Height 200px

    ID: TargetList

    Width 200px

    ImageButton Controles podem ser usados em vez de Button Controles para que seja exibida uma imagem que responde a cliques do mouse.No entanto, para esta explicação, é suficiente usar o texto que emula o tipo de elemento gráfico que é freqüentemente usada para indicar Adicionar Todos, Adicionar e Remover, que são dois sinais de "maior que" (>>), um sinal "menor que" (>), e o X, respectivamente.

  7. Se você desejar, ajuste a largura e altura das colunas da tabela à sua preferência.

  8. Clique na SourceList Na lista e depois em Propriedades, para o Items Propriedade, clique no botão reticências (…).

    O Editor de coleção ListItem caixa de diálogo é exibida.

  9. Clique em Adicionar três vezes para adicionar três itens

  10. Para o primeiro, segundo e terceiro item, em Propriedades ListItemDefinido Texto Para A, B e C, respectivamente.

    Você está criando dados de teste por enquanto.Posteriormente neste exame Através, em "Adicionar propriedades personalizadas e métodos para o controle de usuário, Você removerá os dados de teste e adicione um código para carregar o SourceList Liste dinamicamente.

Adicionando Código para Tratar Seleções do Usuário

Os usuários irão selecionar itens usando os botões que estão na coluna do meio da tabela.Portanto, é maior parte do código para o controle no manipuladores para o Clique em Os eventos.

Para adicionar código para tratar seleções do usuário

  1. No modo Design, clique duas vezes o > > (AddAll botão para criar um manipulador de eventos para a Clique em Evento e, em seguida, Adicionar o seguinte código realçado.

    Protegido sub AddAll_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata AddAll.Click
     TargetList.SelectedÍndice =-1 Dim li como ListItem Para cada LI em SourceList.Items.    AddItem(li) Next
    End Sub
    
    Protegido void {AddAll_Click(object sender, EventArgs e)
      TargetList.SelectedIndex =-1;  foreach (ListItem LI em SourceList.itens)  {      AddItem(li);  }
    }
    

    O código faz um loop por todos os itens lista na SourceList Lista.Para cada item, ele chama o AddItem Método e passa-o item atual.Mais tarde neste procedimento, você escreverá o código para o AddItem Método.

  2. Switch Para criar modo de exibição, clique duas vezes o > (AddOne botão para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub AdConcluído_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata AdConcluído.Click
     Se SourceList.SelectedIndex > = 0 Then    AddItem(SourceList.SelectedItem) End se
    End Sub
    
    Protegido void {AddOne_Click(object sender, EventArgs e)
      if(SourceList.SelectedIndex >= 0)  {      AddItem(SourceList.SelectedItem);  }
    }
    

    Esse código verifica primeiro que houver uma seleção na SourceList Lista.Se houver, as chamadas de código a AddItem Método, você escreverá posteriormente neste procedimento, passando para ele o item é selecionado no momento em que o SourceList Lista.

  3. Alterne para modo de design, clique duas vezes o X (Remove botão para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub ReMover_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata ReMover.Click
     Se TargetList.SelectedIndex > = 0 Then   TargetList.Items.RemoveAt(TargetList.SelectedIndex)   TargetList.SelectedÍndice =-1 End se
    End Sub
    
    Protegido void {Remove_Click(object sender, EventArgs e)
      Se (TargetLista.SelectedÍndice > = 0)  {      TargetList.itens.RemoveAt(TargetList.SelectedIndex);      TargetList.SelectedIndex =-1;  }
    }
    

    O código primeiro verifica que o TargetList lista contém uma seleção.Se houver uma seleção, o código remove o item selecionado da lista e da seleção.

  4. Adicionar o seguinte AddItem Método:

    Protected Sub AddItem(ByVal li As ListItem)   TargetList.SelectedIndex = -1   TargetList.Items.Add(li) End Sub
    
    protected void AddItem(ListItem li) {    TargetList.SelectedIndex = -1;    TargetList.Items.Add(li); }
    

    Esse código incondicionalmente adiciona um item para o TargetList Lista.Posteriormenteste nesta explicação, em " Adicionando Propriedades Personalizadas e Métodos ao Controle do Usuário", você irá melhorar esse código, adicionando a opção de determinar se há duplicatas.

Você não pode testar um diretamente controle do usuário, porque ele deve ser hospedado numa página.Na próxima seção, você criará uma página Web ASP.NET onde você pode trabalhar com o controle.

Usando o Controle do Usuário

Como qualquer controle, um controle de usuário deve estar hospedado numa página.Nesta parte da explicação, você criará uma página host para o controle, em seguida, você adicionará um controle de usuário à página.

Para criar uma página host

  1. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  2. Em Modelos Visual Studio instaladoClique em Web Form.

  3. Na Name (Nome) caixa, digite HostUserControl.

  4. Na Linguagem lista, Selecionar o idioma que você prefere trabalhar e em seguida, clique em Adicionar.

    A nova página aparece no criador.

Para adicionar o controle do usuário à página

  1. Alternar para modo Design.

  2. A partir do Solution Explorer, arraste o arquivo do controle do usuário (ListPicker.ascx) para a página.

    Observação:

    Certifique-se de que você está no modo Design quando você arrastar ListPicker.ascx para a página.

    O controle aparece no o criador.

  3. Alterne para modo de origem.

    Colocar o controle do usuário na página cria dois novos elementos na página:

    • Na parte superior da página é um novo @ Register diretiva e ela é semelhante à seguinte:

      < % @ Register Src="ListPicker.ascx " TagNome = "ListPicker" TagPrefixo = "uc1" % &Gt; 
      

      O @ Register diretiva for necessária, pois o Controle de Usuário é um componente externo.Os valores que estão na diretiva fornecem informações que são exigida pelo ASP.NET para localizar o controle quando compilar e executar a página.Juntos, o TagPrefix e TagName Atributos especificar como o controle de usuário é declarado na página.O Fonte Atributo Especifica o arquivo, e se ele for necessário, o caminho, w aqui o arquivo de origem está localizado.

    • O segundo elemento novo é o elemento para o controle de usuário e tem a seguinte aparência:

      < uc1:ListPicker ID = "ListPicker1" Runat = "Servidor" / &Gt;
      

      O elemento a uma controle de usuário se parece com o elemento para um controle de servidor ASP.NET comum.A diferença é que o controle de usuário tem (prefixo uma marca diferenteuc1 e (um nome de marca exclusivoListPicker).Embora os valores foram estabelecidos por automaticamente o @ Registerdiretiva quando você colocado o controle de usuário na página, você pode usar qualquer prefixo de marca e nome de marca para o controle de usuário, desde que os valores são não AL Pronto sendo usadas na página.

Testando o Controle do Usuário

Agora, você pode testar a versão preliminar do controle do usuário.

Para testar o controle do usuário

  1. Pressione CTRL+F5 para executar a página.

    A página aparece no navegador e você pode ver as duas listas e três botões que compõe seu controle de usuário.

  2. Clique no > > (AddAll botão.

    Tudo valores a partir de SourceList Lista são copiados para o TargetList Lista.

  3. Clique em cada item de TargetList Listar por sua vez e clique a X (Remove botão até que você removeu todos os itens.

  4. Selecione um Simples valor na SourceList Lista e clique a > Botão (AdConcluído).

    O único valor será copiado para o TargetList Lista.

  5. Opcionalmente, experimente mais com o controle até que ter certeza que ele funciona como você deseja.

  6. Quando você terminar, feche o navegador.

Adicionando Propriedades e Métodos Personalizados ao Controle do Usuário

A partir de agora o seu controle do usuário funciona, mas ele é não ainda útil como um controle de uso geral.Uma versão mais prática do controle de usuário permitiria que você fizesse o seguinte:

  • Especificar a lista de itens para Exibir in a SourceList Liste dinamicamente.

  • Obter a lista de itens que o usuário Selecionado in a TargetList Lista.

  • Especificar se deseja permitir Duplicar valores na TargetList Liste, opcionalmente.

  • Fornecem uma maneira para os usuários limpar Todos os Itens in a TargetList Lista rapidamente.

A execução dessas tarefas requer que a página host possa se comunicar com o controle do usuário, tanto para compartilhar valores (definir e ler as propriedades) quanto para executar comandos (chamar métodos).Nesta parte da explicação, você irá alterar o controle de usuário e adicionar-lhe alguns membros (propriedades e métodos).

Você adicionará duas propriedades ao controle do usuário.O Primeiro Propriedade recupera a lista de itens que estão na TargetList Lista.O segundo propriedade permite que você especifique se a TargetList Lista aceita valores duplicados.Mais tarde contidas nesta seção, você adicionará um método que permitirá que você preencher o SourceList Lista.

Para adicionar código para definir propriedades personalizadas

  1.    Para o ListPicker Controle, aberto ou Switch para o arquivo de código.

  2. Use o código a seguir para criar o SelectedItems Propriedade:

    Public ReadOnly Property SelectedItems() As ListItemCollection   Get      Return TargetList.Items   End Get End Property
    
    public ListItemCollection SelectedItems {   get { return TargetList.Items ; } }
    

    O SelectedItems Propriedade recupera os valores que estão na TargetList Lista.Ele pode ser somente leitura, que você irá nunca tenha que definir os valores na TargetList Liste por meio de programação.

  3. Use o código a seguir para criar o AllowDuplicates Propriedade:

    Public Property AllowDuplicates() As Boolean   Get      Return CType(ViewState("allowDuplicates"), Boolean)   End Get   Set(ByVal value As Boolean)      ViewState("allowDuplicates") = value   End Set End Property
    
    public Boolean AllowDuplicates {    get    {        return (Boolean)ViewState["allowDuplicates"];    }    set    {        ViewState["allowDuplicates"] = value;    } }
    

    O AllowDuplicates Propriedade é uma Leitura/Gravação a propriedade.O valor daAllowDuplicates Propriedade deve ser salva explicitamente no Exibir do estado de modo que ela persiste entre idas.(O SelectedItems Propriedade não precisa ser explicitamente salvas em exibir estado, porque o TargetList lista salva os valores em Exibir Estado.)

Agora você tem as propriedades definidas.No entanto, você ainda deve modificar o código existente o controle de usuário para aproveitar a AllowDuplicates configuração da propriedade.

Para modificar o código existente para usar a propriedade AllowDuplicates

  • Localizar o AddItem Método que você escreveu em " Adicionar Código para manipular usuário seleções " Anteriormente esse exame Através e substituir o conteúdo com o código a seguir realçado:

    Protegido sub AddItem(ByVal li As ListItem)
     TargetList.SelectedIndex =-1 Se Me.AllowDuplicates = Verdadeiro Then    TargetList.Items.Adicionar(li) Else    Se TargetList.Items.FindByTexto(li.Texto) É Nada E.       TargetList.Items.Adicionar(li)    End se End se
    End Sub
    
    Protegido void {AddItem(ListItem li)
      TargetList.SelectedIndex =-1;  Se (this.AllowDuplicates == True)  {      TargetList.Items.Add(li);  }  Pessoa  {      Se (TargetList.Items.FindByText(li.Text) == nulo)      {          TargetList.Items.Add(li);      }  }
    }
    

    O código por Formulários a mesma função como antes (adicionando um item para o TargetList Na lista), mas agora o código verifica para determinar se o AllowDuplicate Propriedade estiver definida como verdadeiro.Se a AllowDuplicate Propriedade estiver definida como verdadeiroo código primeiro procura por um item existente com o mesmo valor como o novo item proposto e, em seguida, adiciona o novo item, mas somente se não existente item for encontrado.

Como você será Configuração o conteúdo das SourceList Usar uma propriedade Lista, você pode remover os dados de teste que você inseriu em " Adicionar Server controles para o usuário controle " anteriormente nessa explicação passo a passo.

Para remover os dados de teste para a lista SourceList

  1. Alternar para modo Design.

  2. Clique na SourceList o controle e, em Propriedades, para ItensClique no botão reticências (…).

    O Editor de coleção ListItem será exibida.

  3. Clique na Remove botão para remover cada item de exemplo e em seguida, clique em OK.

Adicionando um Método ao Controle do Usuário

Você também pode adicionar métodos para executar tarefas no controle do usuário quando os métodos são chamados pelo código na página do host.Para ilustrar isso, nesta explicação passo a passo, você adicionará dois métodos.O primeiro método pode ser chamado para adicionar itens a SourceList Lista.O segundo método limpa o conteúdo das TargetList Lista.

Para adicionar um método para limpar a lista TargetList

  1. Use o código a seguir para adicionar a AddSourceItem Método:

    Public Sub AddSourceItem(ByVal sourceItem As String)    SourceList.Items.Add(sourceItem) End Sub
    
    public void AddSourceItem(String sourceItem) {    SourceList.Items.Add(sourceItem); }
    
  2. Use o código a seguir para adicionar a ClearAll Método:

    Public Sub ClearAll()    SourceList.Items.Clear()    TargetList.Items.Clear() End Sub
    
    public void ClearAll() {    SourceList.Items.Clear();    TargetList.Items.Clear(); }
    
  3. Sobre o File Menu, clique em Salvar tudo Para salvar as alterações que você fez a controle de usuário.

Testando as Propriedades e Métodos do Controle do Usuário

A tarefa final nesta explicação passo a passo é aprimorar a página host para poder compartilhar valores com o controle de usuário.Você pode definir algumas das propriedades do controle de usuário declarativamente.(Você pode Não Definido o SourceList Lista diretamente usando o código essa explicação passo a passo, mas você pode defini-la programaticamente.) Esse procedimento, você definirá a AllowDuplicates Propriedade para um valor padrão de verdadeiro.

Para definir propriedades do controle do usuário declarativamente

  1. Alterne para ou abra a página HostUserControl.aspx.

  2. Em Modo de exibição Origem, defina AllowDuplicates declarativamente usando sintaxe que ele semelhante à seguinte:

    < uc1:ListPicker ID = "ListPicker1" Runat = "server"
        AllowDuplicates = "true" />
    

    Observe que você obtenha Microsoft IntelliSense funcionalidade para AllowDuplicates.

Trabalhando com o controle usuário Programmatically

Você pode também trabalhar com o controle do usuário programaticamente, configurando e recuperando as propriedades e chamando os métodos.Para ilustrar como trabalhar com o controle do usuário programaticamente, você irá adicionar alguns controles à página host

Para trabalhar com o controle do usuário programaticamente

  1. Alternar para modo Design.

  2. A partir de Padrão Agrupar na caixa de ferramentas, arraste os controles a seguir para a tabela na página host e em seguida, defina as propriedades, conforme indicado.

    Controle

    Propriedades

    TextBox

    ID: NewItem

    Texto (vazio)

    Button

    ID: AddItem

    TextoAdicionar item:

    Button

    ID: LoadFiles

    TextoLista de arquivos:

    Button

    ID: ClearSelection

    TextoLimpar tudo:

    CheckBox

    AutoPostBack: True

    Checked: True

    ID: AllowDuplicates

    Texto Permitir duplicatas

    Button

    ID: ShowSelection

    TextoMostrar seleção:

    Rótulo

    IDSeleção:

    Texto (vazio)

  3. No modo de exibição de design, Duplo - clique em AllowDuplicates Para criar um manipulador de eventos para a CheckedChanged Evento e adicione o código a seguir realçado:

    Protegido sub AllowDuplicates_CheckedAlterado (ByVal _ remetente como objeto, _ ByVal e como EventArgs) Handles AllowDuplicates.CheckedAlterado
      ListPicker1.AllowDuplicates = AllowDuplicates.Checked
    End Sub
    
    Protegido void {AllowDuplicates_CheckedChanged(Objeto sender, EventArgs e)
      ListPicker1.AllowDuplicates = AllowDuplicates.Marcado;
    }
    
  4. Alterne para modo de design, clique duas vezes em AddItem Para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub AddItem_Clique(ByVal Sender As Object, _ ByVal e As EventArgs) trata AddItem.Clique
      SourceItem As Cadeia de Caracteres Dim = Server.HtmlEnCódigo(NewItem.Text)  ListPicker1.AddSourceItem(sourceItem)
    End Sub
    
    Protegido void {AddItem_Click(object sender, EventArgs e)
      ListPicker1.AddSourceItem(SERVER.HtmlEncode(NewItem.Text));
    }
    

    O código cria uma ListItemCollection Coleção no código e preenche-lo com dados de exemplo.Em seguida, o código define a SourceItems Propriedade à coleção.

  5. Alterne para modo de design, clique duas vezes em LoadFiles Para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub LoadArquivos_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata LoadArquivos.Click
     Caminho As String Dim = Server.MapPath(Solicitar.ApplicationPath) Files() As String Dim = Sistema.IO.Diretório.GetFiles(Caminho) Dim Nome do arquivo As String Para cada nome de arquivo em arquivos.    ListPicker1.AddSourceItem(fileName) Next
    End Sub
    
    Protegido void {LoadFiles_Click(object sender, EventArgs e)
     Seqüência de Caracteres de caminho = Server.MapPath(Request.ApplicationPath); Seqüência de caracteres [] arquivos = System.IO.Directory.GetFiles(path); foreach (Seqüência Nome do arquivo arquivos) {    ListPicker1.AddSourceItem(fileName); }
    }
    

    Esse código é semelhante ao código AddItemExceto pelo fato de que este código adiciona uma lista dos arquivos no diretório raiz de Web Site.

  6. Alterne para modo de design, clique duas vezes em ShowSelection Para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub ShowSeleção_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata ShowSeleção.Click
     Dim lItem como ListItem Dim selectedItemsString As String = " " Para cada lItem em ListPicker1.SelectedItems.    selectedItemsString & = "< br >" & lItem.Text Next Selection.Text = selectedItemsString
    End Sub
    
    Protegido void {ShowSelection_Click(object sender, EventArgs e)
     Seqüência de caracteres selectedItemsString = " "; foreach (ListItem lItem em ListPicker1.SelectedItems) {    selectedItemsString += "< br >" + lItem.Text; } Selection.Text = selectedItemsString;
    }
    

    Esse código recupera um objeto que é digitado como uma ListItemCollection Objeto, lê cada item na coleção e em seguida, exibe os resultados em Selection.

  7. Alterne para modo de design, clique duas vezes em ClearSelection Para criar um manipulador de eventos para a Clique em Evento e adicione o código a seguir realçado:

    Protegido sub ClearSelection_Click(ByVal Sender As Object, _ ByVal e As EventArgs) trata ClearSelection.Click
     ListPicker1.ClearAll()
    End Sub
    
    Protegido void {ClearSelection_Click(object sender, EventArgs e)
     ListPicker1.ClearAll();
    }
    

    Esse código chama o ClearAll Método para o controle de usuário para remover todos os itens a partir de TargetList.

Testando o Controles de Usuário Terminado

Agora, você pode testar seu controle de usuário terminado.

Para testar o controle do usuário

  1. Pressione CTRL+F5 para executar a página.

  2. Na caixa de texto, tipo um valor e em seguida, clique em Adicionar item.

  3. Repita a etapa 2 várias vezes, até que você tenha uma seleção de itens no controle do usuário.

  4. Use os botões para Selecione uma ou mais dos itens de origem a partir de SourceList Lista e em seguida, adicioná-los para o TargetList Lista.

  5. Clique em Mostrar seleção.

    O TargetList Lista itens são exibidos no Selection.

  6. Clique em Limpar tudo.

  7. Clique em Lista de Arquivos.

    O SourceList Lista agora exibe uma lista de nomes de arquivo.

  8. Na controle de usuário, clique em Adicionar Para adicionar vários itens para o TargetList Lista.

  9. Tente adicionar um item para o TargetList Lista que já seja na lista.

    O valor duplicado é adicionado.

  10. Limpar o Permitir duplicatas caixa e em seguida, tente adicionar duplicatas novamente.

    Desta vez, as duplicatas não são Adicionado para a TargetList Lista.

  11. Clique em Mostrar seleção.

    A lista de itens a TargetList Lista é exibida na página host.

Próximas etapas

Embora o controle que você tenha criado não seja complexo, você já viu grande parte da funcionalidade básica que você pode criar num controle de usuário.Refinar o controle é amplamente uma questão de revelar propriedades e métodos que aperfeiçoam o que você pode fazer com o controle adicionais.Membros adicionais pode incluir os seguintes:

  • Propriedades de aparência.

    Você pode criar propriedades de controle de usuário que permitam que um usuário configure um plano de fundo, o tamanho da lista, e assim por diante, para o controle.

    Observação:

    Como padrão, o controle do usuário usa o tema atual para aplicar a controles-filho.Por exemplo, se você tiver uma capa definida para um Button Controle, os botões no seu controle de usuário são exibidos com essa capa.

  • Propriedades de dados.

    Você pode adicionar propriedades que permitem o controle de usuário para usar uma ampla variedade de dados para exibir o SourceList Lista.Por exemplo, você pode adicionar propriedades para definir um dataset, uma tabela de dados, e um campo de exibição de dados.

  • Funcionalidade.

    Você pode adicionar mais botões e código para o controle de usuário para permitir que usuários não apenas copiar itens a partir de SourceList Lista para o TargetList Lista, mas também para mover itens — onde o item é re Movido de o SourceList lista à medida que ele é deslocado para o TargetList Lista.O controle, em seguida, poderia ter botões que foi possível mover os dados Voltar a partir de TargetList Lista para o SourceList Lista.

Consulte também

Tarefas

Como: Converter páginas de Web Forms em controles de usuário do ASP.NET

Conceitos

Visão geral sobre controles de usuário ASP.NET

Visão Geral sobre Ameças de Segurança em Aplicativos da Web