CODEWITHSUNDEEP
c#jqueryhtmlajax
MarsOne
MarsOne

Reputation: 2186

Function does not work properly on ajax call

I have 2 dnn modules. Lets call them A & B. i have a jQuery Ajax function that runs on B on $(document).ready().

The AJAX calls the page_load event in module A. where i have the following code on page_load

 if (Request.Headers["X-OFFICIAL-REQUEST-MINE"] == "TRUE")
   {
      AjaxWrapper(Request.Headers["X-ItemString"].ToString());
   }

The AjaxWrapper has the following code

    protected void AjaxWrapper(string Inputstring)
    {
        Label testLbl = new Label();
        testLbl.Text = Inputstring;
        DynamicPlaceHolder.Controls.Add(testLbl);   


        Inputstring = " This c# call from ajax works!!!";
        Response.Clear();
        Response.ContentType = "text";
        byte[] b = Response.ContentEncoding.GetBytes(Inputstring);
        Response.AddHeader("Content-Length", b.Length.ToString());
        Response.Write(Inputstring);
        Response.Flush();
        Response.Close();
        Response.End();
        return;
    }

The first 3 lines of AjaxWrapper dont work and the label isnt displayed on screen but the ajax sucess fucntion works. it is an alert to show me the string "This c# call from ajax works".

Following is the ajax call from B.

jQuery.ajax({
            type: "POST",
            async: "false",
            url: location.href,
            contentType: "application/json; charset=utf-8",
            data: (jsonData),
            dataType: "text",
            success: function (data, textStatus, jqXHR) {
               alert("Response" + jqXHR.responseText);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Error: " + textStatus + ", " + errorThrown);
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-ItemString", $Pids);
                xhr.setRequestHeader("X-OFFICIAL-REQUEST-MINE", "TRUE"); // Used to ID as a AJAX Request
            },
            complete: function (XMLHttpRequest, textStatus) {
            }
        });

Upvotes: 0

Views: 183

Answers (1)

Mark Rabjohn
Mark Rabjohn

Reputation: 1723

Asp.Net works by converting the control tree to HTML - in a way creating an HTML page.

When you call into the server via AJAX, you need to be aware that your Page_Load is operating on a control tree on the server, which is never ever passed to the client.

Reiterating, code running on the server can't directly manipulate the DOM in the browser.

If you use jQuery directly, you have to think in terms of passing data or messages from server to client. Whether the message be HTML, Text or JSon, you then have to process that message in Javascript to alter the layout of your page accordingly.

ASP.Net is a really awful environment to do this kind of thing. Be aware that if you expect to be able to use jQuery, and also expect Postbacks to reflect changes, it's bloody difficult unless you know what you're doing.

If you're just starting on your project, check out MVC - jQuery makes a lot more sense in MVC and there are fewer gotchas.

Upvotes: 2

Related Questions