Modificar datos mediante un control DetailsView de servidor Web
Actualización: noviembre 2007
El control DetailsView tiene una funcionalidad integrada para permitir a los usuarios editar o eliminar los registros sin que se requiera programación. Puede personalizar la funcionalidad de edición del control DetailsView utilizando eventos y plantillas.
Habilitar la funcionalidad de edición integrada
Puede habilitar la funcionalidad de edición integrada del control DetailsView estableciendo una o varias de las propiedades AutoGenerateEditButton, AutoGenerateInsertButton y AutoGenerateDeleteButton en true. El control DetailsView agregará automáticamente esta funcionalidad que permitirá a los usuarios editar o eliminar el registro enlazado actual e insertar un nuevo registro, siempre que el origen de datos del control DetailsView admita la función de edición.
Cómo modifica el control DetailsView los datos enlazados
El control DetailsView proporciona una interfaz de usuario que permite a los usuarios modificar el contenido de un registro enlazado. Normalmente, una vista que puede editarse muestra una fila adicional que contiene los botones de comando con el texto Editar, Insertar y Eliminar. De forma predeterminada, la fila se agrega a la parte inferior del control DetailsView.
Cuando el usuario hace clic en un botón de comando, el control DetailsView vuelve a mostrar la fila con los controles que permiten a los usuarios modificar su contenido. El botón de edición se reemplaza con botones que permiten al usuario guardar los cambios o cancelar la edición de una fila. El control DetailsView utiliza los cuadros de texto para mostrar los datos de un control BoundField y para los datos que aparecen automáticamente cuando la propiedad AutoGenerateRows se establece en true. Los datos booleanos se muestran mediante las casillas de verificación. Puede personalizar el control de entrada que aparece en modo de edición utilizando un control TemplateField. Para obtener más información, vea Crear una fila personalizada en un control de servidor Web DetailsView.
Cuando el control DetailsView realiza una operación de inserción, transfiere los valores que se van a insertar en el origen de datos mediante la colección de diccionarios Values.
En una operación de actualización o eliminación, el control DetailsView transfiere los valores al origen de datos en tres colecciones de diccionarios: el diccionario Keys, el diccionario NewValues y el diccionario OldValues. Puede tener acceso a cada diccionario utilizando los argumentos transferidos a los eventos de inserción, actualización o eliminación desencadenados por el control DetailsView.
El diccionario Keys contiene los nombres y los valores de los campos que identifican de forma unívoca el registro para su actualización o eliminación, y contiene siempre los valores originales de los campos clave anteriores a la edición del registro. Para especificar qué campos se sitúan en el diccionario Keys, establezca la propiedad DataKeyNames en una lista de nombres de campo separados por comas que represente la clave principal de los datos. La colección Keys se rellena automáticamente con los valores asociados a los campos especificados en la propiedad DataKeyNames.
.gif "Nota") Nota: |
|---|
Los valores de clave principal originales de los campos especificados en la propiedad DataKeyNames se almacenan en el estado de vista. Si los valores de clave principal contienen información confidencial, deberá cifrar el contenido del estado de vista estableciendo la propiedad ViewStateEncryptionMode de la página en Always. |
Los diccionarios Values y NewValues contienen los valores actuales de los controles de entrada del registro que se están insertando o editando, respectivamente. El diccionario OldValues contiene todos los valores originales de los campos excepto los de los campos clave, que están incluidos en el diccionario Keys . Los valores nuevos de los campos clave están incluidos en el diccionario NewValues.
El control del origen de datos utiliza los valores de los diccionarios Keys, Values, NewValues y OldValues como parámetros para su comando de inserción, actualización o eliminación. Para obtener información sobre cómo se crean los parámetros de control de origen de datos basándose en los diccionarios creados para los valores enlazados, vea Cómo un control de origen de datos crea parámetros para campos enlazados a datos.
Después de una actualización, el control DetailsView desencadena su evento ItemUpdated. Este evento permite llevar a cabo la lógica de post-actualización, como comprobaciones de integridad. De igual manera, el control DetailsView desencadena su eventoItemInserted después de producirse una inserción y su evento ItemDeleted después de una eliminación.
Una vez que finaliza la actualización y se han desencadenado todos los eventos, el control DetailsView vuelve a enlazarse al control del origen de datos para mostrar los datos actualizados.
Personalizar la interfaz de usuario de edición en el control DetailsView
De forma predeterminada, el control DetailsView genera automáticamente una fila enlazada por cada campo del origen de datos. Puede decidir qué campos se van a enlazar al control DetailsView estableciendo la propiedad AutoGenerateRows en false y especificando un control BoundField para cada campo que desee mostrar en el control DetailsView.
Para personalizar el modo en que se muestran los botones de comando, puede establecer la propiedad AutoGenerateEditButton del control DetailsView en false. A continuación, puede agregar objetos CommandField individuales de una fila. Por ejemplo, para que la fila que se muestra actualmente pase al modo de edición, puede agregar un campo CommandField con la propiedad ShowEditButton establecida en true.
Puede especificar si un campo enlazado se puede editar mediante la propiedad ReadOnly del control BoundField. Cuando la propiedad ReadOnly se establece en false, el campo se podrá editar cuando el usuario haga clic en el botón de comando Editar. Cuando la propiedad ReadOnly se establezca en true, se mostrará el campo enlazado, pero el usuario no podrá editarlo.
De igual forma, puede especificar si un valor se puede insertar en un campo enlazado mediante la propiedad InsertVisible del control BoundField. Si la propiedad InsertVisible se establece en false, no se mostrará el campo enlazado cuando el usuario haga clic en el botón de comando Nuevo. Esto es especialmente útil cuando el origen de datos, como un registro de fecha y hora o una clave principal que se incrementa automáticamente, genera automáticamente el campo limitado.
Ejemplo
El ejemplo de código siguiente utiliza un control GridView y un control DetailsView para mostrar los datos. El control DetailsView está configurado para que se puedan modificar los datos.
<%@ Page language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Sub EmployeesDropDownList_OnSelectedIndexChanged(sender As Object, e As EventArgs)
EmployeeDetailsView.DataBind()
End Sub
Sub EmployeeDetailsView_ItemUpdated(sender As Object, e As DetailsViewUpdatedEventArgs)
EmployeesDropDownList.DataBind()
EmployeesDropDownList.SelectedValue = e.Keys("EmployeeID").ToString()
EmployeeDetailsView.DataBind()
End Sub
Sub EmployeeDetailsView_ItemDeleted(sender As Object, e As DetailsViewDeletedEventArgs)
EmployeesDropDownList.DataBind()
End Sub
Sub EmployeeDetailsSqlDataSource_OnInserted(sender As Object, e As SqlDataSourceStatusEventArgs)
Dim command As System.Data.Common.DbCommand = e.Command
EmployeesDropDownList.DataBind()
EmployeesDropDownList.SelectedValue = _
command.Parameters("@EmpID").Value.ToString()
EmployeeDetailsView.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Northwind Employees</title>
</head>
<body>
<form id="form1" >
<h3>Northwind Employees</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:DropDownList ID="EmployeesDropDownList"
DataSourceID="EmployeesSqlDataSource"
DataValueField="EmployeeID"
DataTextField="FullName"
AutoPostBack="True"
OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
RunAt="Server" />
</td>
<td valign="top">
<asp:DetailsView ID="EmployeeDetailsView"
DataSourceID="EmployeeDetailsSqlDataSource"
AutoGenerateRows="false"
AutoGenerateInsertbutton="true"
AutoGenerateEditbutton="true"
AutoGenerateDeletebutton="true"
DataKeyNames="EmployeeID"
Gridlines="Both"
OnItemUpdated="EmployeeDetailsView_ItemUpdated"
OnItemDeleted="EmployeeDetailsView_ItemDeleted"
RunAt="server">
<HeaderStyle backcolor="Navy"
forecolor="White"/>
<RowStyle backcolor="White"/>
<AlternatingRowStyle backcolor="LightGray"/>
<EditRowStyle backcolor="LightCyan"/>
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
<asp:BoundField DataField="City" HeaderText="City"/>
<asp:BoundField DataField="Region" HeaderText="Region"/>
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>
</Fields>
</asp:DetailsView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="EmployeesSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees"
Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>"
RunAt="server">
</asp:SqlDataSource>
<asp:SqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
FROM Employees WHERE EmployeeID = @EmpID"
InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode);
SELECT @EmpID = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
City=@City, Region=@Region, PostalCode=@PostalCode
WHERE EmployeeID=@EmployeeID"
DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
Name="EmpID" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Address" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="Region" Type="String" />
<asp:Parameter Name="PostalCode" Type="String" />
<asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Address" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="Region" Type="String" />
<asp:Parameter Name="PostalCode" Type="String" />
<asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
</DeleteParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
<%@ Page language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
void EmployeesDropDownList_OnSelectedIndexChanged(Object sender, EventArgs e)
{
EmployeeDetailsView.DataBind();
}
void EmployeeDetailsView_ItemUpdated(Object sender, DetailsViewUpdatedEventArgs e)
{
EmployeesDropDownList.DataBind();
EmployeesDropDownList.SelectedValue = e.Keys["EmployeeID"].ToString();
EmployeeDetailsView.DataBind();
}
void EmployeeDetailsView_ItemDeleted(Object sender, DetailsViewDeletedEventArgs e)
{
EmployeesDropDownList.DataBind();
}
void EmployeeDetailsSqlDataSource_OnInserted(Object sender, SqlDataSourceStatusEventArgs e)
{
System.Data.Common.DbCommand command = e.Command;
EmployeesDropDownList.DataBind();
EmployeesDropDownList.SelectedValue =
command.Parameters["@EmpID"].Value.ToString();
EmployeeDetailsView.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Northwind Employees</title>
</head>
<body>
<form id="form1" >
<h3>Northwind Employees</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:DropDownList ID="EmployeesDropDownList"
DataSourceID="EmployeesSqlDataSource"
DataValueField="EmployeeID"
DataTextField="FullName"
AutoPostBack="True"
OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
RunAt="Server" />
</td>
<td valign="top">
<asp:DetailsView ID="EmployeeDetailsView"
DataSourceID="EmployeeDetailsSqlDataSource"
AutoGenerateRows="false"
AutoGenerateInsertbutton="true"
AutoGenerateEditbutton="true"
AutoGenerateDeletebutton="true"
DataKeyNames="EmployeeID"
Gridlines="Both"
OnItemUpdated="EmployeeDetailsView_ItemUpdated"
OnItemDeleted="EmployeeDetailsView_ItemDeleted"
RunAt="server">
<HeaderStyle backcolor="Navy"
forecolor="White"/>
<RowStyle backcolor="White"/>
<AlternatingRowStyle backcolor="LightGray"/>
<EditRowStyle backcolor="LightCyan"/>
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
<asp:BoundField DataField="City" HeaderText="City"/>
<asp:BoundField DataField="Region" HeaderText="Region"/>
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>
</Fields>
</asp:DetailsView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="EmployeesSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees"
Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>"
RunAt="server">
</asp:SqlDataSource>
<asp:SqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
FROM Employees WHERE EmployeeID = @EmpID"
InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode);
SELECT @EmpID = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
City=@City, Region=@Region, PostalCode=@PostalCode
WHERE EmployeeID=@EmployeeID"
DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
Name="EmpID" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Address" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="Region" Type="String" />
<asp:Parameter Name="PostalCode" Type="String" />
<asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Address" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="Region" Type="String" />
<asp:Parameter Name="PostalCode" Type="String" />
<asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
</DeleteParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
Vea también
Referencia
Información general sobre DetailsView (Control de servidor Web)