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 : Pagewhen it should be ideally fromDefault: 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."/>
加载中,请稍侯......
精彩评论