Cmo: Crear controles de

usuario ASP.NET
.NET Framework 4
Otras versiones

Actualizacin: noviembre 2007

Los controles de usuario ASP.NET se crean casi de la misma forma en la que se disean
las pginas Web ASP.NET. Se pueden usar los mismos elementos y controles HTML en
un control de usuario que en una pgina ASP.NET estndar. Sin embargo, el control de
usuario no tiene elementoshtml, body ni form; adems, la extensin de nombre de
archivo debe ser .ascx.

Para crear un control de usuario ASP.NET

1. Abra el proyecto de sitio Web al que desee agregar controles de usuario. Si an
no tiene ningn proyecto de sitio Web, puede crear uno. Para obtener ms
informacin, vea Sitios Web de IIS locales o Cmo: Crear sitios Web del sistema
de archivos.
2. En el men Sitio Web, haga clic en Agregar nuevo elemento.
Aparecer el cuadro de dilogo Agregar nuevo elemento.
3. En la opcin Plantillas instaladas de Visual Studio del cuadro de
dilogo Agregar nuevo elemento, haga clic en Control de usuario Web.
4. En el cuadro Nombre, escriba un nombre para el control.
De forma predeterminada, la extensin de nombre de archivo .ascx se anexa al
nombre de control que escriba.
5. En la lista Lenguaje, seleccione el lenguaje de programacin que desee utilizar.
6. Opcionalmente, si desea mantener algn cdigo del control de usuario en un
archivo independiente, active la casilla Colocar el cdigo en un archivo
independiente.
7. Haga clic en Agregar.
Se crea el nuevo control de usuario ASP.NET y, a continuacin, se abre en el
diseador. El cdigo de formato para este nuevo control es similar al de una
pgina Web ASP.NET, salvo que contiene una directiva @ Control en vez de una
directiva@ Page; adems, el control no tiene los elementos html, body ni form.
Agregue los cdigos de formato y los controles al nuevo control de usuario, as
como el cdigo de las tareas que realizar el control de usuario, como controlar
los eventos del control o la lectura de los datos desde un origen de datos.
RegularExpressionValidator regexpvalidator = new RegularExpressionValidator ();
regexpvalidator . ID = "RegularExpressionValidator1" ;
regexpvalidator . ValidationExpression = "\d+" ;
regexpvalidator . ControlToValidate = "YourControl" ;
regexpvalidator . ErrorMessage = "Please especificar un dgito " ;

regexpvalidator . SetFocusOnError = verdadero ;

<asp:TextBox ID="TextBox1" runat="server" Style="z-index: 100; left:
259px; position: absolute;
top: 283px" ValidationGroup="check"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server" ControlToValidate="TextBox1"
ErrorMessage="Please Enter Only Numbers" Style="z-index: 101; left:
424px; position: absolute;
top: 285px" ValidationExpression="^\d+
$" ValidationGroup="check"></asp:RegularExpressionValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Err

orMessage="RegularExpressionValidator"ControlToValidate="TextBox1" ValidationExpre
ssion="[aA-zZ]"></asp:RegularExpressionValidator>

En este artculo vamos a ver cmo utilizar CustomValidator (lado del servidor y del lado del
cliente). En este ejemplo vamos a asegurar que la contrasea introducida por los usuarios no
puede ser inferior a 5 caracteres.
Artculo anterior de la serie:
1) RequiredFieldValidator
Ejemplo: http://www.codingfusion.com/Post/RequiredFieldValidator-Example-in-asp-net

2) RegularExpressionValidor
Ejemplo: http://www.codingfusion.com/Post/RegularExpressionValidator-Example-inasp-net
3) CompareValidator Ejemplo: http://www.codingfusion.com/Post/CompareValidatorExample-in-asp-net
4) RangeValidator Ejemplo: http://www.codingfusion.com/Post/RangeValidator-Examplein-asp-net
5) ValidationSummary Ejemplo: http://www.codingfusion.com/Post/ValidationSummaryExample-in-asp-net
Paso 1: Crear cuadro de texto y establecer las propiedades CustomValidator
ControlToValidate y ErrorMessage de CustomValidator.
Paso 2: Crear la funcin Javascript para comprobar la longitud de la contrasea.
Paso 3: Uso ClientValidationFunction caracterstica de CustomValidator e introduzca el
nombre de la funcin de JavaScript que aqu estoy usando la funcin validateLength.

1) Ejemplo del lado del cliente de CustomValidator:

HTML:
<tbody><tr>
<td>
<span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr;
text-align: left"><b>Password</b> (Client side)</span> <b>Contrasea</b>
(lado del cliente)</span>
</td>
<td>
<asp:textbox runat="server" id="txtPassword"><br>
<asp:customvalidator clientvalidationfunction="validateLength"
forecolor="Red" errormessage="Password cannot be less than 5 characters."
controltovalidate="txtPassword" runat="server">
</asp:customvalidator></asp:textbox></td>
</tr>
</tbody></table>

Funcin javascript:

1
2
3
4
5
6
7
8
9

<script type="text/ecmascript">
function validateLength(sender, args) {
debugger;
if (args.Value.length < 5)
return args.IsValid = false;
else
return args.IsValid = true;
}
</script>

Paso 4: Crear cuadro de texto y establecer las propiedades CustomValidator

ControlToValidate y ErrorMessage de CustomValidator.
Paso 5: Crear la funcin de servidor para comprobar la longitud de la contrasea.
Paso 6: El uso de la propiedad OnServerValidate CustomValidator e introduzca el
nombre de la funcin de servidor que aqu estoy usando la funcin
CustomValidator1_ServerValidate.

2) Ejemplo de la cara de servidor CustomValidator:

HTML:

1 <table>
<tbody><tr>
2
<td>
3
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipo
4 (Server side)</span> <b>Contrasea</b> (lado del servidor)</span>
</td>
5
<td>
6
<asp:textbox runat="server" id="txtPassword2">
7
<br>
8
<asp:customvalidator id="CustomValidator1" forecolor="Red" onserverval
9 characters." controltovalidate="txtPassword2" runat="server">
</asp:customvalidator></asp:textbox></td>
1
</tr>
0
<tr>
11
<td>
1
2
</td>
<td>
1
<asp:button text="Validate" id="Button1" runat="server">
3
</asp:button></td>
1
</tr>
4
</tbody></table>
1
5
1
6

1
7
1
8
1
9
2
0

Funcin javascript:

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class=

CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)</span> pro
1 args)</span>
2
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span cl
3
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
4 5)</span> si (args.Value.Length <5)</span>
5
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()">
6
7 false;</span> args.IsValid = false;</span>
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
8
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
9
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
1
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()">
0
true;</span> args.IsValid = true;</span>
11
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span cl

<asp:RegularExpressionValidator runat="server"
ValidationExpression="^[a-zA-Z]$" ControlToValidate="idOfYourTextBox"
ErrorMessage="Only letters are allowed, no digits!" />

^[a-zA-Z0-9]+$
^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$
^\d*(\.|,|(\.\d{1,2})|(,\d{1,2}))?$

[RegularExpression(@"^\d+.\d{0,2}$",ErrorMessage = "Price can't have more than 2

decimal places")]
public decimal Price { get; set; }
^\d+(.\d{1,2})?$

Validacin Cliente
Una vez definido nuestro esquema inicial, el siguiente paso ser escribir la funcin de
validacin del lado del cliente para lo cual ser necesario cambiar a la vista de HTML.
La funcin de validacin puede estar en cualquier lenguaje scripting (VbScript,
JavaScript, JSScript) para este ejemplo el lenguaje ser JavaScript, pero sea cual sea
el lenguaje seleccionado la funcin que realizara la validacin debe contener la
siguiente estructura.
FuncionQueValida(source, arguments) , en donde el parmetro source representa
el objeto que origino la validacin, arguments contiene la funcionalidad mediante la
cual indicaremos el estado de la validacin (Valida o No Valida)
La funcin que crearemos tendr como finalidad asegurarse que introduzcan una
secuencia valida de nmeros incremental en 2 posiciones.
Secuencia Valida : 1,3,5,7,9
Secuencia No Valida : 1,3,4,5,6
Cdigo Script.

function ValidaSecuencia(source, arguments)

{
//Obtiene valor inicial
var Valor = document.all.TextBox1.value;
//Comprobacin de valor numerico
if (isNaN(parseInt(Valor))){
arguments.IsValid=false;
return;
}
Valor = parseInt(Valor);
//Se hace el cast a int ya que proviene
de un string
var incn;
//Bucle para comparar los valores introducidos en las cajas de texto
for (incn = 2;incn < 6;incn++){
Valor += 2;
//Se incremente el valor en dos posiciones
textbox = eval("document.all.TextBox" + incn);
//Se obtiene el
objeto de texto
if (textbox.value != Valor){//Se realiza la comparacin del valor
esperado
arguments.IsValid=false;

return;
}

}
arguments.IsValid=true;
validacin fue exitosa
}

//Si llego hasta aqui entonces la

Como comentbamos, a travs del parmetroarguments indicamos el estado de la

validacin, para informar del estado lo hacemos utilizando el miembro IsValid
arguments.IsValid = true Validacin Exitosa
arguments.IsValid = false Validacin Fallo
Una vez que tenemos nuestra funcin cdificada configuraremos nuestro
CustomValidator para indicarle cual ser la funcin que debe tomar para hacer las
validaciones del lado del cliente, as como el mensaje de error que mostrara. El control
CustomValidator contiene la propiedad ControlTovalidate, mediante la cual podemos
indicarle cual ser el control al que realizara la validacin, la asignacin a sta
propiedad es opcional ya que no siempre la validacin es a un control en particular, tal
es el caso de la validacin que estamos realizando a manera de ejemplo, en donde la
validacin esta contemplando a 5 controles del tipo TexBox.
Propiedades a utilizar
ClientValidationFunction = ValidaSecuencia
Especifica que la funcin que realizara la validacin del lado del cliente
ser ValidaSecuencia
ErrorMessage = "La secuencia no es valida, introduzca un valor como
1,3,5,7,9"
Establece la descripcin del error en dado caso de que la validacin no sea exitosa.

Comprobacin de Validaciones del Cliente

Para comprobar que la validacin esta corriendo de manera correcta, agregaremos un
mensaje en el evento clic de nuestro botn, cuando la informacin capturada sea
correcta y el botn sea precionado entonces se mostrara el mensaje "Numeros Validos"
, en caso contrario se mostrara el mensaje de error que establecimos en el
CustomValidator
Agregre al botn Button1 en su evento click la siguiente sentencia.
Cdigo C#
private void Button1_Click(object sender, System.EventArgs e)
{
Response.Write("Numeros Validos");
}
Cdigo Vb
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles Button1.Click
Response.Write("Numeros Validos")
End Sub

Al presionar el botn despues de haber introducido una secuencia de numeros

incorrecta, el CustomValidator informara de la existencia de un error y la pagina no
viajara al servidor.

Cuando la informacin es corregida entonces la peticin si viajara al servidor y se

mostrara el mensaje de "Numeros Validos", sin embargo, como comentabamos
inicialmente si el cliente deshabilitara la opcin de scripting, la informacin viajar al
servidor an cuando la informacin sea incorrecta.

An cuando se debio generar un error debido a que la informacin escrita fue

incorrecta, esto no sucedio debido a que falta codificar la validacin del lado del
servidor, con lo cual evitaremos que sucedan este tipo de situaciones.

Validacin Servidor
La validacin en el servidor debe contener la misma funcionalidad que contemplamos
dentro de la validacin del lado del cliente, la diferencia por supuesto, ser que sta ya
no ser en cdigo script, dicha validacin la realizaremos dependiendo del lenguaje en
el que estemos desarrollando nuestra aplicacin.
Lo que haremos ser escribir cdigo para el evento ServerValidate de nuestro control
CustomValidator1, la estructura de la funcin es similar a la descrita para la funcin
cliente, recibe dos parametros sender y args.

Cdigo en C#
private void CustomValidator1_ServerValidate(object source,
System.Web.UI.WebControls.ServerValidateEventArgs args)
{
//Obtiene valor inicial

int Valor = -1;

try
{
//Intenta hacer la conversin a int para comprobar que sera un
valor numerico
Valor = Int32.Parse(TextBox1.Text);
}
catch
{
args.IsValid = false;

return;