이 문서에서는 예제를 결합하여 ASP.net 응용 프로그램에서 클라이언트 측 Javascript 스크립트를 사용하여 프로그램 실행 효율성을 향상시키고 더 많은 기능을 달성하는 방법을 설명합니다.
1. ASP.Net 및 Javascript
.Net은 Microsoft의 차세대 전략의 핵심이며 ASP.Net은 웹 개발에서 .Net 전략을 구체적으로 구현한 것입니다. ASP의 단순성과 사용 용이성을 계승하는 동시에 구조가 허술하고 읽고 이해하기 어려운 ASP 프로그램의 단점을 극복합니다. 특히, 서버측 컨트롤과 이벤트 기반 모델의 도입으로 인해 과거에는 웹 애플리케이션 개발이 데스크톱 프로그램 개발에 더 가까워졌습니다.
ASP.Net을 소개하는 다양한 기사와 책에서는 서버 컨트롤과 .Net Framework SDK에 중점을 두고 있습니다. 이는 ASP.Net의 최신이자 가장 혁신적인 개선 사항인 반면, 클라이언트 측 스크립트 Javascript(VBScript도 포함)입니다. 과거에는 웹 개발에서 중요한 역할을 했지만 서버측 프로그램에서는 클라이언트측 스크립트가 더 이상 필요하지 않은 것 같습니다. 그러나 서버 측 프로그램에는 브라우저와 웹 서버 간의 상호 작용이 필요합니다. ASP.Net의 경우 페이지 제출이므로 많은 양의 데이터를 주고 받아야 합니다. 입력 확인이나 삭제 확인은 Javascript를 사용하여 완벽하게 구현됩니다. 따라서 ASP.Net에서 Javascript를 사용하는 방법을 탐색하는 것은 여전히 필요합니다.
2. 자바스크립트 적용 예시
1. 페이지의 서버 컨트롤에 Javascript 이벤트를 추가하면
서버 컨트롤은 궁극적으로 입력 텍스트를 생성하는 <asp:textbox>와 같은 일반 HTML을 생성합니다. 양식의 각 HTML 컨트롤에는 텍스트 상자에 onchange 이벤트가 있고, 버튼에 onclick 이벤트가 있고, 목록 상자에 onchange 이벤트가 있는 등 자체 Javascript 이벤트가 있습니다. 서버 컨트롤에 클라이언트측 이벤트를 추가하려면 Attributes 속성을 사용해야 합니다. 속성 속성은 모든 서버 컨트롤이 갖는 속성으로, 최종 생성된 HTML에 일부 사용자 정의 태그를 추가하는 데 사용됩니다. Web Form에 btnSave 저장 버튼이 있고 사용자가 이 버튼을 클릭할 때 실제로 저장할지 여부를 묻는 메시지를 표시하고 싶다고 가정합니다(예: 일단 저장하면 복원할 수 없음 등). 다음 코드는 다음과 같습니다. Page_Load 이벤트에 추가됩니다.
그렇지 않은 경우 page.isPostBack() then
btnSave.Attributes.Add("onclick","Javascript:return verify('저장하시겠습니까?');")
end
if
'return'은 생략되지 않으며, 그렇지 않으면 사용자가 취소를 클릭하더라도 데이터는 계속 저장됩니다.
2. Datagrid의 각 행에 대해 Javascript 이벤트를 추가합니다
. Datagrid의 각 행에 삭제 버튼이 있다고 가정합니다. 사용자가 이 버튼을 클릭하면 사용자에게 이 레코드를 삭제할 것인지 묻는 메시지가 표시되기를 바랍니다. 사용자가 잘못된 행을 클릭했거나 실수로 삭제 버튼을 클릭했습니다.
이 삭제 버튼의 이름이 무엇이든 이전 예제처럼 직접 참조할 수는 없습니다. 각 행에 이러한 버튼이 있고 Datagrid의 자식 컨트롤이기 때문입니다. 이 경우 Datagrid의 OnItemDataBound 이벤트를 사용해야 합니다. OnItemDataBound 이벤트는 Datagrid의 각 데이터 행이 Datagrid에 바인딩된 후에 발생합니다(즉, 행당 한 번씩 실행됨). 먼저 Datagrid 선언에 다음 코드를 추가합니다.
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Columns 정의는 여기에
</asp:datagrid> 여기에서는 ItemDataBound가 OnItemDataBound 이벤트가 발생할 때 메서드가 호출되는 경우 코드 숨김 파일에 이 메서드의 정의를 추가합니다.
Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
If e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Footer Then
Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return 확인('삭제하시겠습니까?" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End If
End Sub
Datagrid의 제목 행과 바닥글 행에서도 이 이벤트가 발생하므로 먼저 이 이벤트를 발생시킨 행이 제목 행이나 바닥글 행이 아니라고 판단합니다. 여기에서는 삭제 버튼이 Datagrid의 열 6(첫 번째 열은 0)에 있고 Datagrid의 데이터 소스에 "m_sName"이라는 열이 포함되어 있다고 가정합니다.
3． 편집 상태에서 Datagrid의 컨트롤 참조
Datagrid에 내장된 편집 기능은 레코드의 필드 수가 적을 때 편집하는 방법입니다. 사용자는 레코드를 편집하기 위해 별도의 페이지에 들어갈 필요 없이 편집 버튼을 직접 클릭하여 현재 행을 편집 모드로 전환할 수 있습니다. 반면에 컨트롤 이름을 참조해야 하는 일부 Javascript 프로그램이 있습니다. 예를 들어, 많은 프로그램에서는 사용자가 날짜 형식의 적법성을 확인하기 위해 날짜를 입력해야 할 때 날짜 컨트롤을 제공합니다. 사용자가 컨트롤 아이콘을 클릭하면 사용자가 날짜를 선택할 수 있는 새 창이 나타납니다. 이때, 사용자가 날짜를 선택하면 해당 값이 텍스트 상자에 백필될 수 있도록 날짜를 표시하는 텍스트 상자의 ID를 새 창에 제공해야 합니다.
일반 서버 텍스트 상자 컨트롤인 경우 해당 ID는 생성된 HTML 입력 상자의 ID와 동일하지만 Datagrid의 편집 상태에서는 두 ID가 동일하지 않습니다(이유는 위의 예와 동일). ), 컨트롤의 ClientID 속성을 사용해야 합니다.
보호된 하위 ItemEdit(ByVal 소스 As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl as string
sDateCtrl = grd1. FindControl("txtDate"). . ClientID
End Sub
여기서는 ItemEdit 메서드가 Dategrid의 OnItemEdit 이벤트 처리기이고 Datagrid의 세 번째 열에 txtDate라는 서버 텍스트 상자 컨트롤이 포함되어 있다고 가정합니다.
4. ASP.Net에서 자동으로 생성되는 Javascript 프로그램을 가리키는
개발자를 대상으로 합니다. 생성된 HTML 소스 프로그램에는 서버와 클라이언트의 구분이 없습니다. 이들은 모두 표준 HTML, DHTML 및 HTML입니다. 자바스크립트. 사용자 입력에 응답할 수 있는 이유는 각 컨트롤의 이벤트 핸들러가 결국 스크립트를 생성하여 웹 서버가 다시 응답하고 처리할 수 있도록 하기 때문입니다. 일반적으로 우리는 이 스크립트가 무엇인지 알 필요도 없고 이 스크립트를 직접 호출할 필요도 없지만 어떤 경우에는 이 스크립트를 적절하게 호출하면 많은 작업을 단순화할 수 있습니다. 다음 두 가지 예를 살펴보십시오.
● 행을 선택하려면 Datagrid의 아무 곳이나 클릭합니다.
Datagrid에는 기본 제공 선택 버튼이 제공됩니다. 이 버튼을 클릭하면 현재 행이 선택됩니다(현재 행에 다른 모양을 제공하도록 SelectedItemStyle 속성을 설정할 수 있음). 그러나 사용자는 아무 곳이나 클릭하여 행을 선택하는 데 더 익숙해질 수 있습니다. 이 기능을 완전히 자체적으로 구현하는 것은 상당히 번거로울 수 있습니다. 좋은 아이디어는 선택 버튼을 추가하되 열을 숨기고 행을 클릭할 때 이 버튼에 의해 생성된 Javascript를 호출하는 것입니다.
Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) And _
(itemType <> ListItemType.Footer) And _
(itemType <> ListItemType.Separator) 그런 다음
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page.GetPostBackClientHyperlink (oSelect, " ")
End Sub
이는 선택 버튼이 열 6에 있다고 가정합니다. e.Item은 행을 나타냅니다. 생성된 HTML로 판단하면 각 <tr>에 onclick 이벤트가 추가됩니다. Page.GetPostBackClientHyperLink 메서드는 페이지의 LinkButton 컨트롤에 의해 생성된 클라이언트 스크립트를 반환합니다. 첫 번째 매개 변수는 Linkbutton 컨트롤이고 두 번째 매개 변수는 이 컨트롤에 전달되는 매개 변수이며 일반적으로 비어 있습니다. LinkButton 컨트롤이 아닌 경우 비슷한 함수인 GetPostBackClientEvent가 있습니다. 독자는 MSDN을 참조할 수 있습니다.
● 서버에서 생성된 스크립트는 수동으로 추가된 스크립트와 충돌합니다.
서버 컨트롤의 서버 이벤트는 일반적으로 클라이언트 컨트롤의 해당 이벤트에 해당합니다. 예를 들어 Dropdownlist의 SelectedIndexChanged 이벤트는 HTML <Select>의 onchange 이벤트에 해당합니다. onchange 이벤트를 수동으로 추가하려는 경우 클라이언트 측에서 두 개의 onchange가 생성되고 브라우저는 하나를 무시합니다. 예를 들어, 사용자는 Dropdownlist의 옵션을 변경할 때마다 데이터베이스에 저장하기를 원하지만(비록 흔하지는 않지만 이러한 필요성이 존재함) 동시에 사용자에게 다음 사항을 상기시키고 싶어합니다. 정말 저장하고 싶어. 분명히 저장된 코드는 SelectedIndexChanged 이벤트에 배치되어야 하며 알림은 onchange 이벤트를 통해 수동으로 추가되어야 합니다. 결과적으로 두 개의 onchange 중 하나만 실행할 수 있습니다. 올바른 방법은 보이지 않는 저장 버튼을 추가하고 수동으로 추가된 onchange 이벤트에서 이 버튼으로 생성된 프로그램을 호출하는 것입니다.
Page_Load 메서드는 다음과 같습니다.
Dim sCmd as string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
page.isPostback이 아닌 경우
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """) )")
다음과 같은 경우 종료
ConfirmUpdate 함수는 다음과 같습니다.
<Script Language=”javascript”>
functionConfirmUpdate(cmd){
if verify(“업데이트하시겠습니까?”)
eval(cmd)
}
</Script>
여기서는 Javascript eval 함수를 사용합니다. 에 포함된 문자열 명령을 호출합니다. 자동으로 생성된 스크립트에는 작은따옴표가 포함되어 있으므로 명령이 포함된 문자열은 작은따옴표로 묶을 수 없습니다. 따라서 여기서는 문자열 자체의 큰따옴표를 나타내는 데 두 개의 큰따옴표가 사용됩니다.
3. 결론
위에서는 ASP.Net에 Javascript를 삽입하는 몇 가지 상황에 대해 간략하게 설명했습니다. 클라이언트 측 Javascript 스크립트를 서버 프로그램에 올바르게 삽입하면 프로그램의 실행 효율성이 향상되고 보다 친숙한 사용자 인터페이스를 제공할 수 있습니다.