add mouseclick event to panel

Nurlan picture Nurlan · Oct 5, 2012 · Viewed 8.5k times · Source

I want to assign mouseclick event to asp.net panel:

protected void Page_Load(object sender, EventArgs e)
{
    Panel p = new Panel();
    p.Click += new EventHandler(b_Click);//but, this doesn't compiles correctly
}
protected void b_Click(object sender, EventArgs e) 
{
     //C#code
}

Is there any way to add click event to panel?

Answer

Yiğit Yener picture Yiğit Yener · Oct 5, 2012

Here is what you can do to make your panel clickable and handle the event at server side.

Place panel in your web form

<asp:Panel runat="server" ClientIDMode="Static" ID="clickMe">
    Click here
</asp:Panel>

Add jQuery script library to your page.

<script src="http://code.jquery.com/jquery.min.js" language="javascript"
        type="text/javascript"></script>

Define the following client side event handler

$(document).ready(function() {
    $("#clickMe").click(function () {
        __doPostBack('clickMe', '');
    });
});

Handle the event at server side.

protected void Page_PreRender(object sender, EventArgs e)
{
    this.Page.ClientScript.GetPostBackEventReference(clickMe, "");
}

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Form["__EVENTTARGET"] == "clickMe")
    {
        ClickMeOnClick();
    }
}

The code in PreRender event handler is for asp.net framework to render __doPostBack function at cilent sides. If your page includes a control that causes an auto postback you don't need this code.