Microsoft Expression Web - Fuente de datos SQL
Expression Web tiene muchas herramientas para trabajar con páginas HTML estáticas, pero también tiene herramientas para crear páginas más dinámicas. Las páginas dinámicas a menudo recuperan datos o contenido de una fuente de datos. En este capítulo, aprenderemos cómo crear una fuente de datos SQL para usar en páginas dinámicas.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que creamos una lista desplegable y completamos la lista recuperando datos de la base de datos usando SQL DataSource.
Step 1 - Comience creando un nuevo sitio web vacío.
Vamos a llamarlo SQLDataSource. Haga clic en Aceptar.
Step 2- Verás que la expresión web ha creado una carpeta para nosotros. Sin embargo, dado que elegimos crear un proyecto vacío, todavía no tenemos ningún archivo.
Expression Web no tiene que usarse solo para crear sitios HTML estáticos; podemos crear sitios dinámicos usando páginas y controles con mucha facilidad.
Step 3- Expression web también nos permite crear mucho contenido dinámico sin tener que ser necesariamente desarrollador. Así que agreguemos un archivo ASPX delFile → New Pageopción de menú. Seleccione ASPX en el modelo del medio y haga clic en Aceptar.
Step 4 - Aquí crearemos un control en nuestro formulario que necesita acceder a los datos de una base de datos para crear un sitio web dinámico.
En este caso particular, crearemos una fuente de datos SQL que recuperará datos de la base de datos.
Step 5 - Vaya a la Caja de herramientas y arrastre el DropDownList y déjalo caer dentro del <form>en la Vista de código o también puede colocarlo en la sección de formulario en la Vista de diseño. Verá que Expression Web agrega el código.
Aquí, queremos conectar algunos datos de nuestra base de datos y almacenarlos en nuestra lista desplegable. Entonces, lo primero que necesitamos es la base de datos.
Step 6 - Cree una nueva carpeta en su carpeta de proyecto yendo a la New → Folder opción de menú.
Step 7 - Llamar a esta carpeta App_Data.
Step 8 - Necesitamos importar una base de datos en nuestro proyecto usando el File → Import → File… opción de menú.
Step 9 - Abrirá el Importdiálogo, como se muestra a continuación. Haga clic en el botón Agregar archivo… que abrirá el cuadro de diálogo de archivo abierto.
Step 10 - Navegar a la base de datos (*.mdf file) que desea incluir en el sitio web y haga clic en Abrir.
Step 11- Abra MyTestDatabase.mdf. Mostrará el siguiente diálogo. Haga clic en Aceptar.
Step 12- Ahora puede ver que el archivo de base de datos se agrega en la carpeta App_Data. Cuando tenga un control como una lista desplegable y Expression Web le permita vincular los datos a él, verá una pequeña flecha en la esquina superior derecha en la vista de diseño.
Step 13- Este es el menú contextual actual que nos puede permitir hacer una tarea muy específica para ese control en particular y una de ellas es elegir una fuente de datos. Así que hagamos clic enChoose Data Source… y eso abrirá el asistente de configuración de la fuente de datos.
Step 14- Actualmente, no tenemos una fuente de datos. Seleccionemos la opción Nueva fuente de datos del menú.
Aquí, importaremos una base de datos SQL. Seleccionemos la base de datos y hagamos clic en Aceptar.
Step 15- Ahora, necesitamos especificar la cadena de conexión. Hagamos clic en el botón Nueva conexión.
Step 16 - Seleccione el archivo de base de datos de Microsoft SQL Server y haga clic en Aceptar.
Step 17 - Haga clic en el botón Examinar para localizar el archivo de base de datos.
Step 18 - Seleccione el archivo de la base de datos y haga clic en el botón Abrir o haga doble clic en el archivo de la base de datos.
Step 19 - Para probar la conexión, haga clic en el botón Probar conexión.
Mostrará la siguiente pantalla. Haga clic en el botón Aceptar.
Step 20- Ahora configuraremos la fuente de datos. Haga clic en Siguiente en la siguiente pantalla.
Marque la casilla de verificación y haga clic en Siguiente nuevamente.
Step 21- Aquí verá todas las tablas de su base de datos. Seleccionemos elStudent mesa.
Step 22- Y verá todas las columnas en el cuadro de lista. SeleccioneID y LastName. En la parte inferior, puede ver que en realidad está creando una consulta. También puede utilizar elWhere o ORDER BY clauses. Una vez que haya terminado con la consulta, haga clic en Siguiente.
Step 23 - Haga clic en el Test Querybotón. Mostrará elquery result Como se muestra abajo.
Step 24- En el siguiente cuadro de diálogo, la fuente de datos está seleccionada de forma predeterminada. El campo "Seleccionar un campo de datos para mostrar en DropDownList" es el campo que realmente se mostrará. Seleccionemos LastName y seleccionemos el ID de "Seleccionar un campo de datos para el valor de DropDownList" y hagamos clic en Aceptar.
Como puede ver en la siguiente captura de pantalla, DataSource se agrega en la vista de diseño.
A continuación se muestra el código completo en el archivo ASPX, creado por Expression Web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language = "C#" %>
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form id = "form1" runat = "server">
<asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"
DataTextField = "LastName" DataValueField = "ID">
</asp:DropDownList>
<asp:SqlDataSource ID = "SqlDataSource1" runat = "server"
ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"
SelectCommand = "SELECT [ID], [LastName] FROM [Student]">
</asp:SqlDataSource>
</form>
</body>
</html>Step 25 - Guardemos la página web presionando Ctrl + S.
Llamar a esta página SQLDatasource.aspx y haga clic en Guardar.
Step 26- Vamos a obtener una vista previa de esta página en un navegador. Verá una lista desplegable que contiene el apellido de los estudiantes delStudent mesa.
