Una breve introducción a las habilidades de aplicación del control DataGrid en ASP.NET

1. Descripción general

DataGrid es un control muy importante en el proceso de desarrollo de aplicaciones web utilizando ASP NET. Casi cualquier rendimiento relacionado con datos utilizará este control, por lo que dominar las habilidades de aplicación del control DataGrid es imprescindible para cada Web. Habilidades básicas necesarias para el personal

El control DataGrid puede mostrar datos de la fuente de datos en una tabla y proporciona algunas funciones integradas poderosas como paginación, clasificación y filtrado, por lo que puede simplificar enormemente el desarrollo. de aplicaciones web Durante el proceso de desarrollo, los desarrolladores también pueden personalizar la forma en que el control DataGrid muestra los datos mediante el uso de varias columnas de enlace de datos. Esto mejora enormemente la funcionalidad del control DataGrid. TemplateColumn EditCommandColumn HyperlinkColumn ButtonColumn y BoundColumn, etc. para personalizar la forma en que el control DataGrid muestra los datos

2. Aplicación de columnas de datos BoundColumn

Generalmente, cuando usamos el control DataGrid para desarrollar aplicaciones web basadas en datos, una fila mostrará un registro en la fuente de datos y una columna mostrará un valor de campo específico DataGrid El control En sí mismo nos proporciona funciones poderosas, por lo que solo necesitamos usar muy poco código para implementar la función de visualización de datos. Sin embargo, esto también trae un problema, es decir, ¿cómo personalizamos la forma en que mostramos los datos? Obviamente, el control DataList y el control Repetidor son más fuertes que el control DataGrid en este aspecto. Sin embargo, si renunciamos al control DataGrid, equivale a renunciar a sus poderosas funciones. Entonces, ¿cómo utilizamos el control DataGrid para realizar funciones personalizadas? de visualización de datos? Primero, tenemos que desactivar la función del control DataGrid para generar automáticamente columnas vinculadas a datos según la fuente de datos. El método es muy simple, simplemente establezca su propiedad AutoGenerateColumns en False. Aquí hay un ejemplo de este método. >

Una vez que su propiedad AutoGenerateColumns es False, tenemos que implementar mediante programación la vinculación de las columnas de datos En el proceso de vinculación de columnas de datos, podemos usar cualquiera de las cinco columnas de datos presentadas anteriormente, pero cualquier columna de datos debe definirse dentro de la etiqueta . Esta etiqueta puede indicar eso. el objeto definido es una columna de datos

Primero, introduzcamos la aplicación de la columna de datos BoundColumn. Al utilizar la columna de datos BoundColumn, podemos vincular dinámicamente datos en la fuente de datos a columnas de datos específicas y modificar los datos de acuerdo con nuestro. propias necesidades. La apariencia de las columnas. Por ejemplo, podemos cambiar el orden en el que se muestra cada columna para que el control DataGrid solo muestre los valores de algunos campos en lugar de todos los campos. Las columnas de datos BoundColumn pueden establecer propiedades como DataField DataFormatString FooterText HeaderText HeaderImageUrl y SortField. Son estas las que hacen que la apariencia del control DataGrid sea siempre cambiante y colorida.

Creemos un proyecto de aplicación web ejemplar. utiliza el control DataGrid y lo muestra.

Aprenda a utilizar las columnas de datos de BoundColumn para personalizar la visualización de datos. Los siguientes son los archivos principales de este proyecto y el contenido de sus archivos de código subyacente

WebForm aspx

<@. Idioma de la página= c# Codebehind= WebForm aspx cs AutoEventWireup= false Inherits= DataGridTemplates WebForm ＞＜!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN ＞＜HTML＞＜HEAD＞＜title＞WebForm ＜/title＞＜meta nombre= GENERADOR Contenido= Microsoft Visual Studio ＞＜meta nombre= CODE_LANGUAGE Contenido= C# ＞＜meta nombre= vs_defaultClientScript contenido= JavaScript ＞＜meta nombre= vs_targetSchema contenido= //esquemas microsoft /intellisense/ie ＞＜/HEAD＞＜cuerpo＞ ＜id de formulario = Método de formulario= post runat= servidor ＞＜asp：DataGrid runat= id de servidor= myDataGrid AutoGenerateColumns= False BorderWidth= px Nombres de fuente= Verdana Arial sans serif Tamaño de fuente= px BorderColor= # GridLines= Horizontal CellPadding= ＞＜AlternatingItemStyle BackColor= # E E E ＞＜/AlternatingItemStyle＞＜HeaderStyle Font Bold= True ForeColor= White BackColor= Teal ＞＜/HeaderStyle＞＜Columns＞＜asp：BoundColumn DataField= CustomerID HeaderText= ID ＞＜/asp：BoundColumn＞＜asp：BoundColumn DataFi eld=CompanyName HeaderText= Nombre de la empresa ＞＜/asp：BoundColumn＞＜asp：BoundColumn DataField= ContactName HeaderText= Nombre del contacto ＞＜/asp：BoundColumn＞＜asp：BoundColumn DataField= Dirección HeaderText= Dirección ＞＜/asp：BoundColumn＞ ＜asp：BoundColumn DataField= Ciudad HeaderText= Ciudad ＞＜/asp：BoundColumn＞＜asp：BoundColumn DataField= Región HeaderText= Región ＞＜/asp：BoundColumn＞＜asp：BoundColumn DataField= Posta

lCode HeaderText= Código postal ＞＜HeaderStyle Wrap= False ＞＜/HeaderStyle＞＜/asp：BoundColumn＞＜/Columns＞＜/asp：DataGrid＞＜/formulario＞＜/body＞＜/HTML＞

WebForm aspx cs usando System Collections; usando System Web SessionState; usando System Web UI WebControls; Web UI HtmlControls;

espacio de nombres DataGridTemplates{/// ＜summary＞/// Descripción resumida de WebForm /// ＜/summary＞public class WebForm: Página de UI web del sistema{UI web del sistema protegida WebControls DataGrid myDataGrid ;

private void Page_Load(object sender System EventArgs e){// Coloque el código de usuario aquí para inicializar la página if( !Page IsPostBack )BindData();}

private void BindData (){SqlConnection con = new SqlConnection( server=localhost; base de datos=Northwind; seguridad integrada=true; ); SqlCommand cmd = new SqlCommand( SELECT * FROM Customers con

try{con Open( ) ; myDataGrid DataSource = cmd ExecuteReader(); myDataGrid DataBind(); con Close(); }catch(Exception) {}if( con != null amp; amp; con State == ConnectionState Open )con Close(); /p>

#region Web Form Designer generó codeoverride protected void OnInit(EventArgs e){//// CODEGEN Esta llamada es necesaria para ASP NET Web Form Designer //InitializeComponent() base OnInit(e );}

/// ＜summary＞/// El diseñador admite los métodos requeridos No utilice el editor de código para modificar /// El contenido de este método /// ＜/summary＞private void InitializeComponent( ) {

this Load = new System EventHandler(this Page_Load);}#endregion}}

El efecto de ejecutar el proyecto en el navegador después de crearlo se muestra en la figura

BoundColumn se utiliza en el control DataGrid. El efecto de las columnas de datos que muestran datos

3. La aplicación de la columna de datos HyperlinkColumn y la columna de datos ButtonColumn

Arriba les presenté la aplicación de la columna de datos BoundColumn y los métodos de aplicación de las otras dos columnas de datos, la columna de datos HyperlinkColumn y la columna de datos ButtonColumn son casi los mismos

p>

La columna de datos HyperlinkColumn incluye la propiedad DataTextField y la propiedad DataNavigateUrlField. La primera se puede usar para especificar el contenido del texto que se mostrará, mientras que la segunda se usa para especificar el hipervínculo. La columna de datos también contiene un DataNavigateUrlFormatString que se puede utilizar para especificar el formato de visualización del texto.

Al igual que la columna de datos HyperlinkColumn, la columna de datos ButtonColumn también proporciona la propiedad DataTextField y la propiedad DataTextFormatString. propiedad Esta propiedad puede especificar la acción de respuesta del lado del servidor cuando se hace clic en el botón. En este momento, el control DataGrid La propiedad OnItemCommand debe apuntar a un método correspondiente. Este método se llamará automáticamente cuando se haga clic en el botón. el control DataGrid puede contener varias columnas de datos ButtonColumn. La función de respuesta del mensaje del botón en cada columna de datos es el método correspondiente a la propiedad OnItemCommand. Los diferentes botones se distinguen según su propiedad CommandName para distinguir las diferentes partes de la función que deben ejecutarse. La columna de datos ButtonColumn también proporciona una propiedad ButtonType para especificar la apariencia del botón. Esta propiedad incluye dos valores posibles, LinkButton (predeterminado) y PushButton.

A continuación, agregaremos un nuevo proyecto de aplicación web basado en el. solución original y utilice la columna de datos BoundColumn, la columna de datos HyperlinkColumn y la columna de datos ButtonColumn del control DataGrid. Los siguientes son los archivos principales de este proyecto y su código de procesamiento posterior del archivo WebForm aspx.

<@ Idioma de la página= c# Codebehind= WebForm aspx cs AutoEventWireup= false Hereda= DataGridTemplates WebForm ＞＜!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN ＞＜HTML＞＜HEAD＞＜ título＞WebForm ＜/título＞＜meta nombre= GENERADOR Contenido= Microsoft Visual Studio ＞＜meta nombre= CODE_LANGUAGE Contenido= C# ＞＜meta nombre= vs_defaultClientScript contenido= JavaScript ＞＜meta nombre= vs_targetSchema contenido= //esquema

como microsoft /intellisense/ie ＞＜/HEAD＞＜body MS_POSITIONING= FlowLayout ＞＜form id= Método de formulario= post runat= servidor ＞＜asp：DataGrid id= myDataGrid runat= servidor HeaderStyle Font Bold= True Cellpadding= BorderWidth= px AutoGenerateColumns = False GridLines= Nombres de fuentes horizontales= Verdana Arial sans serif Tamaño de fuente= px BorderStyle= Sólido ＞＜AlternatingItemStyle BackColor= #EFEFEF ＞＜/AlternatingItemStyle＞＜ItemStyle Tamaño de fuente= X Pequeño ＞＜/ItemStyle＞＜HeaderStyle Fuente Negrita= True ForeColor = Blanco BackColor= Verde azulado ＞＜/HeaderStyle＞＜Columnas＞＜asp：BoundColumn DataField= CustomerID HeaderText= ID ＞＜/asp：BoundColumn＞＜asp：HyperLinkColumn DataNavigateUrlField= Url DataTextField= CompanyName HeaderText= Nombre de la empresa ＞＜ /asp: columna hipervínculo ＞＜asp：ButtonColumn Text= Obtener detalles ButtonType= PushButton CommandName= ObtenerDetalles ＞＜/asp：ButtonColumn＞＜/Columns＞＜/asp：DataGrid＞＜/formulario＞＜/body＞＜/HTML＞

WebForm aspx cs usando System Collections; usando System Web SessionState; usando System Web UI WebControls; Web UI HtmlControls;

espacio de nombres DataGridTemplates {/// ＜summary＞/// Descripción resumida de WebForm /// ＜/summary＞public class WebForm: página de interfaz de usuario web del sistema{protegida interfaz de usuario web del sistema WebControls DataGrid myDataGrid ;

privado vacío Page_Load(objeto remitente Sistema Ev

entArgs e){// Coloque el código de usuario aquí para inicializar la página if(!Page IsPostBack)BindData();}

private void BindData(){SqlConnection con = new SqlConnection( server=localhost; seguridad integrada =true; base de datos=Northwind ); SqlCommand cmd = new SqlCommand( SELECT * // CustomerID As Url FROM Customers con ); try{con Open(); cmd ExecuteReader(); ;}catch(Exception) {}if( con != null amp; amp; con State == ConnectionState Open )con Close();}

#region Web Form Designer generó codeoverride protected void OnInit( EventArgs e){//// CODEGEN Esta llamada es requerida por el diseñador de formularios web ASP NET //InitializeComponent(); base OnInit(e);}

///