从标记中调用codebehind方法并抛出javascript错误

Question

I have a div tag that has a click event and the method I'm trying to call is from the codebehind.

This is my div tag

<div class="DivA" runat="server" id="ThisDiv" onclick="<%ClickMe();%>"></div>

The method is a simple

public void ClickMe()
    {
        Response.Redirect("www.google.ca");
    }

I'm just testing this before I add the real stuff to it. The error that it is throwing is...

JavaScript critical error at line 16, column 49 in http://localhost:24307/DIVPAGE.aspx

SCRIPT1002: Syntax error

this is the line that it is giving me

<div id="ThisDiv" class="DivA" onclick="&lt;%ClickMe();%>"></div>

I have tried changing the

 <%ClickMe();%> 

to

 <%=ClickMe()%>

But that throws the same error. Another thing I don't understand is when you look at the line with the error that it is missing the runat tag and has added other characters to the onclick event.

Thanks

Answer 1

You have a concept problem here, do this, and test it will work:

<asp:LinkButton id="lbClickMe" runat="server" OnClick="ClickMe">
   <div class="DivA" id="ThisDiv">
      The Click Me Button!
   </div>
</asp:LinkButton>

That's it, when runat=server is specified ASP.NET page parser will process the element as server side, so for this elements/controls no server tags in markup are allowed except data binding tags inside control templates. So to call you method you have to put a runat server on a control that haves the Click event, this is the case of the LinkButton, inside of him you can put your div for some specific styling of your UI.

Also not that, if you really want to have the your div behaving like that, there is no problem in complicating what is simple, but in that case please do this instead:

<asp:LinkButton id="lbClickMe" runat="server" OnClick="ClickMe" Visible="False"></asp:LinkButton>
<div class="DivA" id="ThisDiv" onclick="<%= Page.GetPostBackEventReference(lbClickMe) %>"></div>

The GetPostBackEventReference extracts the javascript code necessary to simulate your link button click, but once more is preferable to use directly the link button if you can.

Hope it helps,

Regards.

Answer 2

You can't call server-side C# methods from the DOM like that. You can only call JavaScript functions in an HTMLElement's onclick handler.

It is correct that you can call server-side methods using the template language, however this will be executed at the time of rendering the page; you could, for example, render the results of that server-side method, but you can't use a server-side method as a handler for a client-side event. The onclick event on a DOM element can only call a JavaScript function.

ASP web controls also have an OnClick event attribute, which is probably what's confusing you; this is different from the onclick event attribute on DOM elements (ASP will create additional code for its web controls, eg in case of an asp:button). This works using ViewState and a postback to the server. The onclick event for a DOM element however won't do those things for you.

Adding runat="server" will convert your element to an ASP control, however it will only be an HtmlControl. In the case of a <div> , it will be an HtmlGenericControl which simply writes out the onclick attribute of your element as it is.

Answer 3

The <%= %> syntax emits a string, it doesn't do anything, like a redirect.

You need to do your redirect client-side with this javascript:

  window.location = 'http://my.url.com';

If you need to interact with server side code, you need to do so with AJAX communicating to a web service to get the URL you need, and then performing the redirect described above.

Update

Sorry lads, brain freeze.

Yes, indeed, you can inject a string that will be evaluated as a click handler, but the handler must be a javascript function, not a server-side one! Once the page is rendered, it can no longer interact with the server save for communicating with a web service (or if we want to get technical, web sockets as well).