Jquery with ajax using asp.net

Question

For the first time I am using ajax with asp.net. There for I am trying to learn myself some Jquery. I have created an aspx file that contains a button and when this is clicked it's going to write down the current date. Currently nothing happens when I click the button. I can see the Jscripts are runnig by using firebug but they don't trigger my alerts. Any ideas?

Code below.

Here's my Jscript:

$(document).ready(function () {

    $("#Result").click(function () {
        alert("Before Ajax");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetDate",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                alert('About to replace content');
                $("#Result").text(msg.d);
            }
        });
    });
});

Here's my aspx file:

<html>
<head>
    <title></title>
    <script src="jquery/JScript1.js" type="text/javascript"></script>
    <script src="jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
      <input id="Result" type="submit" value="Click here for the time."/>
      </form>
</body>
</html>

and Here's my aspx codebehind:

public partial class index : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetDate()
        {
            return DateTime.Now.ToString();
        }
    }

Example used: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Here's the working version:

Jscript:

$(document).ready(function () {

    $("#Result").click(function () {

        $.ajax({
            type: "POST",
            url: "index.aspx/GetDate",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert('About to replace content');
                $("#Result").val(msg.d);
            }
        });
    });
});

aspx:

<html>
<head>
    <title>Calling a page method with jQuery</title>
    <script src="jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery/JScript1.js" type="text/javascript"></script>
</head>
<body>
    <form runat="server">
    <input id="Result" type="button" value="Click here for the time." />

    </form>
</body>
</html>

codebehind:

 public partial class index : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetDate()
        {

            return DateTime.Now.ToString();
        }
    }

Do you have any errors in FireBug? What does the response of your HTTP POST display? — Curtis
– Curtis, Commented Aug 9, 2011 at 10:16
double check the name of your file which contains static GetDate method, is it Default.aspx of Index.aspx? — Waqas
– Waqas, Commented Aug 9, 2011 at 10:17
You should remove the solution from your question and add it as an answer. — murgatroid99
– murgatroid99, Commented Sep 19, 2011 at 2:07

codeandcloud · Accepted Answer · 2011-08-09 10:44:51Z

3

The code won't work because of small errors.

Fix those and you will be fine.

You are calling the Page Method from public partial class index : Page when it should be ideally from Default: Page
You are using a submit button, so you should use evt.preventDefault();
You are changing the button's value, so the method to use is .val() and not ~~.text~~
Lastly, save yourself from some typing with the new Encosia article.

Sample Code

$(document).ready(function () {

    $("#Result").click(function (evt) {
        evt.preventDefault();

        $.ajax({
            type: "POST",
            url: "Test1.aspx/GetDate",
            data: "{}",
            contentType: "application/json",
            success: function (msg) {
                $("#Result").val(msg.d);
            }
        });

    });

});

Happy Coding!

answered Aug 9, 2011 at 10:44

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

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

Comments

Antony Scott · Accepted Answer · 2011-08-09 10:23:02Z

1

Is your page refreshing when you click the "Result" button. It looks like it's a submit button and will therefore do a postback. That will make it look like nothing is happening. Try changing the button to a normal button.

Also, you're not really returning json from your WebMethod.

answered Aug 9, 2011 at 10:23

Antony Scott

22.1k12 gold badges64 silver badges95 bronze badges

Comments

ipr101 · Accepted Answer · 2011-08-09 10:23:19Z

1

In the article you refer to the author uses a div to trigger the Ajax call -

 <div id="Result">Click here for the time.</div>

You're using a submit button and I think the postback might be scuppering your Ajax request, try and change your button declaration to this -

<input id="Result" type="button" value="Click here for the time."/>

answered Aug 9, 2011 at 10:23

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

3 Comments

Peter Rasmussen Over a year ago

I did this and I am now reaching the "before ajax" part. But I never reach the end. Any ideas? :)

ipr101 Over a year ago

Is your post URL valid - can you browse to 'Default.aspx/GetDate'? Other than that I'd check Firebug to see if you're getting a response back. The fact that you're not seeing the second alert would suggest the ajax post has not been successful. Do you get the second alert if you remove the '$("#Result").text(msg.d);' line?

ipr101 Over a year ago

Also, your code will currently try and update the button text. You'd be better adding a div to the page and get the ajax call to update that.

Collectives™ on Stack Overflow

Jquery with ajax using asp.net

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related