Using ajax with surface controllers? (along with general surface controller questions)

Questions
1

Hi guys,

At the moment I'm trying to do something similar to Sebastiaan with his tutorial: http://cultiv.nl/blog/2011/11/15/creating-an-umbraco-5-package/

The only difference is I'm trying to use ajax to post back my form data using the following:

...
$.ajax({
  url: '/ContactSurface/SubmitForm',
  type: "POST",
  data: JSON.stringify(contactVM),
  contentType: "application/json; charset=utf-8",
  success: function (result) {
    $('#result').empty();
    $('#result').html(result);
  },
  error: function () {
    $('#result').empty();
    $('#result').html("<p>There was a problem submitting your message. Please try again.</p>");
  }
});
...

Within my surface controller I then have the following function:

[HttpPost]
public PartialViewResult SubmitForm(ContactViewModel contactVM)
{
  if (!ModelState.IsValid)
  {
    return PartialView("GetForm", contactVM);
  }

var contact = new Contact

{

Name = contactVM.Name,

Email = contactVM.Email,

Message = contactVM.Message

};


// Do whatever with new contact class


return PartialView(“Thankyou”);

}

Now before I tried to add this as a surface controller in umbraco, I did a standalone MVC3 project to test all the code and make sure it worked but now I'm trying to add it as a plugin, things aren't working.

Before I proceed I'll mention that I'm still not entirely sure how the whole surface controller thing works with Umbraco. I've read Shannon's tutorial regarding surface controllers and while I understand how they work, I don't understand how it ties in with the CMS.

From what I can see, it looks as though I have to add each function in my surface controller as a macro? In this test surface controller I've written I have two functions: one called GetForm() which returns a default view and the above SubmitForm() which is supposed to handle the posted form data. The code for the former is below:

[ChildActionOnly]
public PartialViewResult GetForm()
{
  return PartialView("GetForm", new ContactViewModel());
}

What I've then done is to add my 'GetForm' and 'Thankyou' partial views to the Settings/Partials folder. I've then called the macro using: @Umbraco.RenderMacro("getForm") on my template.

This /seems/ to have worked as the page is successfully calling my GetForm function and returning the view specified. However when I fill in this form and post it back, nothing happens. I think I'm posting back to the correct page using /ContactSurface/SubmitForm in the 'post' field of my first code segment but I'm not sure.

I'm also unsure as to whether I have to register this function as a macro like I did with the GetForm() function. I realised I couldn't get the SubmitForm function to show in the macro dropdown unless I gave it the [ChildAction] attribute so I'm not really sure what I have to do here? What's the difference between a 'ChildAction' macro type and a 'Partial View' macro type?

One final question, what are macro partials? I can't seem to find any documentation on them and have no idea how they fit in with everything. On top of this there's a 'Partials' folder in the settings tab but I'm guessing this is just for standard partial views?

I realise this is a big post and appreciate any help that people can offer! I'm having a hard time understanding all these new terms :-)

Thanks.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/29553-using-ajax-with-surface-controllers-along-with-general-surface-controller-questions