Umbraco - load content with Ajax

I'm new to Umbraco and only started to figure out the ins and outs of it.

Anywa开发者_JAVA百科y, I've figured out on my own the way document types, macros, templates, xslt files work and am now trying to do some other stuff. Namely I need to load a document content using an AJAX call. It's basically a panel with a menu (dynamic, which I figured out how to load) that loads content depending on the menu item selected (the documents loaded with the menu). What I need to figure out is how to get that content using an AJAX call since I don't want to reload the page.

Is this done using Umbraco BASE extensions or am I off in my thinking here? If so, how exactly? Do I just write a class and then stitch together an HTML string in a method?

Thanks for the help

You can use rest methods. For this you have to edit restExtensions.config on the config folder.

Ajax Call

$.ajax({
        type: 'POST',
        url: "/base/AliasName/GetData.aspx",
        data: {

        },
        success:
                    function (data) {
                    }

    });

restExtensions.config

<ext assembly="/DllName" type="Namespace.ClassName" alias="AliasName">
    <permission method="GetData" returnXml="false" allowAll="true" />
  </ext>

Yup this is exactly the scenario that Base is used for.

You can find documentation on using base here:

http://our.umbraco.org/wiki/reference/umbraco-base/simple-base-samples

For the consumption of base via AJAX then JQuery is the answer.

http://api.jquery.com/jQuery.ajax/

Here's a hacked together example (not tested code):

$(document).ready(function ()
{
    $(".buttonListener").click(function ()
    {
        $.ajax(
        {
            url: '/Base/TestAlias/Hello.aspx',
            success: function (data, textStatus, XMLHttpRequest)
            {
                alert(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown)
            {
                alert("Ka pow!");
            }
        });
        return true;
    });

Ajax call using umbraco in MVC

$('#TestClick').on('click',function(){
        $.ajax({
            url: 'umbraco/surface/Home/TestPage',
            type: 'POST',
            data: { id:10001},

            success: function (data) {
                alert(data);
            },
            error: function () {
                alert("error");
            }
            });
 })