45-.Aplicaciones web.Controles ascx
- En este capítulo del curso de programación en c# con visual studio 2017,vamos a ver los controles de usuario. En ocasiones, puede ser que necesitemos cierta funcionalidad que no está incluida en los controles que vienen por defecto incluidos en Visual Studio. En estos casos, podemos crear nuestros propios controles agregando a nuestro proyecto un objeto ascx.- Un control de usuario es similar a una página Web (archivo .aspx) e incluye una página de interfaz de usuario y código. El proceso de creación del control de usuario es muy similar al proceso de creación de una página ASP.NET, sólo que al final se agregan el formato y los controles secundarios necesarios.
- En el video os dejo un ejemplo sobre como crear un control ascx y como agregar a una página aspx:
- Un control de usuario se diferencia de una página Web ASP.NET en los siguientes aspectos:
- La extensión de nombre de archivo es .ascx.
- Los controles de usuario no se pueden ejecutar como archivos independientes.
- El control de usuario no contiene elementos html, body o form. Estos elementos deben estar en la página de alojamiento.
- Más detalles en: https://msdn.microsoft.com/es-es/library/fb3w5b53(v=vs.100).aspx
- Os dejo también el código del ejemplo visto en el video:
- Control ascx código cliente:
<div>
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
<asp:TextBox ID="txtPruebas" runat="server" Width="233px"></asp:TextBox>
</div>
- Control ascx código servidor:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GestionVarios
{
public partial class ControlPruebas : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
txtPruebas.Text = Calendar1.SelectedDate.ToShortDateString();
}
}
}
- Codigo de una de las página donde hemos agregado el control:
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<%@ Register src="ControlPruebas.ascx" tagname="ControlPruebas" tagprefix="uc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="Calendar1" runat="server" ></asp:Calendar>
<asp:Label runat="server" ID="lblMostrar"></asp:Label>
<asp:Button runat="server" ID="btnClic" Text="Dale" OnClick="btnClic_Click" />
<br />
<br />
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="btnFileUploada" runat="server" Text="Guardar" OnClick="btnFileUploada_Click" />
<asp:Label runat="server" ID="lblFileupload"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<br />
<br />
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSourcePaises" OnSelectedIndexChanging="ListView1_SelectedIndexChanging" Visible="false">
<AlternatingItemTemplate>
<span style="background-color: #FAFAD2;color: #284775;">Pais:
<asp:Label ID="PaisLabel" runat="server" Text='<%# Eval("Pais") %>' />
<br />
CodPais:
<asp:Label ID="CodPaisLabel" runat="server" Text='<%# Eval("CodPais") %>' />
<br />
<br />
</span>
</AlternatingItemTemplate>
<EditItemTemplate>
<span style="background-color: #FFCC66;color: #000080;">Pais:
<asp:TextBox ID="PaisTextBox" runat="server" Text='<%# Bind("Pais") %>' />
<br />
CodPais:
<asp:TextBox ID="CodPaisTextBox" runat="server" Text='<%# Bind("CodPais") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Actualizar" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancelar" />
<br />
<br />
</span>
</EditItemTemplate>
<EmptyDataTemplate>
<span>No se han devuelto datos.</span>
</EmptyDataTemplate>
<InsertItemTemplate>
<span style="">Pais:
<asp:TextBox ID="PaisTextBox" runat="server" Text='<%# Bind("Pais") %>' />
<br />
CodPais:
<asp:TextBox ID="CodPaisTextBox" runat="server" Text='<%# Bind("CodPais") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insertar" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Borrar" />
<br />
<br />
</span>
</InsertItemTemplate>
<ItemTemplate>
<span style="background-color: #FFFBD6;color: #333333;">Pais:
<asp:Label ID="PaisLabel" runat="server" Text='<%# Eval("Pais") %>' />
<br />
CodPais:
<asp:Label ID="CodPaisLabel" runat="server" Text='<%# Eval("CodPais") %>' />
<br />
<br />
</span>
</ItemTemplate>
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<span runat="server" id="itemPlaceholder" />
</div>
<div style="text-align: center;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</div>
</LayoutTemplate>
<SelectedItemTemplate>
<span style="background-color: #FFCC66;font-weight: bold;color: #000080;">Pais:
<asp:Label ID="PaisLabel" runat="server" Text='<%# Eval("Pais") %>' />
<br />
CodPais:
<asp:Label ID="CodPaisLabel" runat="server" Text='<%# Eval("CodPais") %>' />
<br />
<br />
</span>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSourcePaises" runat="server" ConnectionString="<%$ ConnectionStrings:EmpresaConnectionString %>" SelectCommand="DamePaises" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
</div>
<div>
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSourcePedidos" BackColor="White" CssClass="auto-style1" Palette="Chocolate">
<Series>
<asp:Series Name="Series1" XValueMember="Nombre" YValueMembers="FechaPedido">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSourcePedidos" runat="server" ConnectionString="<%$ ConnectionStrings:EmpresaConnectionString %>" SelectCommand="DamePedidos" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
</div>
<uc1:ControlPruebas ID="ControlPruebas1" runat="server" />
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario