Returning Json instead of XML with Umbraco Base

Question

I have a .NET method that adds a new member to my DB. It does this through an AJAX request. I have this working correctly, however I am having problems returning the correct response message so I can print the correct messages to the user.

My method at the moment looks like this:

    public static string MemberRegister(int process)
    {

        //here we find form values posted to the current page
        HttpRequest post = HttpContext.Current.Request;

        //get values from ajax URL
        var name = post["name"];
        var email = post["email"];
        var username = post["username"];
        var password = post["password"];

        //check if email exists
        if (Member.GetMemberFromEmail(email) == null)
        {

            MemberType userMemberType = new MemberType(1111); //id of membertype 'demo'
            Member newMember = Member.MakeNew(name, userMemberType, new umbraco.BusinessLogic.User(0));

            newMember.AddGroup(MemberGroup.GetByName("Active").Id);
            newMember.Email = email;
            newMember.Password = password;
            newMember.LoginName = username;

            newMember.Save();

            return "success";
        }
        else
        {
            return "emailError";
        }        

    }

My Ajax code looks like:

        // submit
    $registerForm.submit(function() {

            $loader.show();

            jQuery.ajax({
                url: "/processform.aspx",
                type: "POST",
                data: $(this).serialize()

            }).complete(function( response ) {

            alert(response.responseText);

                if( response.responseText === "success" ) {
                    $registerSuccess.fadeIn(); 
                } elseif( response.responseText === "emailError" ) {
                    $registerEmailError.fadeIn(); 
                } else {
                    $registerError.slideDown();                        
                }

                $loader.hide();

            });



            return false;

    });

For example if the member all ready exists it returns the reponse:

<value>emailError</value> 

I just want it to return emailError not the value tags as well. How do I do this?

Fiddler (Raw):

 HTTP/1.1 200 OK
 Content-Type: text/xml; charset=utf-8
 Vary: Accept-Encoding
 Server: Microsoft-IIS/7.5
 X-Powered-By: ASP.NET
 Date: Sun, 25 Mar 2012 20:59:54 GMT
 Content-Length: 25

 <value>emailError</value>


    POST http://domain.com/base/Forms/MemberRegister/process.aspx HTTP/1.1
    Host: domain.com
    Connection: keep-alive
    Content-Length: 125
    Origin: http://domain.com
    X-Requested-With: XMLHttpRequest
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
    Content-Type: application/json; charset=UTF-8
    Accept: application/json, text/javascript, */*; q=0.01
    Referer: http://domain/register.aspx
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
    Cookie: ASP.NET_SessionId=ys4mmhsn2mpqcpja1iyjg04m; UMB_UPDCHK=1; __utma=256732567.15732944.1331581910.1332617890.1332627641.11; __utmc=256732567; __utmz=256732567.1331581910.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); UMB_UCONTEXT=12621b40-16fe-4422-a027-cf4fa68fe03d; __utma=176230262.1311679778.1332368941.1332694687.1332708163.12; __utmb=176230262.3.10.1332708163; __utmc=176230262; __utmz=176230262.1332368941.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

    __VIEWSTATE=%2FwEPDwUENTM4MWRkEytUM47m6NUA6dpfOudOh9t51j6okfG%2BQhu4Em%2B26KU%3D&name=ppp&email=ppp&username=ppp&username=ppp

Thanks Robert

Answer 1

You might need to decorate the method to return Json

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public static string MemberRegister(int process)


complete(function( response ) {
   if (response.d == "success") {
     //
    }
}

edit

 jQuery.ajax({
                url: "/processform.aspx",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: $(this).serialize()

            })..

Answer 2

Finally figured it out!

I needed to add "returnXml = false" to one of my class calls.

Answer 3

This site is amazing for helping with ASP.NET jQuery Ajax calls, this post in particular

Adrian Iftode is correct with his answer, but you don't need to set a response format on the server. If you ask for JSON the server will automatically encode to that. This is handy if you have multiple services calling the webservices and you need to encode differently for them.

$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "WebService.asmx/WebMethodName",
  data: "{}",
  dataType: "json"
});

I also found this post helpful when I started to do this. It gives some code that moves all the $.ajax calls into one place.

// *** Service Calling Proxy Class
function serviceProxy(serviceUrl){
var _I = this;    this.serviceUrl = serviceUrl;     
// *** Call a wrapped object
    this.invoke = function(method,data,callback,error,bare)
    {
        // *** Convert input data into JSON - REQUIRES Json2.js
        var json = JSON2.stringify(data);
        // *** The service endpoint URL
        var url = _I.serviceUrl + method;
         $.ajax( {
                     url: url,
                    data: json,
                    type: "POST",
                    processData: false,
                    contentType: "application/json",
                    timeout: 10000,
                    dataType: "text",  // not "json" we'll parse
                    success:
                     function(res)
                     {
                         if (!callback) return;
                         // *** Use json library so we can fix up MS AJAX dates 
                         var result = JSON2.parse(res);
                         // *** Bare message IS result
                        if (bare)
                        { callback(result); return; }
                         // *** Wrapped message contains top level object node
                        // *** strip it off
                        for(var property in result)
                        {
                            callback( result[property] );
                            break;
                        }
                    },
                    error:  function(xhr) {
                        if (!error) return;
                        if (xhr.responseText)
                        {
                            var err = JSON2.parse(xhr.responseText);
                            if (err)
                                error(err);
                             else
                                error( { Message: "Unknown server error." })
                        }
                        return;
                    }
                });
       }} 
    // *** Create a static instance
    var Proxy = new serviceProxy("JsonStockService.svc/");
    // *** Call the webservice
    Proxy.invoke("GetStockQuote",{ symbol: symbol },function(result){...}, onPageError);

Answer 4

Here's a good example of how to return a JSON object with Umbraco Base:

/* Be sure to add References to:
 * 
 * umbraco.dll
 * System.Web.dll
 * System.Web.Extensions.dll
 */

using System.Web;
using System.Web.Script.Serialization;

using umbraco.presentation.umbracobase;

namespace CoB.Umb.Base.Example
{
    [RestExtension("Example")]
    public class Example
    {
        [RestExtensionMethod(returnXml = false, allowAll = true)]
        public static void Get()
        {
            string json = "";

            var person = new
            {
                firstName = "John",
                lastName = "Doe"
            };

            json = new JavaScriptSerializer().Serialize(person);

            HttpContext.Current.Response.ContentType = "application/json";
            HttpContext.Current.Response.Write(json);
        }
    }
}

And the javascript:

$.getJSON('/base/Example/Get', function (data) {
    alert("Hey, " + data.firstName + " " + data.lastName);
});