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 a escrita do código. Ele pode ser feito uma única vez e reutilizado em vários lugares.

Crie controle de usuário em ASP.Net

O ASP.NET tem a capacidade de criar controles Web. Esses controles contêm código que pode ser reutilizado e utilizado em toda a aplicação, conforme a necessidade.

Vejamos 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.
• O texto a seguir será o seguinte: “Guru"99 Tutoriais" e "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.

1. Acesse o Solution Explorer no Visual Studio e clique com o botão direito do mouse na solução DemoApplication.
2. Selecione a opção de menu Adicionar -> Novo Item.

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

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. Ao clicar na opção “Web”, você verá a opção “Controle de Usuário de Formulários Web”. Clique nessa opção.
3. Em seguida, damos um nome ao Controle Web, “Guru99Controle”.
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á então o “GuruA opção "99Control" foi adicionada à solução.

Passo 3) Agora é hora de adicionar o código personalizado ao controle de usuário da Web. Nosso código será baseado em sintaxe HTML pura. Adicione o seguinte código ao 'GuruArquivo '99Control.ascx'.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

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

Code Explicação:-

1. Em nosso arquivo de controle da Web, primeiro criamos um elemento de tabela. Ele será usado para exibir duas linhas de texto com a seguinte mensagem:Guru"99 Tutoriais" e "Este tutorial é para ASP.Net".
2. Em seguida, definimos nossa primeira linha da tabela e inserimos o texto como “Guru99 tutoriais.”
3. Em seguida, definimos nossa segunda linha da tabela e colocamos o texto como “Este tutorial é para ASP.Net”.

OBSERVAÇÃO: Agora não podemos executar esse código e exibir a saída. A única maneira de verificar se ele funciona é incluí-lo em nossa aplicação (arquivo aspx). Veremos isso no próximo tópico.

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

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

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

Após a criação do controle personalizado, precisamos utilizá-lo em nossa aplicação web. O primeiro passo é registrar o componente na aplicação (Demo.aspx). Este é o pré-requisito para usar qualquer controle web personalizado em uma aplicação ASP.NET.

Vamos ver como podemos alcançar isso. Os passos a seguir são uma continuação da seção anterior, na qual criamos nosso controle personalizado. Nesta seção, usaremos o controle em nosso Demonstração.aspx Formulário web. Primeiro, vamos registrar nosso 'controle' personalizado no arquivo Demo.aspx.

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

Ao clicar duas vezes no formulário, você provavelmente verá o código abaixo. Este é o código padrão adicionado pelo Visual Studio quando um formulário 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 web ASP.NET no navegador.

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 de usuário adicionado ao código básico acima.

<%@ 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.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code Explicação:-

1. O primeiro passo é registrar o controle de usuário da web. Isso compreende os seguintes parâmetros básicos:
   1. A palavra-chave 'Register' é usada para registrar o controle do usuário da web.
   2. O parâmetro Src é usado para definir o nome do controle, que em nosso caso é Guru99Control.ascx.
   3. O TagName e o TagPrefix são nomes individuais atribuídos ao controle. Isso é feito para que eles possam ser referenciados em páginas HTML como um controle HTML normal.
2. Em seguida, fazemos referência ao nosso controle de usuário da Web por meio do TagPrefix:TagName, que foi atribuído anteriormente. O TagPrefix:TagName indica que queremos usar nosso controle da Web personalizado. Quando a página é processada pelo servidor Web, você pode ver que usamos a tag TWebControl:WebControl. Ela então processará o 'Guru99Controle' de acordo.
   1. Um ID opcional é atribuído ao controle "Header". Geralmente, é uma boa prática atribuir um ID a um controle HTML.
   2. Por fim, o atributo `runat="server"` garante que o controle será executado no servidor web. Para todos os controles ASP.NET, este é o atributo padrão. Todos os controles ASP.NET (incluindo controles personalizados) precisam 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:-

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 web.config

Às vezes, pode ser necessário usar controles de usuário em várias páginas de um aplicativo .NET. Nesse caso, não é recomendável registrar controles de usuário em todas as páginas do 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 em um 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.

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

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

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.

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

<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 processo de inscrição compreende as seguintes subetapas:

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 de usuário com a tag adicional. Os parâmetros restantes, tagPrefix, tagName e src, permanecem os mesmos de antes.

Passo 3) Lembre-se de acessar a página 'demo.aspx' e remover as linhas do controle que continha o registro do Guru99 componentes. Se você não executar esta etapa, então o 'GuruO arquivo '99Control.ascx' será executado a partir do arquivo 'demo.aspx' em vez do arquivo 'web.config'.

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

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

Após configurar o código acima e executar o projeto usando o Visual Studio, você obterá a seguinte saída.

Resultado:-

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. Vejamos um exemplo simples. Tag HTML. Uma captura de tela de como a tag se parece é mostrada abaixo.

<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 pegar um exemplo simples e desenvolver a partir do nosso 'GuruO controle '99Control' foi criado nas seções anteriores. Em nosso exemplo, adicionaremos uma propriedade inteira simples chamada MinValue. Esse valor representará o número mínimo de caracteres no texto exibido no controle de usuário.

Vamos realizar as etapas mencionadas abaixo para implementar isso.

Passo 1) Abra o GuruArquivo 99Control.ascx. Adicione o código para adicionar a propriedade MinValue.

<%@ 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</td>
	</tr>
</table>

Code Explicação:-

O atributo `runat="server"` do script é usado para indicar que estamos adicionando um 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 definimos seu valor padrão como 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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/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>

OBSERVAÇÃO: Ao executar este código, nenhuma saída será exibida. Isso ocorre porque a saída não atinge o limite de 100 caracteres.

Perguntas Frequentes