Call codebehind function in jquery

Question

I am trying to do a very simple task. Not sure what I am doing wrong. I need to pass some values to code behind method, do some calculations there and then return the result. I started with a test method. There are many examples on web. But nothing working for me.

Please see my default page code below:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

  <script type="text/javascript">

      $(document).ready(function () {
          var loc = window.location.href;
          $("#btnClick").click(function (event) {
              $.ajax({
                  type: 'POST',
                  url: loc + "/GetMessage",
                  data: "{}",
                  contentType: "application/json; charset=utf-8"

               })
               .success(function (response) {
                    alert(response.d);

                })
                .error(function (response) {
                    alert(response.d);
                });
           });
      });

  </script>

   <input id="btnClick" type="button" value="button" />


</asp:Content>

The jquery has been referenced in master page:

<script src="Scripts/jquery-2.1.0.js"></script>
<script src="Scripts/jquery-2.1.0.min.js"></script>

codebehind:

    [WebMethod]
    public static string GetMessage()
    {
        return "test";
    }

I do get "Undefined" error. When I change the .success and .error function like below

           .success(function () {
                alert("S");

            })
            .error(function () {
                alert("E");
            });

It shows "S". My understanding is that it finds the code behind method. But the 'response' is undefined. Does it mean the code behind method is not returning the data in json format?

Why are you loading jQuery twice? Use either jquery-2.1.0.js or jquery-2.1.0.min.js. I would recommend .min version — Satpal
– Satpal, Commented Apr 28, 2014 at 11:49
@Satpal Removed one reference, does not make any difference. — Anup
– Anup, Commented Apr 28, 2014 at 12:30
Check your ScriptManager. Set the "EnablePageMethods" property to true. Also, try setting return "test" to return "{\"test\":\"test\"}"; — BobbyDazzler
– BobbyDazzler, Commented Apr 28, 2014 at 12:31

Anup · Accepted Answer · 2014-04-28 17:20:20Z

1

I have finally resolved the issue by commenting out the code in App_Start. Murali's suggestion help me to find out the actual issue. The exception was 'authentication failed'. //settings.AutoRedirectMode = RedirectMode.Permanent;

edited Apr 28, 2014 at 17:20

answered Apr 28, 2014 at 17:13

Anup

1255 silver badges16 bronze badges

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

Comments

Mehmood · Accepted Answer · 2014-04-28 11:48:24Z

0

Please check this one.

       .success(function (data) {
            alert(data);

        })

answered Apr 28, 2014 at 11:48

Mehmood

9315 silver badges18 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2014-04-28 11:49:48Z

0

First use only a single version(minified or unminified) of jquery and use dataType:'json' like,

$("#btnClick").click(function (event) {
    $.ajax({
        type: 'POST',
        url: loc + "/GetMessage",
        dataType: 'json', // for json data, which is parsed
        success:function (response) {//combining success and error callback in ajax
            console.log(response);
        },
        error:function (response) {
            console.log(response);
        }
   });
});

answered Apr 28, 2014 at 11:49

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

3 Comments

Anup Over a year ago

I am getting the same Error: [object Object].

Rohan Kumar Over a year ago

This is because you are not responding your data as json, its simply a string, change this return "test"; to return '{"d":"test"}';

Anup Over a year ago

This will not run as valid c# code.I tried "{\"d\":\"test\"}"; All the examples I have seen on the web is exactly like this. Is there any major changes in recent JQuery versions?

Murali Murugesan · Accepted Answer · 2014-04-28 13:32:50Z

0

Try removing .d and check with console

.success(function (response) {
  console.log(response); //  in firefox/chrome
  alert(response);

})

Check the firebug console for the JSON output. Below is sample screenshot

enter image description here

edited Apr 28, 2014 at 13:32

answered Apr 28, 2014 at 11:48

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

8 Comments

Anup Over a year ago

Still throwing exception. Only difference in format. It now shows [Object] [Object].

Murali Murugesan Over a year ago

@Anup, check the firefox/chrome network/console and see what is the response from server

Murali Murugesan Over a year ago

@Anup, I was asking you to check the response data , i.e json output. Not the headers

Murali Murugesan Over a year ago

@Anup, check the updated answer for firebug console help

Anup Over a year ago

I cannot see jason in firebug. I have contentType: "application/json; in request. Could you please advise?

|

alpham8 · Accepted Answer · 2014-04-28 13:46:04Z

0

You´ll need to remove the attribute runat="server" in the following line:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

Because that says, that the javascript code runs at the server and not at the client/browser, as excepted. Changing this should fix all your problems.

answered Apr 28, 2014 at 13:46

alpham8

1,3722 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Call codebehind function in jquery

5 Answers 5

Comments

Comments

3 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related