О реализации ASP.NET вызова JavaScript

В этой статье собраны примеры, описывающие, как использовать клиентские сценарии Javascript в приложениях ASP.net для повышения эффективности выполнения программы и достижения большего количества функций.

1. ASP.Net и Javascript

.Net — это ядро ​​стратегии Microsoft следующего поколения, а ASP.Net — это конкретная реализация стратегии .Net в веб-разработке. Он унаследовал простоту и удобство использования ASP, в то же время преодолевая недостатки программ ASP, которые плохо структурированы и трудны для чтения и понимания. В частности, в прошлом внедрение средств управления на стороне сервера и моделей, управляемых событиями, приблизило разработку веб-приложений к разработке настольных программ.

В различных статьях и книгах, посвященных ASP.Net, основное внимание уделяется серверным элементам управления и .Net Framework SDK, поскольку это последние и самые революционные улучшения в ASP.Net, в отличие от клиентского сценария Javascript (также включая VBScript); играл важную роль в веб-разработке в прошлом, редко упоминается. Похоже, что для серверных программ клиентские сценарии больше не нужны. Однако серверная программа требует взаимодействия между браузером и веб-сервером. Для ASP.Net это отправка страницы, требующая отправки большого объема данных туда и обратно. Однако многие задачи, такие как проверка ввода или подтверждение удаления полностью одобрены. Реализовано с использованием Javascript. Поэтому все еще необходимо изучить, как использовать Javascript в ASP.Net.

2. Примеры приложений Javascript

1. Добавление события Javascript в серверный элемент управления на странице

Серверный элемент управления в конечном итоге генерирует обычный HTML, например , генерирующий входной текст. Каждый элемент управления HTML в форме имеет свое собственное событие Javascript, например, Textbox имеет событие onchange, Button имеет событие onclick, Listbox имеет событие onchange и т. д. Чтобы добавить события на стороне клиента в серверный элемент управления, вам необходимо использовать свойство Attributes. Атрибут Attributes — это атрибут, который есть у всех серверных элементов управления. Он используется для добавления некоторых пользовательских тегов в окончательный сгенерированный HTML. Предположим, что в веб-форме есть кнопка сохранения btnSave, и вы хотите узнать у пользователя, действительно ли он хочет сохранить сохранение, когда он нажимает эту кнопку (например, после сохранения оно не может быть восстановлено и т. д.), следующий код должен быть добавлено к событию Page_Load:

если не page.isPostBack(), то

btnSave.Attributes.Add("onclick","Javascript:return submit('Вы уверены, что хотите сохранить?');")

end if

Следует отметить, что «return» не опускается, иначе, даже если пользователь нажмет «Отмена», данные все равно будут сохранены.

2. Добавьте событие Javascript для каждой строки в Datagrid

. Предположим, что каждая строка Datagrid имеет кнопку удаления. Когда пользователь нажимает эту кнопку, ожидается, что пользователю будет предложено, действительно ли он хочет удалить эту запись, в случае, если он будет удален. пользователь нажимает не ту строку или просто случайно нажимает кнопку «Удалить».

Независимо от имени этой кнопки удаления, на нее нельзя напрямую ссылаться, как в предыдущем примере, поскольку каждая строка имеет такую ​​кнопку, а они являются дочерними элементами управления в Datagrid. В этом случае вам необходимо использовать событие OnItemDataBound Datagrid. Событие OnItemDataBound возникает после того, как каждая строка данных в Datagrid привязана к Datagrid (то есть оно срабатывает один раз для каждой строки). Сначала добавьте следующий код в объявление Datagrid:

... здесь определение столбцов

Здесь объясняется, что ItemDataBound метод вызывается при возникновении события OnItemDataBound, добавьте определение этого метода в файл кода программной части:

Sub ItemDataBound (отправитель ByVal как объект, ByVal e как DataGridItemEventArgs)

Если e.Item.ItemType <> ListItemType.Header и e.Item.ItemType <> ListItemType.Footer Тогда

Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)

oDeleteButton.Attributes("onclick") = "javascript:return Confirm ("Вы уверены, что хотите удалить" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"

End Если

End Sub

Поскольку строка заголовка и строка нижнего колонтитула Datagrid также запускают это событие, сначала считается, что строка, вызывающая это событие, не является строкой заголовка или строкой нижнего колонтитула. Здесь предполагается, что кнопка «Удалить» расположена в столбце 6 таблицы данных (первый столбец — 0), а источник данных таблицы данных содержит столбец с именем «m_sName».

3． Ссылка на элементы управления в Datagrid в состоянии редактирования.

Встроенная функция редактирования Datagrid — это метод редактирования, когда количество полей в записи небольшое. Пользователю не нужно входить на отдельную страницу для редактирования записи, он может напрямую нажать кнопку редактирования, чтобы перевести текущую строку в режим редактирования. С другой стороны, существуют некоторые программы Javascript, которым необходимо ссылаться на имя элемента управления. Например, многие программы предоставляют элемент управления датой, когда пользователю необходимо ввести дату, чтобы убедиться в правильности формата даты. Когда пользователь щелкает значок элемента управления, появляется новое окно, в котором пользователь может выбрать дату. На данный момент вам необходимо предоставить идентификатор текстового поля, в котором отображается дата, в новом окне, чтобы значение можно было заполнить обратно в текстовое поле, когда пользователь выбирает дату.

Если это обычный серверный текстовый элемент управления, его идентификатор совпадает с идентификатором сгенерированного поля ввода HTML, но в состоянии редактирования Datagrid эти два идентификатора не совпадают (причина та же, что и в приведенном выше примере); ), для чего требуется использовать свойство ClientID элемента управления.

Protected Sub ItemEdit(Источник ByVal As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

Dim sDateCtrl как строка

sDateCtrl = grd1. Items (e.Item.ItemIndex) Cells(2). ClientID

End Sub

Здесь предполагается, что метод ItemEdit является обработчиком событий OnItemEdit Dategrid и что третий столбец Datagrid содержит серверное текстовое поле с именем txtDate.

4.

относится к программе Javascript, автоматически создаваемой ASP.Net,

предназначен для разработчиков. В сгенерированной исходной программе HTML нет различия между сервером и клиентом. Все они представляют собой стандартные HTML, DHTML и. Javascript. Причина, по которой он может реагировать на ввод пользователя, заключается в том, что обработчик событий каждого элемента управления в конечном итоге генерирует сценарий. Этот сценарий повторно отправляет страницу, чтобы веб-сервер имел возможность ответить и обработать снова. Обычно нам не нужно знать, что это за сценарий, или вызывать его напрямую, но в некоторых случаях правильный вызов этого сценария может упростить большую часть работы. Взгляните на следующие два примера.

● Щелкните в любом месте Datagrid, чтобы выбрать строку.

Datagrid предоставляет встроенную кнопку выбора. При нажатии этой кнопки выбирается текущая строка (можно установить свойство SelectedItemStyle, чтобы придать текущей строке другой вид). Однако пользователям, возможно, привычнее выбирать строку щелчком мыши в любом месте. Было бы довольно затруднительно реализовать эту функцию самостоятельно. Хорошая идея — добавить кнопку выбора, но сделать столбец скрытым и вызывать Javascript, сгенерированный этой кнопкой, при нажатии любой строки.

Sub Item_Bound (отправитель ByVal как объект, ByVal e как DataGridItemEventArgs)

Dim itemType As ListItemType

itemType = CType (e.Item.ItemType, ListItemType)

If (itemType <> ListItemType.Header) и _

(itemType <> ListItemType.Footer) и _

(itemType <> ListItemType.Separator) Затем

Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)

e.Item.Attributes("onclick") = Page. ")

End Sub

Предполагается, что кнопка выбора расположена в столбце 6. e.Item представляет собой строку. Судя по сгенерированному HTML, к каждому добавляется событие onclick. Метод Page.GetPostBackClientHyperLink возвращает клиентский сценарий, созданный элементом управления LinkButton на странице. Первый параметр — это элемент управления Linkbutton, а второй параметр — это параметр, передаваемый этому элементу управления, который обычно пуст. Если это не элемент управления LinkButton, существует аналогичная функция GetPostBackClientEvent. Читатели могут обратиться к MSDN.

● Сценарии, созданные сервером, конфликтуют со сценариями, добавленными вручную.

Серверные события серверных элементов управления обычно соответствуют соответствующим событиям клиентских элементов управления. Например, событие SelectedIndexChanged Dropdownlist соответствует событию onchange HTML . Если вы хотите вручную добавить событие onchange, на стороне клиента будут сгенерированы два onchange, а браузер проигнорирует одно. Например, пользователь хочет сохранять в базу данных каждый раз, когда он меняет параметры в раскрывающемся списке (хотя это не очень часто, но такая необходимость существует), но в то же время он также хочет напомнить пользователю, был ли он очень хочет сэкономить. Очевидно, что сохраненный код должен быть помещен в событие SelectedIndexChanged, а напоминание должно быть добавлено вручную с помощью события onchange. В результате может быть выполнено только одно из двух onchanges. Правильным методом должно быть добавление невидимой кнопки сохранения и вызов программы, созданной этой кнопкой, в добавленном вручную событии onchange.

Метод Page_Load выглядит следующим образом:

Dim sCmd как строка

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "").

Если не page.isPostback, то

Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")

Конец, если

Функция ConfirmUpdate выглядит следующим образом:

Здесь

используется функция Javascript eval

;

вызвать строковые команды, содержащиеся в . Следует отметить, что строку, содержащую команду, нельзя заключать в одинарные кавычки, поскольку автоматически сгенерированный скрипт включает в себя одинарные кавычки, поэтому здесь для представления двойных кавычек самой строки используются две двойные кавычки.

3. Заключение

Выше кратко обсуждалось несколько ситуаций вставки Javascript в ASP.Net. Правильная вставка сценариев Javascript на стороне клиента в серверную программу может повысить эффективность работы программы и обеспечить более дружественный пользовательский интерфейс.