1

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.

1 Answer 1

1

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);
    }
    });
2
  • could you please tell what should be the data: and content type: in ajax code? as i am unable to run the code successfully Aug 20, 2016 at 10:50
  • Why do you use post and not get; I do not see any parameters? Data is the java script object which contains the query parameters, content type is depending on the server configuration. Most common contentType: "application/json; charset=utf-8". You should inspect the request and response headers in browser. Aug 20, 2016 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.