calling a javascript function && handling an event

Question

I have an asp.net application in which i have to call a javascript function when an event is fired .I tried this :

protected Consultation controlconsultation  = new Consultation();
 protected void Page_Load(object sender, EventArgs e)
        {

           controlconsultation.imageinfo += controlconsultation_imageinfo;
           Session["controlconsultation"] = controlconsultation;
       }

        void controlconsultation_imageinfo(object sender, CommandEventArgs e)
        {String csName = "myScript";
            Type csType = this.GetType();

            // Get a ClientScriptManager reference from the Page class.
            ClientScriptManager cs = Page.ClientScript;

            // Check to see if the client script is already registered.
            if (!cs.IsClientScriptBlockRegistered(csType, csName))
            {
                StringBuilder csText = new StringBuilder();
                csText.Append("<script type=\"text/javascript\"> ");
                csText.Append("alert(" + "Espace_Candidat/InfoEdition.ascx" +"); </");
                csText.Append("script>");
                cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
            }
        }

Code behind of the user control

public event CommandEventHandler imageinfo ; 
protected void Page_Load(object sender, EventArgs e)
        {
 Consultation current = (Consultation)Session["controlconsultation"];
                imageinfo = current.imageinfo;
       }
  protected void Valider (object sender, CommandEventArgs e)
          {
            if (imageinfo != null)
              {
                  string pageNumber = (string)e.CommandArgument;
                  CommandEventArgs args = new CommandEventArgs("Control", pageNumber);
                  imageinfo(this, args);
              }
          }

I just need to display an alert message when the event is fired . When i launched the application i don't get any result but if i put the code of the event in the page load i will see the alert.

So How can i change my code display the alert in every raise of the event?

what client side thingy should cause js to call the server side event? Is it a client side button click, or a text change in a textbox, or a select change in a select box...? — deostroll
– deostroll, Commented May 12, 2014 at 12:21
No in my case i have a user control , when i click into a submit button it raises an event which received by the page ( event driven-communication ) So i need in this event to call the js function which change the user control — Lamloumi Afif
– Lamloumi Afif, Commented May 12, 2014 at 12:36
What does this user control compose of? It looks to me you are probably handling things in a roundabout manner. You'd have to share that code here to be sure. — deostroll
– deostroll, Commented May 12, 2014 at 12:38
Hi. I suggest you update the observation of our chat in your question post. The issue we've observed is that this is a problem with the PartialUpdatePanel's design. — deostroll
– deostroll, Commented May 14, 2014 at 4:30

deostroll · Accepted Answer · 2014-05-12 13:22:36Z

1

The recommended pattern to solve this problem is a user control. You are correct on this count. However, you've to take care of wiring stuff properly.

You can look at the following article for a guideline: http://www.codeproject.com/Articles/51671/How-To-Expose-Events-from-UserControl

The steps in short are:

You define a delegate
Define an event on that user control using above delegate
Write the necessary plumbing code in the user control code behind
Take care of wiring the code in your aspx markup.

To highlight the 4th point, say its a dropdown inside your user control which contains a list of names. You've defined an event, say NameChanged as follows:

public event NameChangedHandler NameChanged;

In your aspx markup make sure your user control is defined as follows:

<uc1:FooControl runat="server" OnNameChanged="FooCallback"></uc1:FooControl>

Make note of the convention here; in the code behind you've declared event as NameChanged. In your markup, the letters On gets prefixed to it: hence OnNameChanged.

Edit:

Here is an example app; its the same as described above.

MyUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="WebApp.UserControlExample.MyUserControl" %>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    <asp:ListItem>Jim</asp:ListItem>
    <asp:ListItem>John</asp:ListItem>
    <asp:ListItem>Rosemary</asp:ListItem>
    <asp:ListItem>Catherine</asp:ListItem>
</asp:DropDownList>

MyUserControl.ascx.cs:

using System;

namespace WebApp.UserControlExample
{
    public delegate void NameChangedEventHandler(string name);
    public partial class MyUserControl : System.Web.UI.UserControl
    {
        public event NameChangedEventHandler NameChanged;
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (NameChanged != null)
                NameChanged(DropDownList1.SelectedValue);
        }
    }
}

Make note of how the "plumbing" is done. I've put AutoPostback="true" for the dropdownlist; hence I can handle its SelectedIndexChanged event in the code behind of the user control. This is where I can decide on my logic to raise an event.

WebForm1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.UserControlExample.WebForm1" %>

<%@ Register src="MyUserControl.ascx" tagname="MyUserControl" tagprefix="uc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
        <uc1:MyUserControl ID="MyUserControl1" runat="server" OnNameChanged="MyUserControl1_NameChanged" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

WebForm1.aspx.cs:

using System;

namespace WebApp.UserControlExample
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void MyUserControl1_NameChanged(string name)
        {
            Label1.Text = "Selected name is <b>" + name + "</b>";
            //you probably want to call your ClientScript.RegisterStartupScript in here...
        }
    }
}

Make note of the event callback on the target aspx webform.

edited May 12, 2014 at 13:22

answered May 12, 2014 at 12:50

deostroll

12k22 gold badges94 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lamloumi Afif Over a year ago

Sorry @deostroll but i didn't understand what the delegate can add as a plus in my case ( ok it's a good practise), but in my case when i put a breakpoint, i can reach the event instructions but no result ==> I think the problem is that the js method isn't executed

deostroll Over a year ago

Updated answer with example.

Lamloumi Afif Over a year ago

good job :) but my event call back is in the user control ie : the button image is in the user control not in the page

deostroll Over a year ago

that's why you expose events from user control to aspx page. In your case you'd write all that plumbing code in the image button click. Hope you understand now.

Lamloumi Afif Over a year ago

i'm sorry but i still not understand what do u mean by all that plumbing. i put

<asp:ImageButton runat="server" AutoPostback="true" ID="edit" ImageUrl="../Design_Ressources/img/thumbs/doc.png"   OnCommand="Valider"  />

in the user control with this method in code behind

protected void Valider (object sender, CommandEventArgs e)           {             if (imageinfo != null)               {                 imageinfo();               }           }

|

Vishal · Accepted Answer · 2014-05-12 12:26:02Z

0

Script tag should end properly. Check for end script tag...

answered May 12, 2014 at 12:26

Vishal

511 silver badge6 bronze badges

3 Comments

Lamloumi Afif Over a year ago

Please explain your idea :)

Vishal Over a year ago

The closing script tag is missing in your code. The line csText.Append("script>"); should be csText.Append("</script>"); Also when the page rendered, check the source of the page and see if this script is there ...

Vishal Over a year ago

Sorry, missed that part. Now please check the generated HTML and see if the script is present...

Cros · Accepted Answer · 2014-05-12 12:30:10Z

0

Try using:

cs.RegisterStartupScript

answered May 12, 2014 at 12:30

Cros

4,3759 gold badges43 silver badges48 bronze badges

1 Comment

Lamloumi Afif Over a year ago

I used it but the same result

Afnan Ahmad · Accepted Answer · 2014-05-12 12:35:32Z

0

Try this:

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "error", "alert('Hello');", true);

answered May 12, 2014 at 12:35

Afnan Ahmad

2,5424 gold badges28 silver badges46 bronze badges

4 Comments

i3arnon Over a year ago

Could you elaborate more?

Afnan Ahmad Over a year ago

@I3arnon its simply a one line code rather than writing long piece of code using string builder. This perfectly generates an alert.

Lamloumi Afif Over a year ago

Yes, and i reach this line of code but no alert is appears

Afnan Ahmad Over a year ago

@Lamloumi Amazing I am working with the same technique since long :)

Collectives™ on Stack Overflow

calling a javascript function && handling an event

4 Answers 4

MyUserControl.ascx:

MyUserControl.ascx.cs:

WebForm1.aspx:

WebForm1.aspx.cs:

7 Comments

3 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

MyUserControl.ascx:

MyUserControl.ascx.cs:

WebForm1.aspx:

WebForm1.aspx.cs:

7 Comments

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related