Hello all,
Working with ASP.NET, if we want to fetch the data from server using jQuery than we can use Ajax POST method of jQuery. which allows us to asynchronously interact with server and we can get data in the desired format such as JSON or XML as a response.
To post data using jQuery Ajax POST with .Net, we have following code packet :
In User.aspx Page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="User.aspx.cs" Inherits="_User" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function GetUserDetails() {
$.ajax({
type: "POST",
url: "User.aspx/GetUserDetails",
data: '{id: "' + $("#<%=txtUserId.ClientID%>")[0].value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
alert(response.d);
},
failure: function(response) {
alert(response.d);
}
});
}
</script>
</head>
<body style = "font-family:Arial; font-size:10pt">
<form id="form1" runat="server">
<div>
Your Name :
<asp:TextBox ID="txtUserId" runat="server"></asp:TextBox>
<input id="btnUserDetails" type="button" value="Show User Details" onclick ="GetUserDetails()" />
</div>
</form>
</body>
</html>
In The User.aspx.cs we have
using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
public partial class _User: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string GetUserDetails(string id)
{
return "For given id :" + id + Environment.NewLine + "The User Name is Gaurav";
}
}
Note: We have to include the jQuery file in our "User.aspx" page, like so:
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
This allows us to use jQuery POST method in our aspx page.
0 Comment(s)