Umbraco - load content with Ajax

Question

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

Anyway, 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

Answer 1

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>

Answer 2

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;
    });

Answer 3

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");
            }
            });
 })