Jquery with ajax using asp.net_问答_开发者_运维开发者技术经验分享

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

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!

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.

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."/>

Jquery with ajax using asp.net

精彩评论

关注公众号

热门标签

图文推荐

Jquery with ajax using asp.net

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：