Question

using Visual.Web.Developer.2010.Express;
using SQL.Server.Management.Studios.R2.Express;

What I’m trying to do, is get a button to run some C# when a button is clicked.. Sounds simple, right?.. I’m stuck at this part.

I have a span (Jquery UI button) being created when the user keypress’s in an HTML input. As soon as they click the span, it saves what the user inputed and sends it to the database… Well, not quite yet. I’m building this and I’m stuck at this part.

One would attach the button click via attribute in the span tag, correct?

<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left" onclick="Button1_Click"></span>

C#

protected void Button1_Click(object sender, EventArgs e)
{
    Console.WriteLine("Hello World");
}

Looks pretty simple, right? When I run this in debug, Firebug reads “Button1_Click is not defined”
.
.
.
Give me some insight here please!

My HTML/Javascript code

<script type="text/javascript">
    $(document).ready(function () {

        $('.hexen').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left" onclick="Button1_Click"></span>')// ui icon

    .keypress(function () {
        $(this).next('.saveButton').show();
    }); //adds ui icon

        $('.ui-state-default').hover(
    function () {
        $(this).addClass('ui-state-hover');
    }, function () {
        $(this).removeClass('ui-state-hover');
    }); //ui icon hover

        $('.saveButton').click(function () {
            var id = $(this).prev().attr('id'); //used in the "data" attribute of the ajax call
            var value = $(this).prev().val(); //used in the "data" attribute of the ajax call

            $.ajax({
                type: "POST",
                url: "Default.aspx",
                data: "{Id: " + id + ", Value: " + value + "}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data);
                }
            });
            $(this).hide();
        }); //runs ajax call and removes ui-icon after .saveButton is clicked

    }); //end .ready
</script> 

<input type="text" class="hexen" id="investigate1"/><br />
<input type="text" class="hexen" id="investigate2"/><br />
<input type="text" class="hexen" id="investigate3"/><br />
<input type="text" class="hexen" id="investigate4"/><br />
<input type="text" class="hexen" id="investigate5"/>

Thanks in advance!

Answer 1

Button1_Click is a server side button click handler which you cannot call it from client side using onclick attribute.

onclick will always look for handler or method on the client side JavaScript code.

You have to use Asp.Net button control which will render the necessary method on the page to perform postback to the server.

Once you click on Asp.Net button it will submit the current page to the server with necessary details to asp.net framework so that it will execute the required button click handler.

E.g. You can use LinkButton control like this and specify OnClick property to Button1_Click and OnClientClick property to call any client side javascript method.

<asp:LinkButton Text="Click me!" 
      OnClick="Button1_Click" runat="server" 
      OnClientClick="clientSideJavaScriptFunction()" />