Hi Robin,

is it a partial view created from within the backoffice or is it called from a custom Surface Controller?

/Michaël

It's a partial view created from within the backoffice. The javascript is (currently) directly in a template. I could, of course, display the PV with render, but I want it to display on a mouse click, after the user has made some filtering selections.

I've tried…

url: "/giftGenerator",

… but, when I click the button I get 404 not found. When I try this…

url: @Html.Partial("giftGenerator")

… I get (when I inspect the javascript code that's rendered) the content of 'giftGenerator'… which, as I'm testing, is currently just <h2>Foobar</h2>, so what I get is…

url: <h2>Foobar</h2>

By the way, not all the replies I've had to this query are showing up here in the forum: there was a reply from Dennis Adolfi which never appeared, and neither did the latest comment from Michael :(

Can you try with:

url: @Url.Partial("giftGenerator")

That will give you the url to the partial view.

/Michaël

Ah, that's what I meant to put in – @Html was a typo :(

However, when I do this…

url: @Url.Partial("giftGenerator")

… I get 'System.Web.Mvc.UrlHelper' does not contain a definition for 'Partial' and the best extension method overload 'System.Web.Mvc.Html.PartialExtensions.Partial(System.Web.Mvc.HtmlHelper, string)' has some invalid arguments'

You could however create a new controller that inherits from SurfaceController with one Action method which renders the partial view.

Then you can use the @Url.Action() to call this and get the url to load into your ajax call.

/Michaël

When I use…

url: @Url.Action('giftGenerator')

I get this in the rendered javascript…

url: '/umbraco/RenderMvc/giftGenerator'

When it comes to Surface Controllers, I'm afraid I've no idea how to create them or where to save them: everything I've looked at online is slightly different :(

Edit: My previous post was daft, clearly not had enough coffee today. :)

Could you give the following a try:

Within your project add a folder, Controllers, add a class named 'PartialViewController' with the following:

public class PartialViewController : SurfaceController
    {
        public ActionResult Index(string name)
        { 
            return PartialView(name);
        }
    }

Then in your front end:

$(function() {
  $('.js-button').on('click', function() {
      $.ajax({
          url: '@Url.Action("Index", "PartialView", new { name = "GiftGenerator" })',
          type: 'GET',
          cache: false,
          success: function(data) {
              $('#destination').html(data);
          }
      });
  });
});

Please see my updated post above, my previous one was daft and I clearly haven't had enough coffee today.

Thanks so much for your time, everyone.

David, the controller is at...

[siteroot]\Controllers\PartialViewController.cs

and contains exactly...

public class PartialViewController : SurfaceController {
    public ActionResult Index(string name) {
        return PartialView(name);
    }
}

Then, the ajax part of the jQuery is...

$.ajax({
    url: '@Url.Action("Index","PartialView", new{ name = "giftGenerator" })',
    type: 'GET',
    cache: false,
    success: function(data) {
        $('#destination').html(data);
    }
});

BUT, the url renders (when I inspect the generated javascript) as...

url: ''

I've got a feeling that my controller must be either formatted incorrectly, or in the wrong place :(

I tried moving PartialViewController.cs from /Controllers to /App_Code and am now getting a server error:

error CS0246: The type or namespace name 'SurfaceController' could not be found (are you missing a using directive or an assembly reference?)

... and, digging deeper...

error CS0246: The type or namespace name 'ActionResult' could not be found (are you missing a using directive or an assembly reference?)

Then I tried adding this at the top...

using System.Web.Mvc;
using Umbraco.Web.Mvc;

... and wrapping the class inside...

namespace Controllers {
    ..
}

The page is now rendering, and the javascript renders as...

url: '/umbraco/Surface/PartialView?name=giftGenerator'

But clicking gives a 404 (Not Found)

What is this URL (the rendered javascript in view source)... it obviously doesn't work...

$.ajax({
  url: '/umbraco/Surface/PartialView?name=giftGenerator',<<<<
  type: 'GET',
  cache: false,
  success: function(data) {
    $('#destination').html(data);
  }
});

... and gives a 404 when called :(

Change your controller name to from PartialViewController to PartialViewSurfaceController, and your url to '/umbraco/Surface/PartialViewSurface;

Also, you can install the RouteDebugger, and turn it on (from Nuget) to see what routes are really defined to perhaps determine what your url needs to be.

Unfortunately, I've already changed it to PartialViewSurfaceController with no difference. The URL mentioned (now with the PartialViewSurface name) is generated by Umbraco: it's what is actually rendered in the javascript: the 'original' value set within the template, inside the jQuery ajax call, is...

url: '@Url.Action("Index","PartialViewSurface", new{ name = "giftGenerator" })', 

I don't use or, therefore, know Nuget: the installation is entirely on a Windows cloud server, and there's no visual studio etc.

This works in my implementation

  public class AuthSurfaceController : SurfaceController  {
    public ActionResult RenderRegisterPage(int ActualPageId)
    {
         var model = new RegisterViewModel();
         return PartialView("registerpage", model);     // In the views/partials folder

Then in the page you want the partial rendered...

 @Html.Action("RenderRegisterPage", "AuthSurface", new { ActualPageId = ActualPageID = Model.Content.Id  });

The name space of the controller doesn't matter. However, in my case, it is in a separate assembly and not in the App_Code folder.

What's the model for? What I'm trying to do is call a Partial View from within an existing template. The page using the template has several children ('gifts'), each of which have several properties such as an image, description, price, gender, etc). Depending on the selections the user makes I want to call the Partial view via jQuery Ajax, passing through the relevant options that the user has chosen (price limit, gender, etc) which will then cause the Partial View to display just those child nodes that match.

is working on a reply...