Executing Server-Side Methods by Clicking on a DIV

Question

I'm working on an ASP.Net project, with C#.

Usually, when I need to put Buttons that will execute some methods, I will use the ASP Controller (Button) inside a runat="server" form.

But I feel that this really limits the capabilities of my website, because when I used to work with JSP, I used jquery to reach a servlet to execute some codes and return a responseText.

I did not check yet how this is done in ASP.Net, but my question concerns controllers and the famous runat="server".

When I add a runat="server" to any HTML Element, I'm supposed to be able to manipulate this HTML element in C# (Server-Side), and this actually works, I can change the ID, set the InnerText or InnerHtml, but the thing that I can't get, is why can't I execute a method by clicking on this element?

The "onclick" attribute is for JavaScript I think, and OnServerClick doesn't seem to work as well. Is it something wrong with my codes? or this doesn't work at all?

@mdcuesta it's not about codes, it's about a concept, but here you go :
Hello — user1665700, Dec 28 '12 at 12:02
divs with runat attributes doesn't have a serverclick event, you need to handle it using ajax/jquery/javascript. — mdcuesta, Dec 28 '12 at 12:03

score 2 · Answer 1 · answered Dec 28 '12 at 12:01

2

You will have to handle the click in the div using the Jquery and call server-side methods through JQuery

answered Dec 28 '12 at 12:01

Bhushan Firake

9,338
5
44
79

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

You can execute a method from jquery click in server, using __doPostBack javascript function, see this threat for more details How to use __doPostBack()

edited May 23 '17 at 12:27

Community

1
1

answered Dec 28 '12 at 12:04

Alberto León

2,879
2
25
24

speti43 · Accepted Answer · 2012-12-28T13:12:16.340

There are several way to execute server side methods by clicking on a div or anything on your page. The first is mentioned __dopostback, second is handling the click in javascript or with jQuery and calling a function in a handler or a page method in a webservice or a page method in your page behind code. Here is the handler version:

 $("#btn1").click(function() {
    $.ajax({
            url: '/Handler1.ashx?param1=someparam',
            success: function(msg, status, xhr) {
                //doSomething, manipulate your html
            },
            error: function() {  
             //doSomething
            }
        });
 });

I think the second version is better, because you can make a partial postback without any updatepanel, asyncronously. The drawback is, the server side code is separated from your page behind code.

Handler:

public class Handler1: IHttpHandler
{
   public void ProcessRequest(HttpContext context)
   {
      context.Response.ContentType = "application/json";
      var param1= context.Request.QueryString["param1"];
      //param1 value will be "someparam"

      // do something cool like filling a datatable serialize it with newtonsoft jsonconvert

      var dt= new DataTable();
      // fill it
      context.Response.Write(JsonConvert.SerializeObject(dt));
   }
}

If everything is cool, you get the response in the ajax call in the success section, and the parameter called "msg" will be your serialized JSON datatable.

@spetie43, could you update your answer with a small example about how the Handler could look like? Just to know how to use the returned parameters (msg, status, xhr) — user1665700, Dec 28 '12 at 13:00

score 1 · Answer 4 · answered Dec 28 '12 at 12:20

Add this code in your jquery on div onclick and pass DIv id whcih call click

__doPostBack('__Page', DivID);

On page load add this code

if (IsPostBack)
            {
    //you will get id of div which called function
    string eventargs = Request["__EVENTARGUMENT"];

                    if (!string.IsNullOrEmpty(eventargs))
                    {
                       //call your function 
                    }
}

score 1 · Answer 5 · answered Dec 28 '12 at 12:37

Make the div runat="server" and id="divName"

in page_Load event in cs:

if (IsPostBack)
{
if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == "divClick")
{
    //code to run in click event of divName
}
}

divName.Attributes.Add("ondivClick", ClientScript.GetPostBackEventReference(divName, "divClick"));

Hope it helps :)

score -1 · Answer 6 · answered Dec 28 '12 at 12:01

-1

if you are referring to divs with runat="server" attributes, they don't have onserverclick events, that's why it doesn't work

answered Dec 28 '12 at 12:01

mdcuesta

1,739
1
15
17

Executing Server-Side Methods by Clicking on a DIV

6 Answers6

Linked