Home/ Questions/Q 6231275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T09:54:22+00:00

For the first time I am using ajax with asp.net. There for I am

  • 0

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();
        }
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The code won’t work because of small errors.

    Fix those and you will be fine.

    1. You are calling the Page Method from public partial class index : Page when it should be ideally from Default: Page
    2. You are using a submit button, so you should use evt.preventDefault();
    3. You are changing the button’s value, so the method to use is .val() and not .text
    4. 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!

    • 0