Tutorial de formulários da Web ASP.NET: exemplos de controles de usuário

No ASP.Net, é possível criar código reutilizável. O código reutilizável pode ser usado em muitos lugares sem a necessidade de escrever o código novamente.

O código reutilizável ajuda a reduzir o tempo gasto pelo desenvolvedor após escrever o código. Isso pode ser feito uma vez e reutilizado em vários lugares.

Crie controle de usuário em ASP.Net

ASP.Net tem a capacidade de criar controles da Web. Esses controles contêm código que pode ser reutilizado. Ele pode ser usado em vários aplicativos de acordo com o requisito.

Vamos dar uma olhada em um exemplo de como podemos criar um controle de usuário web em ASP.Net

Em nosso exemplo,

  • Vamos criar um controle web.
  • Ele será usado para criar um componente de cabeçalho.
  • Ele conterá o texto mencionado abaixo.”Tutoriais Guru99”Este tutorial é para ASP.Net”

Vamos trabalhar com nosso aplicativo web atual criado nas seções anteriores. Vamos seguir as etapas abaixo para criar um controle de usuário da Web.

Passo 1) A primeira etapa é criar um controle de usuário da web e adicioná-lo à nossa solução Visual Studio.

Crie controle de usuário em ASP.Net

  1. Vá para o Solution Explorer no Visual Studio e clique com o botão direito em DemoApplication Solution
  2. Escolha o item de menu Adicionar->Novo Item

Passo 2) Na próxima etapa, precisamos escolher a opção de criar um controle de usuário web

Crie controle de usuário em ASP.Net

  1. Na caixa de diálogo do projeto podemos ver várias opções para criar diferentes tipos de componentes. Clique na opção “Web” no lado esquerdo.
  2. Quando clicamos na opção “Web”, você vê uma opção para “Controle de usuário de Web Forms”. Clique nesta opção.
  3. Em seguida, damos um nome ao Web Control “Guru99Control”.
  4. Por fim, clique no botão ‘Adicionar’ para permitir que o Visual Studio adicione o controle de usuário da web à nossa solução.

Você verá o “Guru99Control” adicionado à solução.

Crie controle de usuário em ASP.Net

Passo 4) Agora é hora de adicionar o código personalizado ao controle de usuário da Web. Nosso código será baseado na sintaxe HTML pura. Adicione o seguinte código ao arquivo 'Guru99Control.ascx'

Crie controle de usuário em ASP.Net

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Explicação do código: -

  1. Em nosso arquivo Web Control, primeiro criamos um elemento de tabela. Isso será usado para armazenar 2 linhas de texto que serão usadas para exibir
  • “Tutoriais Guru99” e
  • “Este tutorial é para ASP.Net.”
  1. A seguir, definimos nossa primeira linha da tabela e colocamos o texto como “Tutoriais Guru99”.
  2. Em seguida, definimos nossa segunda linha da tabela e colocamos o texto como “Este tutorial é para ASP.Net”.

NOTA: Agora não podemos executar este código e mostrar a saída. A única maneira de ver se isso funciona é incluí-lo em nossa aplicação (arquivo aspx). Veremos isso no tópico subseqüente.

Registrando controles de usuário em formulários da web ASP.NET

Na seção anterior, vimos como podemos criar um controle web personalizado. Isso pode ser usado para exibir as duas linhas a seguir em um formulário da web

  • “Tutoriais Guru99”
  • “Este tutorial é para ASP.Net.”

Depois que o 'controle' personalizado for criado, precisamos usá-lo em nosso aplicativo web. O primeiro passo é cadastrar o componente em nossa aplicação (Demo.aspx). Este é o pré-requisito para usar em qualquer controle web personalizado em uma aplicação ASP.Net.

Registrando controles de usuário em um ASP.NET

Vejamos como podemos conseguir isso. As etapas abaixo são uma continuação da seção anterior. Na seção anterior, criamos nosso controle personalizado. Nesta seção, usaremos o controle em nosso Demonstração.aspx formulário web.

Primeiro, registraremos nosso 'controle' personalizado no arquivo Demo.aspx.

Passo 1) Certifique-se de estar trabalhando no arquivo demo.aspx. É neste arquivo que será cadastrado o controle do usuário web. Isso pode ser feito clicando duas vezes no arquivo demo.aspx no Solution Explorer da sua solução .Net.

Registrando controles de usuário em um ASP.NET

Depois de clicar duas vezes no formulário, você provavelmente verá o código abaixo no formulário. Este é o código padrão adicionado pelo Visual Studio quando um formulário da web é adicionado a um projeto ASP.Net.

O código padrão consiste em etapas necessárias para garantir que o formulário possa ser executado como um formulário da Web ASP.Net no navegador.

Registrando controles de usuário em um ASP.NET

Passo 2) Agora vamos adicionar nosso código para registrar o controle de usuário. A captura de tela abaixo mostra o registro do controle do usuário no código básico acima.

Registrando controles de usuário em um ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
	<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Explicação do código: -

  1. O primeiro passo é cadastrar o controle de usuário web. Isso compreende os parâmetros básicos abaixo
    1. A palavra-chave 'Register' é usada para registrar o controle do usuário da web.
    2. O parâmetro src é utilizado para definir o nome do controle, que no nosso caso é Guru99Control.ascx.
    3. O tagname e Tagprefix são nomes individuais dados ao controle. Isso é feito para que eles possam fazer referências em páginas HTML como um controle HTML normal.
  2. A seguir, referenciamos nosso controle de usuário da Web por meio do TagPrefix:TagName que foi atribuído anteriormente. O TagPrefix:TagName é um indicador de que queremos usar nosso controle web personalizado. Quando a página é processada pelo servidor web, você pode ver que usamos a tag TWebControl:WebControl. Em seguida, ele processará o 'Guru99Control' de acordo. Em nosso exemplo, é TWebControl:WebControl.
    1. Um ID opcional é fornecido ao controle de “Cabeçalho”. Geralmente é uma boa prática fornecer um ID a um controle HTML.
    2. Por fim, o atributo runat=server para que o controle seja executado no servidor web. Para todos os controles ASP.Net, este é o atributo padrão. Todos os controles ASP.Net (incluindo controles personalizados) devem ser executados no servidor. Sua saída é então enviada do servidor para o cliente e exibida no navegador de acordo.

Quando o código acima é definido e o projeto é executado usando Visual Studio. Você obterá a saída abaixo.

Resultado:-

Registrando controles de usuário em um ASP.NET

A mensagem de saída exibida no navegador mostra que o controle do usuário da web foi executado com sucesso.

Registrando controles asp.net globalmente no arquivo de configuração da web asp

Às vezes, pode-se querer usar controles de usuário em várias páginas de um aplicativo .Net. Neste ponto, você não deseja continuar registrando controles de usuário em cada página ASP.Net.

  • No .Net você pode realizar o cadastro no arquivo ‘web.config’.
  • O arquivo web.config é um arquivo de configuração comum usado por todas as páginas da web no projeto .Net.
  • Ele contém os detalhes de configuração necessários para o projeto web ASP.Net. Por exemplo, uma configuração comum no arquivo web.config é o parâmetro da estrutura de destino.
  • Este parâmetro é utilizado para identificar a versão do framework .Net utilizada pela aplicação.

Abaixo está um instantâneo do código padrão no arquivo web.config. A parte destacada é a parte da estrutura de destino.

Registrando controles asp.net globalmente na configuração da web

Vamos ver como podemos registrar nosso Guru99Control no arquivo web.config.

Passo 1) Abra o arquivo web.config no Solution Explorer clicando duas vezes no arquivo.

Registrando controles asp.net globalmente na configuração da web

Ao abrir o arquivo web.config, você poderá ver a configuração abaixo. O 'web.config' é adicionado automaticamente pelo Visual Studio quando o projeto é criado. Esta é a configuração básica necessária para fazer o projeto ASP.Net funcionar corretamente.

Registrando controles asp.net globalmente na configuração da web

Passo 2) Agora vamos registrar nosso componente no arquivo web.config. Precisamos adicionar as linhas abaixo para isso.

Registrando controles asp.net globalmente na configuração da web

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/>
		</controls>
	</pages>
	</system.web>
</configuration>

O registro compreende as subetapas abaixo

  1. Adicione uma tag chamada . Isso significa que toda a configuração dos controles será aplicável a todas as páginas ASP.Net da solução.
  2. O tag significa que você está adicionando uma configuração para o controle de usuário.
  3. Em seguida, registramos o controle do usuário com a tag adicional. Os parâmetros restantes de tagPrefix, tagName e src permanecem os mesmos de antes.

Passo 3) Lembre-se de acessar a página 'demo.aspx' e retirar as linhas de controle, que tinham o cadastro do componente Guru99. Se você não executar esta etapa, o arquivo 'Guru99Control.ascx' será executado a partir do arquivo 'demo.aspx' em vez do arquivo 'web.config'.

Registrando controles asp.net globalmente na configuração da web

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

O código acima é definido e o projeto é executado usando o Visual Studio. Você obterá a saída abaixo.

Resultado:-

Registrando controles asp.net globalmente na configuração da web

A mensagem de saída mostra que o controle de usuário da web foi executado com sucesso.

Adicionando propriedades públicas a um controle da web

Uma propriedade é um par chave-valor associado a qualquer controle. Vamos dar um exemplo do simples Etiqueta HTML. Uma captura de tela da aparência da tag é mostrada abaixo.

Adicionando propriedades públicas a um controle da web

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>

A tag 'div' é usada para criar uma seção em um documento HTML. A tag 'div' possui uma propriedade chamada propriedade de estilo. Isso pode ser usado para dar um estilo diferente ao texto exibido na tag div. Normalmente você veria o código da tag div conforme mostrado abaixo.

<div style="color:#0000FF">

Portanto, o atributo color nada mais é do que um par de valores-chave que fornece mais informações sobre a própria tag. No caso acima, o nome da chave é ‘style’ e o valor da chave é ‘color:#0000FF’.

Da mesma forma, para controles de usuário, você pode criar suas próprias propriedades que descrevem o controle.

Vamos dar um exemplo simples e desenvolver nosso 'Guru99Control' criado nas seções anteriores.

Em nosso exemplo, adicionaremos uma propriedade inteira simples chamada MinValue. Este valor representaria o número mínimo de caracteres no texto exibido no controle do usuário.

Vamos realizar as etapas mencionadas abaixo para implementar isso.

Passo 1) Abra o arquivo Guru99Control.ascx. Adicione o código para adicionar a propriedade MinValue.

Adicionando propriedades públicas a um controle da web

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>
	
<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for
	</tr>
</table>

Explicação do código: -

O atributo script runat=server é usado para indicar que estamos adicionando algum código específico do .Net e que ele precisa ser executado no servidor web.

Isso é necessário para processar qualquer propriedade adicionada ao controle de usuário. Em seguida, adicionamos nossa propriedade MinValue e atribuímos a ela o valor padrão 0.

Passo 2) Agora vamos referenciar essa propriedade em nosso arquivo demo.aspx. Tudo o que estamos fazendo agora é apenas referenciar a propriedade MinValue e atribuir um novo valor de 100.

Adicionando propriedades públicas a um controle da web

!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100"/>
	</form>
</body>
</html>

NOTA: – Quando você executa este código, ele não mostra nenhuma saída. Isso ocorre porque a saída fica abaixo do limite de 100 caracteres.

Resumo

  • ASP.Net tem a capacidade de criar controles de usuário. Os controles de usuário são usados ​​para ter código que é usado várias vezes em um aplicativo. O controle do usuário pode então ser reutilizado em todo o aplicativo.
  • O controle de usuário precisa ser registrado na página ASP.Net antes de poder ser usado.
  • Para usar o controle do usuário em todas as páginas de um aplicativo, registre-o no arquivo web.config.
  • As propriedades também podem ser adicionadas a um controle de usuário da web.