pulling child node content via ajax or some other method - Using Umbraco 7

Phillip Turner 98 posts 412 karma points

Mar 02, 2016 @ 17:22

Pulling child node content via ajax (Or some other method)

Using Umbraco 7

Umbraco 7

Hi there.

So I have been developing for Umbraco for a little while now but have never really got too complicated in design. I am about to switch that up but need a little advice.

The new site I am developing with have many dynamic areas where there will be a lookup on child nodes and I need to know the best way to implement this.

Example:

My Tree may look something like this:

Locations > County > Regions > Offices

I would like to be able to select, say, New York (Region) and pull all the Offices that have a property value of NY. I can do this all day using razor, but the caveat is that I would like to do this via AJAX or another method as not to invoke a page refresh as this information will be populated into a modal display or panel of some sort.

How would this be best implemented? Jquery / JSON? Surface controller?

Any guidance would be much appreciated.

Thanks in advance.

Phill

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 03, 2016 @ 09:35

I would do a SurfaceController with a method that returns a JsonResult set, preferally with a viewmodel so that i don´t have to fetch so much data.

The controller:

public class OfficeController : SurfaceController
    {
        public JsonResult GetChildrenAsJson(int id)
        {
            var node = new Node(id);
            var json = new List<JsonViewModel>();

            foreach (var child in node.ChildrenAsList)
            {
                json.Add(new JsonViewModel()
                         {
                             Name = child.Name,
                             SomeProperty = child.GetProperty("someProperty").Value
                         });
            }

            return Json(json, JsonRequestBehavior.AllowGet);
        }
    }

    public class JsonViewModel
    {
        public string Name { get; set; }
        public string SomeProperty { get; set; }
    }

The ajax call:

$.ajax({
                url: '@Url.Action("GetChildrenAsJson", "Office")',
                type: 'GET',
                data: { 'id': 1053 },
                datatype: 'json',
                success: function(json) {
                    alert(json);
                }
            });

The Json result:

[{"Name":"Child 1","SomeProperty":"I am child 1"},{"Name":"Child 2","SomeProperty":"I am child 2"}]

Hope it helped!

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 12, 2016 @ 14:05

Did this help Philip? Let me know if i can be of anymore help.

Copy Link

Phillip Turner 98 posts 412 karma points

Mar 28, 2016 @ 17:26

Just about to try and implement it now. I will keep you posted!

Many thanks

Copy Link

Phillip Turner 98 posts 412 karma points

Mar 28, 2016 @ 18:11

Just a quick question. I changed how I pull the data. All locations use the same DocumentType and have a property called "ServiceRegion". This property will contain a space delimited list of states. Example:

"GA AL NY KS VA"

So what I would like to do now is just query the ServiceRegion for the selected state.

Does this look close?

foreach (var child in node.ChildrenAsList)
        {
            if (child.GetProperty("ServiceRegion").Value.Contains("GA")
            {
                json.Add(new JsonViewModel()
                {
                    Name = child.Name,
                    SomeProperty = child.GetProperty("someProperty").Value
                });
            }
        }

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 28, 2016 @ 20:36

Yeah it looks like it could work. Have you tried it out yet?

Copy Link

Phillip Turner 98 posts 412 karma points

Mar 28, 2016 @ 20:43

This is what I ended up doing:

    public class OfficeLocationController : SurfaceController
{
    public JsonResult GetOfficeLocations(int id, string st)
    {
        var node = new Node(id);
        var json = new List<JsonViewModel>();
        JsonViewModel jvm;

        foreach (var child in node.ChildrenAsList)
        {
            if (child.GetProperty("serviceRegion").Value.Contains(st) ||
                child.GetProperty("serviceRegion").Value.Contains("US"))
            {
                jvm = new JsonViewModel();
                jvm.AddressLine1 = NullCheck(child.GetProperty("addressLine1"));
                jvm.AddressLine2 = NullCheck(child.GetProperty("addressLine2"));
                jvm.City = NullCheck(child.GetProperty("city"));
                jvm.State = NullCheck(child.GetProperty("state"));
                jvm.PostalCode = NullCheck(child.GetProperty("postalCode"));
                jvm.PhoneNumber1 = NullCheck(child.GetProperty("phoneNumber1"));
                jvm.PhoneNumber2 = NullCheck(child.GetProperty("phoneNumber2"));
                jvm.FaxNumber = NullCheck(child.GetProperty("faxNumber"));
                jvm.MiscUrlLink = NullCheck(child.GetProperty("miscUrlLink"));
                jvm.ManagerTitle = NullCheck(child.GetProperty("managerTitle"));
                jvm.ManagerName = NullCheck(child.GetProperty("managerName"));
                jvm.LocationNotes = NullCheck(child.GetProperty("locationNotes"));
                jvm.MapCoords = NullCheck(child.GetProperty("mapCoordinates"));
                json.Add(jvm);
            }
        }

        return Json(json, JsonRequestBehavior.AllowGet);
    }

    private string NullCheck(object obj)
    {
        return (obj == null ? "" : obj.ToString());
    }
}

public class JsonViewModel
{
    public String ServiceRegion { get; set; }
    public String AddressLine1 { get; set; }
    public String AddressLine2 { get; set; }
    public String City { get; set; }
    public String State { get; set; }
    public String PostalCode { get; set; }
    public String PhoneNumber1 { get; set; }
    public String PhoneNumber2 { get; set; }
    public String FaxNumber { get; set; }
    public String MiscUrlLink { get; set; }
    public String ManagerTitle { get; set; }
    public String ManagerName { get; set; }
    public String LocationNotes { get; set; }
    public String MapCoords { get; set; }
}

Result is sent to the browser fine. Having a hard time parsing the results in javascript, but I am new to json so I will get there!!

Many thanks for your help!!! I learnt alot

Copy Link

Phillip Turner 98 posts 412 karma points

Mar 28, 2016 @ 21:31

All working now. Thanks again Dennis. Much appreciated. Once site is complete, i'll shot you a url!

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 28, 2016 @ 22:25

Glad to hear that it pointed you in the right direction! Awsome, shoot an URL an ill check it out!! :) Good luck with the rest of the site!!

Copy Link

is working on a reply...

Flag this post as spam?

Pulling child node content via ajax (Or some other method)