How to call a non-static method from asp.net code behind using jQuery

Question

Within a web form I have the following jQuery setup to call a method in my code behind file.

 <script src="js/jquery-1.7.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#newBtn").click(function () {
                $.ajax({
                    type: "POST",
                    url: "AJAXCaller.aspx/GetTimer",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false

                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" class="link1" runat="server">Click here</a><br /><br />
    <asp:LinkButton ID="newBtn" runat="server" Text="ASP Link" />
    <asp:Label ID="time_lbl" runat="server" />
    </div>
    </form>
</body>

And within the code behind I have the following:

[WebMethod]
        public void GetTimer()
        {
            time_lbl.Text = DateTime.Now.ToString();
        }

I realize this currently does not work in the current syntax.

I've been able to access the method if I set it to static however I don't want to just return a string or single value. I want to access a method that in turn access a web service to return a collection of data.

I would like to know if it is possible to perform something like this where I can call a method and have it update a field in the UI such as the above method where when called the server side script would to the ui a value for the date field?

Thanks in advance for any suggestions.

You can update an Asp.Net HiddenField with a returned value from a WebMethod, and then you can access it from any other control. — Hanlet Escaño
– Hanlet Escaño, Commented Feb 14, 2012 at 20:21

ShankarSangoli · Accepted Answer · 2012-02-14 20:09:14Z

2

It is not at all possible because you cannot update any field on UI from server side.

Instead of using WebMethod in aspx page use Asp.Net webservices instead to write web methods which can be called using ajax.

ajax method has a success callback where you can grab the service response and then update the UI field by accessing it with appropriate selector.

E.g

    $(function () {
        $("#newBtn").click(function () {
            $.ajax({
                type: "POST",
                url: "AJAXCaller.asmx/GetTimer",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function(data){
                     $("#ClientIdOftime_lbl").text(data);
                }

            });
            return false;
        });
    });

answered Feb 14, 2012 at 20:09

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

4 Comments

rlcrews Over a year ago

@ShankarSngoli Thank you. However what if I want to update more than a field? You mention ui field per my sample however what if I need to reference a method that would return a collection of data in an object that would be bound to a repeater, grid etc?

ShankarSangoli Over a year ago

You can return any data from the server but you cannot just use it as a datasource to repeater. There is no repeater on the client side it is all mark.

rlcrews Over a year ago

Would it not be possible within the method that is called on the server to handle the databinding and updating of the UI? What I want to accomplish is call the method have it perform it's tasks and then allow the method to bind and update the controls (via updatepanel). In essence have a ajax event invoke a postback ?

ShankarSangoli Over a year ago

In that case use ASP.Net UpdatePanel don't mix it up with jQuery ajax.

Collectives™ on Stack Overflow

How to call a non-static method from asp.net code behind using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related