Este artículo combina ejemplos para describir cómo utilizar scripts Javascript del lado del cliente en aplicaciones ASP.net para mejorar la eficiencia de ejecución del programa y lograr más funciones.
1. ASP.Net y Javascript
.Net es el núcleo de la estrategia de próxima generación de Microsoft, y ASP.Net es la implementación específica de la estrategia .Net en el desarrollo web. Hereda la simplicidad y facilidad de uso de ASP, al tiempo que supera las deficiencias de los programas ASP que están mal estructurados y son difíciles de leer y comprender. En particular, la introducción de controles del lado del servidor y modelos controlados por eventos ha acercado el desarrollo de aplicaciones web al desarrollo de programas de escritorio en el pasado.
En varios artículos y libros que presentan ASP.Net, la atención se centra en los controles del servidor y .Net Framework SDK porque estas son las mejoras más recientes y revolucionarias en ASP.Net, en contraste, el script del lado del cliente Javascript (que también incluye VBScript); Aunque jugó un papel importante en el desarrollo web en el pasado, rara vez se menciona. Parece que con los programas del lado del servidor, los scripts del lado del cliente ya no son necesarios. Sin embargo, el programa del lado del servidor requiere una interacción entre el navegador y el servidor web. Para ASP.Net, es un envío de página, lo que requiere que se envíen una gran cantidad de datos de un lado a otro. verificación de entrada o confirmación de eliminación, están completamente bien implementados usando Javascript. Por lo tanto, todavía es necesario explorar cómo utilizar Javascript en ASP.Net.
2. Ejemplos de aplicaciones Javascript
1. Agregar un evento de Javascript a un control de servidor en la página.
El control de servidor finalmente genera HTML ordinario, como <asp:textbox> generando texto de entrada. Cada control HTML en el formulario tiene su propio evento de Javascript, como el cuadro de texto tiene un evento de cambio, el botón tiene un evento de clic, el cuadro de lista tiene un evento de cambio, etc. Para agregar eventos del lado del cliente a un control de servidor, debe utilizar la propiedad Atributos. El atributo Atributos es un atributo que tienen todos los controles del servidor. Se utiliza para agregar algunas etiquetas personalizadas al HTML final generado. Supongamos que hay un botón de guardar btnSave en el formulario web y desea preguntarle al usuario si realmente desea guardar cuando hace clic en este botón (por ejemplo, una vez guardado, no se puede restaurar, etc.), el siguiente código debería se agregará al evento Page_Load:
si no es page.isPostBack() entonces
btnSave.Attributes.Add("onclick","Javascript:return confirm('Are you sure to save?');")
end if
Cabe señalar que "regresar" no se omite; de lo contrario, incluso si el usuario hace clic en Cancelar, los datos se guardarán de todos modos.
2. Agregue un evento de Javascript para cada fila en el Datagrid
. Supongamos que cada fila del Datagrid tiene un botón de eliminar. Cuando el usuario hace clic en este botón, se espera que se le pregunte si realmente desea eliminar este registro, en caso de que lo haga. el usuario hace clic en la fila incorrecta o simplemente hace clic accidentalmente en el botón Eliminar.
No importa cuál sea el nombre de este botón de eliminación, no se puede hacer referencia a él directamente como en el ejemplo anterior, porque cada fila tiene dicho botón y son controles secundarios en el Datagrid. En este caso, debe utilizar el evento OnItemDataBound de Datagrid. El evento OnItemDataBound ocurre después de que cada fila de datos en Datagrid se vincula a Datagrid (es decir, se activa una vez por fila). Primero, agregue el siguiente código a la declaración de Datagrid:
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Definición de columnas aquí
</asp:datagrid> Aquí se explica que ItemDataBound Se llama al método cuando ocurre el evento OnItemDataBound, agregue la definición de este método en el archivo de código subyacente:
Sub ItemDataBound (remitente ByVal como objeto, ByVal e como DataGridItemEventArgs)
Si e.Item.ItemType <> ListItemType.Header y e.Item.ItemType <> ListItemType.Footer, entonces
atenúe oDeleteButton como LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirmar ('¿Está seguro de que desea eliminar" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
Fin Si
End Sub
Dado que la fila de título y la fila de pie de página de Datagrid también activarán este evento, primero se juzga que la fila que desencadena este evento no es la fila de título o la fila de pie de página. Aquí se supone que el botón Eliminar está ubicado en la columna 6 de la cuadrícula de datos (la primera columna es 0) y la fuente de datos de la cuadrícula de datos contiene una columna denominada "m_sName"
3． Referencia a los controles en Datagrid en el estado de edición
La función de edición incorporada de Datagrid es un método de edición cuando el número de campos en el registro es pequeño. El usuario no tiene que ingresar a una página separada para editar el registro, pero puede hacer clic directamente en el botón editar para poner la fila actual en modo de edición. Por otro lado, existen algunos programas Javascript que necesitan hacer referencia al nombre del control. Por ejemplo, muchos programas proporcionan un control de fecha cuando el usuario necesita ingresar una fecha para garantizar la legalidad del formato de fecha. Cuando el usuario hace clic en el icono de control, aparece una nueva ventana para que seleccione una fecha. En este momento, debe proporcionar el ID del cuadro de texto que muestra la fecha en la nueva ventana para que el valor pueda volver a completarse en el cuadro de texto cuando el usuario seleccione la fecha.
Si se trata de un control de cuadro de texto de servidor normal, su ID es el mismo que el ID del cuadro de entrada HTML generado, pero en el estado de edición de Datagrid, los dos ID no son iguales (el motivo es el mismo que en el ejemplo anterior; ), que requiere Utilice la propiedad ClientID del control.
SubItemEdit protegido (fuente ByVal como objeto, ByVal y como System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl como cadena
sDateCtrl = grd1 Items (e.Item.ItemIndex) . ClientID
End Sub
Aquí se supone que el método ItemEdit es el controlador de eventos OnItemEdit de Dategrid y que la tercera columna de Datagrid contiene un control de cuadro de texto de servidor llamado txtDate.
4.
se refiere al programa Javascript generado automáticamente por ASP.Net,
está dirigido a desarrolladores. No hay distinción entre servidor y cliente en el programa fuente HTML generado. Todos son HTML, DHTML y estándar. JavaScript. La razón por la que puede responder a la entrada del usuario es que el controlador de eventos de cada control eventualmente genera un script. Este script vuelve a enviar la página para que el servidor web tenga la oportunidad de responder y procesar nuevamente. Normalmente no tenemos que saber qué es este script ni llamarlo directamente, pero en algunos casos, llamarlo apropiadamente puede simplificar mucho trabajo. Eche un vistazo a los siguientes dos ejemplos.
● Haga clic en cualquier lugar de Datagrid para seleccionar una fila.
Datagrid proporciona un botón de selección incorporado. Cuando se hace clic en este botón, se selecciona la fila actual (la propiedad SelectedItemStyle se puede configurar para darle a la fila actual una apariencia diferente). Sin embargo, los usuarios pueden estar más acostumbrados a seleccionar una fila haciendo clic en cualquier lugar. Sería bastante engorroso implementar esta función por sí mismos. Una buena idea es agregar un botón de selección, pero ocultar la columna y llamar al Javascript generado por este botón cuando se hace clic en cualquier fila.
Sub Item_Bound(ByVal remitente como objeto, ByVal e As DataGridItemEventArgs)
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) y _
(itemType <> ListItemType.Footer) y _
(itemType <> ListItemType.Separator) Luego
atenúe oSelect como LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. ")
End Sub
Esto supone que el botón de selección está ubicado en la columna 6. e.Item representa una fila a juzgar por el HTML generado, se agrega un evento onclick a cada <tr>. El método Page.GetPostBackClientHyperLink devuelve el script del cliente generado por el control LinkButton en la página. El primer parámetro es el control Linkbutton y el segundo parámetro es el parámetro pasado a este control, que generalmente está vacío. Si no es un control LinkButton, existe una función similar GetPostBackClientEvent que los lectores pueden consultar en MSDN.
● Los scripts generados por el servidor entran en conflicto con los scripts agregados manualmente.
Los eventos del servidor de los controles del servidor generalmente corresponden a los eventos correspondientes de los controles del cliente. Por ejemplo, el evento SelectedIndexChanged de Dropdownlist corresponde al evento onchange de HTML <Select>. Si desea agregar manualmente un evento de cambio, se generarán dos cambios en el lado del cliente y el navegador ignorará uno. Por ejemplo, el usuario quiere guardar en la base de datos cada vez que cambia las opciones en la lista desplegable (aunque no es muy común, pero esta necesidad existe), pero al mismo tiempo, también quiere recordarle al usuario si Realmente quiere ahorrar. Obviamente, el código guardado debe colocarse en el evento SelectedIndexChanged y el recordatorio debe agregarse manualmente con un evento onchange. El resultado es que sólo se puede ejecutar uno de los dos cambios. El método correcto debería ser agregar un botón de guardar invisible y llamar al programa generado por este botón en el evento onchange agregado manualmente.
El método Page_Load es el siguiente:
Dim sCmd como cadena
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
Si no es page.isPostback entonces
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")
Terminar si
La función ConfirmUpdate es la siguiente
<Script language=”javascript”>
function ConfirmUpdate(cmd){
if
confirm(“¿Está seguro de actualizar?”)
eval(cmd)
</Script>
La función de evaluación de Javascript se utiliza aquí para llamar a una cadena de comandos contenidos en . Cabe señalar que la cadena que contiene el comando no se puede encerrar entre comillas simples, porque el script generado automáticamente incluye comillas simples, por lo que aquí se utilizan dos comillas dobles para representar las comillas dobles de la cadena misma.
3. Conclusión Lo
anterior analizó brevemente varias situaciones de inserción de Javascript en ASP.Net. La inserción adecuada de scripts Javascript del lado del cliente en el programa del servidor puede mejorar la eficiencia de ejecución del programa y proporcionar una interfaz de usuario más amigable.