ajax client-server communication
Question
I asked a question previously on this site about ajax client-server communication.
I got a lot of help. but still cant figure it out, so re-asking the question.
I m trying to send the value stored in the variable 'mem_ID' from my javascript page...Default.aspx to my server side - Default.aspx.cs page.
Javascript:-
<asp:Button ID="Button6" runat="server" BackColor="Silver"
onclientclick="store_memID()" style="margin-left: 20px" Text="Submit"
Width="102px" Font-Bold="True" Height="28px" />
<script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"> </script>
<script type = "text/javascript">
// Function to caputure client-input- Member_ID.
function store_memID() {
// 'TextBox3' is the server side ID. To get the client side ID we do the following:-
mem_ID = document.getElementById('<%=TextBox3.ClientID%>').value;
//return confirm('TimeLine is displayed for: ' + mem_ID);
ajax();
}
function ajax(){
$.ajax({
url: 'Default.aspx/MyMethod',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ memID: mem_ID }),
success: function (result) {
alert(result.d);
}
});
}
</script>
Server side:-
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
// Defining a page method.
[WebMethod]
public static string MyMethod(string mem_ID)
{
return string.Format("Thanks for calling me with id: " + mem_ID);
}
` more code here`....
However, I still don't get any reply in return from the server. I am expecting the return "Thanks for calling me with ID: ..... " from the server side. Any ideas?
I added a breakpoint in MyMethod, on the response line, on the server side, and there was no hit. so I am assuming that this line is not even being traversed.
I m new to Asp.net and Ajax. and need help on this topic.
4 answers
solution1
1 2013-02-05 10:27:56
Here's a full example I wrote for you to get started:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<script type="text/c#" runat="server">
[WebMethod]
public static string MyMethod(string memId)
{
return string.Format("Thanks for calling me with id: " + memId);
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="MyButton" runat="server" Text="Submit" />
<asp:TextBox ID="MyTextBox" runat="server" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$('#<%= MyButton.ClientID %>').click(function () {
var memId = $('#<%= MyTextBox.ClientID %>').val();
$.ajax({
url: '<%= ResolveUrl("~/Default.aspx/MyMethod") %>',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ memId: memId }),
success: function (result) {
alert(result.d);
}
});
return false;
});
</script>
</body>
</html>
For the purpose of the demonstration it's a self contained WebForm but you could of course separate the code behind from the markup.
solution2
1 ACCPTED 2013-02-05 11:47:33
<form id="form1" runat="server">
<div>
<asp:Button ID="Button6" runat="server" BackColor="Silver"
onclientclick="store_memID()" style="margin-left: 20px" Text="Submit"
Width="102px" Font-Bold="True" Height="28px" />
<script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"> </script>
<script type = "text/javascript">
// Function to caputure client-input- Member_ID.
function store_memID() {
var mem_ID;
// 'TextBox3' is the server side ID. To get the client side ID we do the following:-
mem_ID = document.getElementById('<%=TextBox3.ClientID%>').value;
//return confirm('TimeLine is displayed for: ' + mem_ID);
ajax(mem_ID);
}
function ajax(mem_ID) {
alert(mem_ID);
$.ajax({
url: 'Default.aspx/MyMethod',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ memID: mem_ID }),
success: function (result) {
alert(result.d);
}
});
}
</script>
<asp:TextBox id="TextBox3" runat="server"></asp:TextBox>
</div>
</form>
In Your Code Behind
[WebMethod]
public static string MyMethod(string memID)
{
return string.Format("Thanks for calling me with id: " + memID);
}
The method u have done all was right execpt,
The data passing from ajax should match the string Element declared in the Web-method.
solution3
0 2013-02-04 23:27:14
You are passing the value as a JSON Object, its important to specified the dataType for the request and specified the returning format from the server.
function ajax(){
$.ajax({
url: 'default.aspx/MyMethod',
type: 'POST',
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ memID: mem_ID }),
success: function (result) {
alert(result.d);
}
});
}
// Defining a page method.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string MyMethod(string mem_ID)
{
return string.Format("Thanks for calling me with id: " + mem_ID);
}
Then you need to add a ScriptManager and UpdatePanel to Triggers the Ajax Call. The ScriptManager provides the funcionality to call WebMethods from Aspx pages. Use this with the above code i provided.
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"/>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button6" runat="server" BackColor="Silver" OnClientClick="store_memID()"
Style="margin-left: 20px" Text="Submit" Width="102px" Font-Bold="True" Height="28px" />
<asp:TextBox ID="TextBox3" runat="server">Testing</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
solution4
0 2013-02-07 07:59:18
Normally I create an Ajax.aspx file that handle most of the client-server ajax interaction the same way it's done in the example below. Then this page loads specific controls. I sometimes add a function parameter to the ajax request to access specific methods in the controls or directly on the Ajax.aspx page.
Example:
Simple ASP.net ajax framework
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.