Sei sulla pagina 1di 6

Creación de un Formulario para agregar datos a un GridView.

<table>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Cédula"></asp:Label></td>
<td>
<asp:TextBox ID="TxtPersonalId" MaxLength="12" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFVTxtPersonalId" runat="server"
ControlToValidate="TxtPersonalId"
ErrorMessage="*" ForeColor="Red"
ToolTip="Este campo es requerido">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="REVTxtPersonalId" runat="server"
ControlToValidate="TxtPersonalId"
ErrorMessage="*" ForeColor="Red"
ToolTip="Este campo solo permite datos numericos"
ValidationExpression="[0-9]{0,12}">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Primer Nombre"></asp:Label></td>
<td>
<asp:TextBox ID="TxtFirstName" MaxLength="50" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFVTxtFirstName" runat="server"
ControlToValidate="TxtFirstName"
ErrorMessage="*" ForeColor="Red"
ToolTip="Este campo es requerido">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Segundo Nombre"></td>
<td>
<asp:TextBox ID="TxtSecondName" MaxLength="50" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Primer Apellido"></td>
<td>
<asp:TextBox ID="TxtFirstLastName" MaxLength="50" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RFVTxtFirstLastName" runat="server"


ControlToValidate="TxtFirstLastName"
ErrorMessage="*" ForeColor="Red"
ToolTip="Este campo es requerido">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Segundo Apellido"></td>
<td>
<asp:TextBox ID="TxtSecondLastName" MaxLength="50" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="BtSave" runat="server" CommandName="Add" Text="Agregar"
onclick="BtSave_Click" />
</td>
</tr>
</table>
Hasta este momento se uso elementos como TextBox los cuales son controles que permite el ingreso de datos por parte del usuario
así de esta forma se podrán enviar datos al servidor de datos para su almacenamiento, se tiene también el control Label el cual
permite crea las etiquetas de descripción respectivas a los TextBox que permitirán el ingreso de por ejemplo Primer Nombre, ahora
estos controles necesitan un contenerdor para el caso están contenidos en tags html referentes a un table, que tendrá la siguiente
apariencia.

También existen elementos de validación como RequeiredFieldValidator el cual permite validar en el cliente si un campo como por
ejemplo el textbox contiene datos, también se tiene el objeto RegularExpressionValidator el cual permite crear un filtro para el tipo
de datos que se va a enviar al servidor. Más adelante se verá más adelante

Creación de un GridView Asociado a un SQL DataSource

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"


DataKeyNames="Id" DataSourceID="SqlDataSourceDemoASP" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id"
Visible="false" SortExpression="Id"
ReadOnly="True" />

<asp:BoundField DataField="PersonalId" ControlStyle-Width="96%"


ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
HeaderText="Identificación Personal" SortExpression="PersonalId" />

<asp:BoundField DataField="FirstName" ItemStyle-Width="150px"


HeaderText="Primer Nombre" SortExpression="FirstName" />

<asp:BoundField DataField="SecondName" ItemStyle-Width="150px"


HeaderText="Segundo Nombre" SortExpression="SecondName" />

<asp:BoundField DataField="FirstLastName" ItemStyle-Width="150px"


HeaderText="Primer Apellido" SortExpression="FirstLastName" />

<asp:BoundField DataField="SecondLastName" ItemStyle-Width="150px"


HeaderText="Segundo Apellido" SortExpression="SecondLastName" />

<asp:CommandField ShowDeleteButton="True" DeleteText="Eliminar"


EditText="Editar" ShowEditButton="True"
CancelText="Cancelar" ShowSelectButton="True" />
</Columns>
</asp:GridView>

El SqlDataSource nos permite definir lo que serán las sentencias Select, Delete, Update e Insert (En este caso mediante Visual
Studio y como se verá en la presentación se crearon automáticamente los comandos) para nuestro GridView y también tener la
cadena de conexión a la base de datos.
<asp:SqlDataSource ID="SqlDataSourceDemoASP" runat="server"
ConnectionString="<%$ ConnectionStrings:DemoASPConnectionString %>"
SelectCommand="SELECT
[PersonalId], [SecondName],
[FirstName], [FirstLastName],
[SecondLastName], [Id]
FROM [Person]"
ConflictDetection="CompareAllValues"
DeleteCommand="DELETE FROM [Person]
WHERE [Id] = @original_Id AND
[PersonalId] = @original_PersonalId AND
(([SecondName] = @original_SecondName) OR ([SecondName] IS NULL AND
@original_SecondName IS NULL)) AND
[FirstName] = @original_FirstName AND
[FirstLastName] = @original_FirstLastName AND
(([SecondLastName] = @original_SecondLastName) OR ([SecondLastName] IS NULL AND
@original_SecondLastName IS NULL))"
InsertCommand="INSERT INTO [Person] ([PersonalId], [SecondName], [FirstName], [FirstLastName], [SecondLastName])
VALUES (@PersonalId, @SecondName, @FirstName, @FirstLastName, @SecondLastName)"
OldValuesParameterFormatString="original_{0}"
UpdateCommand="UPDATE [Person]
SET
[PersonalId] = @PersonalId,
[SecondName] = @SecondName,
[FirstName] = @FirstName,
[FirstLastName] = @FirstLastName,
[SecondLastName] = @SecondLastName
WHERE
[Id] = @original_Id AND
[PersonalId] = @original_PersonalId AND
(([SecondName] = @original_SecondName) OR ([SecondName] IS NULL AND
@original_SecondName IS NULL)) AND
[FirstName] = @original_FirstName AND
[FirstLastName] = @original_FirstLastName AND
(([SecondLastName] = @original_SecondLastName) OR ([SecondLastName] IS NULL AND
@original_SecondLastName IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_Id" Type="Int32" />
<asp:Parameter Name="original_PersonalId" Type="Int32" />
<asp:Parameter Name="original_SecondName" Type="String" />
<asp:Parameter Name="original_FirstName" Type="String" />
<asp:Parameter Name="original_FirstLastName" Type="String" />
<asp:Parameter Name="original_SecondLastName" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="PersonalId" Type="Int32" />
<asp:Parameter Name="SecondName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="FirstLastName" Type="String" />
<asp:Parameter Name="SecondLastName" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="PersonalId" Type="Int32" />
<asp:Parameter Name="SecondName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="FirstLastName" Type="String" />
<asp:Parameter Name="SecondLastName" Type="String" />
<asp:Parameter Name="original_Id" Type="Int32" />
<asp:Parameter Name="original_PersonalId" Type="Int32" />
<asp:Parameter Name="original_SecondName" Type="String" />
<asp:Parameter Name="original_FirstName" Type="String" />
<asp:Parameter Name="original_FirstLastName" Type="String" />
<asp:Parameter Name="original_SecondLastName" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
La cadena de conexión que vimos en el paso anterior está dentro del archivo de configuración WebConfig de la aplicación
ASP.NET, este archivo que nos permitirá almacenar información sensible es decir que el usuario final no tendrá por que saber
como por ejemplo en este caso la cadena de conexión:

<?xml version="1.0"?>

<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->

<configuration>
<connectionStrings>
<add name="DemoASPConnectionString"
connectionString="Data Source=fsotelo-pc;Initial Catalog=DemoASP;Persist Security Info=True;User
ID=sa;Password=123456"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>

Esta cadena de conexión que se puede ver aquí es generada automáticamente por Visual Studio al configurar el DataSource del
GridView.

En la siguiente imagen vemos cómo fue posible luego de tener la conexión a la base de datos creada en el explorador de
servidores agregar la conexión y también se ve cómo Visual Studio la crea automáticamente.
Luego de hacer click en next (siguiente). Verificamos que el siguiente recuadro quede tal cual cómo indica la próxima imagen.

Luego de esto hacemos click en Advance (Para ver otras opciónes avanzadas de configuración).
Indicamos que el DataSource va a tener los Inserts, Updates y Deletes y admás que si un cambio no se lleva a cabo
correctamente la base de datos quedará en un estado óptimo de concurrencia. Hacemos click en ok. Hacemos click en next y
luego Finish, de esta forma concluimos con la configuración de el SqlDataSource.

Potrebbero piacerti anche