Re: How to fire an event when a DropDownList is clicked

Y

ynanus

Hi,
I tried out the sample you provided. It only worked half way. I got
client-side popup message and server-side postback message "This is
server side code". But I failed to invoke server-side method
LinkButton1_Click and DropDownList1_SelectedIndexChanged.

Help is appreciated.

lucy



Bassel Tabbara said:
Hello,
I completed the sample and now when you click on the drop down list
control, the client side function will call the server side code.
This is accomplished by using two methods:
- RegisterClientScriptBlock
- GetPostBackEventReference

RegisterClientScriptBlock allows ASP.NET server controls to emit
client-side script blocks in the Page.
The client-side script is emitted just after the opening tag of the Page
object's <form runat= server> element.The script block is
emitted as the object that renders the output is defined, so you must
include both tags of the <script> element.

Please refers to the following documentation regarding
RegisterClientScriptBlock
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/
frlrfSystemWebUIPageClassRegisterClientScriptBlockTopic.asp


GetPostBackEventReference obtains a reference to a client-side script
function that causes, when invoked, the server to post back to the page.

Please refers to the following documentation regarding
GetPostBackEventReference
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/
frlrfsystemwebuipageclassgetpostbackeventreferencetopic.asp

I am including below the sample where the DropDown List Click Client Event
will Post to the server and then a call a server side code.

===============
WebForm1.aspx
===============
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="CustomerDemosVB.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
Please Click on the DropDown List <br>
<asp:dropdownlist onclick="myfunc()" id="DropDownList1" runat="server"
AutoPostBack="True">
<asp:ListItem Value="One">One</asp:ListItem>
<asp:ListItem Value="Two">Two</asp:ListItem>
<asp:ListItem Value="Three">Three</asp:ListItem>
<asp:ListItem Value="Four">Four</asp:ListItem>
</asp:dropdownlist>

</form>
</body>
</HTML>

=================
WebForm1.aspx.vb
=================

Public Class WebForm1
Inherits System.Web.UI.Page
Protected WithEvents LinkButton1 As System.Web.UI.WebControls.LinkButton
protected WithEvents DropDownList1 as
System.Web.UI.WebControls.DropDownList

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load

Page.RegisterClientScriptBlock("ClientScript","<script
language=javascript>function myfunc(){alert('DropDown clicked. Now calling
server-side function');" + _
Page.GetPostBackEventReference(DropDownList1) + "}</script>")

if Page.IsPostBack
Response.Write("This is server side code. <br>")
End if
End Sub

Private Sub LinkButton1_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles LinkButton1.Click
Response.Write("This is server side code. You passed the value ["
& Request.Form("__EVENTARGUMENT") & "]<br>")

End Sub
Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As
System.Object, ByVal e As System.EventArgs) Handles
DropDownList1.SelectedIndexChanged
Response.Write("This is server side code. You passed the value [" &
Request.Form("__EVENTARGUMENT") & "]<br>")
End Sub

End Class

Please let me know if you have any questions regarding this.

Thanks,
Bassel Tabbara
Microsoft, ASP.NET

This posting is provided "AS IS", with no warranties, and confers no rights.

--------------------
| X-Tomcat-ID: 639472359
| References: <#5HVgGO#[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain
| Content-Transfer-Encoding: 7bit
| From: (e-mail address removed) (Bassel Tabbara [MSFT])
| Organization: Microsoft
| Date: Wed, 02 Apr 2003 22:23:34 GMT
| Subject: RE: How to fire an event when a DropDownList is clicked
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| Message-ID: <mP5nEaW#[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Lines: 131
| NNTP-Posting-Host: TOMCATIMPORT2 10.201.218.182
| Path: cpmsftngxa08.phx.gbl!cpmsftngxa06.phx.gbl
| Xref: cpmsftngxa08.phx.gbl microsoft.public.dotnet.framework.aspnet:135594
|
| Hello,
| I am half through what you are asking for. I found the event that you
were
| searching for. You can use the Click event of the DropDownList box
control.
| From this event you can call a function that is being sent by the server.
| You can do this by using the function Page.RegisterClientScriptBlock
| This allows ASP.NET server controls to emit client-side script blocks in
| the Page.
| The client-side script is emitted just after the opening tag of the Page
| object's <form runat= server> element.The script block is emitted as
| the object that renders the output is defined, so you must include both
| tags of the <script> element.
|
| For more information you can refer to the following MSDN article:
|
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/
| frlrfSystemWebUIPageClassRegisterClientScriptBlockTopic.asp
|
| Moreover, you can generate Client-Side Script for Postback by using The
| GetPostBackEventReference. This method emits client-side script that
| initiates postback and also provides a reference to the control that
| initiated the postback event.
|
| For more information on this method refers to the following MSDN article:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/htm
| l/cpcongeneratingclient-sidejavascriptforpostback.asp
|
| I included below a sample that will write client script from the server
| side code and catch the event of dropdown list box without changing
| the current selection.
|
| ===========
| default.aspx
| ===========
| <%@ Page language="c#" Codebehind="default.aspx.cs"
AutoEventWireup="false"
| Inherits="CustomerDemos._default" %>
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
| <HTML>
| <HEAD>
| <title>default</title>
| <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
| <meta name="CODE_LANGUAGE" Content="C#">
| <meta name="vs_defaultClientScript" content="JavaScript">
| <meta name="vs_targetSchema"
| content="http://schemas.microsoft.com/intellisense/ie5">
|
| </HEAD>
| <body MS_POSITIONING="GridLayout">
| <form id="default" method="post" runat="server">
| <asp:DropDownList id="DropDownList1" onclick="myfunc()"
style="Z-INDEX:
| 101; LEFT: 275px; POSITION: absolute; TOP: 112px" runat="server">
| <asp:ListItem Value="One">One</asp:ListItem>
| <asp:ListItem Value="Two">Two</asp:ListItem>
| <asp:ListItem Value="Three">Three</asp:ListItem>
| <asp:ListItem Value="Four">Four</asp:ListItem>
| </asp:DropDownList>
| </form>
| </body>
| </HTML>
|
|
| =============
| default.aspx.cs
| =============
| using System;
| using System.Collections;
| using System.ComponentModel;
| using System.Data;
| using System.Drawing;
| using System.Web;
| using System.Web.SessionState;
| using System.Web.UI;
| using System.Web.UI.WebControls;
| using System.Web.UI.HtmlControls;
|
| namespace CustomerDemos
| {
| /// <summary>
| /// Summary description for _default.
| /// </summary>
| public class _default : System.Web.UI.Page
| {
| protected System.Web.UI.WebControls.DropDownList DropDownList1;
|
| private void Page_Load(object sender, System.EventArgs e)
| {
|
| Page.RegisterClientScriptBlock("ClientScript","<script
| language=javascript>function myfunc(){ alert('hello again'); " +
| Page.GetPostBackEventReference(DropDownList1) + "}</script>");
|
|
| }
|
| #region Web Form Designer generated code
| override protected void OnInit(EventArgs e)
| {
| //
| // CODEGEN: This call is required by the ASP.NET Web Form Designer.
| //
| InitializeComponent();
| base.OnInit(e);
| }
|
| /// <summary>
| /// Required method for Designer support - do not modify
| /// the contents of this method with the code editor.
| /// </summary>
| private void InitializeComponent()
| {
| this.Load += new System.EventHandler(this.Page_Load);
|
| }
| #endregion
| }
| }
|
|
| I will dig more into how you can call from a client side scrict a server
| side method.
|
| Thanks,
| Bassel Tabbara
| Microsoft, ASP.NET
|
| This posting is provided "AS IS", with no warranties, and confers no
rights.
|
|
| --------------------
| | From: "SunshineGirl" <[email protected]>
| | Subject: How to fire an event when a DropDownList is clicked
| | Date: Tue, 1 Apr 2003 23:32:23 -0700
| | Lines: 42
| | MIME-Version: 1.0
| | Content-Type: multipart/alternative;
| | boundary="----=_NextPart_000_00E0_01C2F8A6.F2721EA0"
| | X-Priority: 3
| | X-MSMail-Priority: Normal
| | X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
| | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
| | Message-ID: <#5HVgGO#[email protected]>
| | Newsgroups: microsoft.public.dotnet.framework.aspnet
| | NNTP-Posting-Host: h24-64-96-140.ed.shawcable.net 24.64.96.140
| | Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!TK2MSFTNGP11.phx.gbl
| | Xref: cpmsftngxa06.phx.gbl
microsoft.public.dotnet.framework.aspnet:134577
| | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| |
| | I would like to run a method when the user clicks the arrow to expand
the
| DropDownList, and does not necessarily change the selection. I know I
have
| to use the Attributes collection, but I'm not sure how to link the
| JavaScript code to the server-side method.
| | Thanks.
| |
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top