Sumi Sharma Sumi Sharma - 3 months ago 29
ASP.NET (C#) Question

Calling WebMethod from ajax, control not going inside webmethod

I am trying to call a codebehind method, the success: function() of jquery part gets executed, but the control doesn't seem to go inside the codebehind method being called.
aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {

//$("#Button1").click();

$.ajax({
type: "POST",
url: '<%=ResolveUrl("WebForm1.aspx/Method1")%>',
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
},
success: function (result) {
$("#test").html("success");
}
});
})

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" EnablePageMethods="True" />

<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="test">initial</div>

</form>





aspx.cs code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication6
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static void Method1()
{
WebForm1 w = new WebForm1();
w.Label1.Text = "code behind";
}

}

}


Output:

Label
success


The output make me conclude that success: function() of jquery gets executed (as $("#test").html("success"); gets executed it seems), but Label1 text is still Label, code behind method doesn't seem to be executed.
Why is it happening? Your help is appreciated.

Answer

The problem is client side vs server side. Which you have to understand when using java script Ajax request with ASP.

First of all JavaScript code is running on the client machine, while ASP.net is running server side.

When the ajax request is executed with js, it expects some result from the server which is normally json, xml, memory stream. You take this information and do something with it on the client side.

When you execute something like:w.Label1.Text = "code behind"; on the server side in an web method request won't work, because you don't do a full page refresh where the server generates the value for the asp.net control.

For your code to work you should write something like this

public class Result
 {
     public string State{get;set;}
     public string Message{get;set;}
 }

public static Result Method1()
 {
     return new Result{State="Success",Message="code behind" };
 }

JS:

$.ajax({
    type: "POST",
    url: '<%=ResolveUrl("WebForm1.aspx/Method1")%>',
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
    },
    success: function (result) {
        $("#test").html(result.State);
        $("#Label1").html(result.Message);
    }
    });