pulling child node content via ajax or some other method

Phillip Turner 98 posts 413 karma points

Mar 02, 2016 @ 17:22

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

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 6450 karma points MVP 6x 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 6450 karma points MVP 6x 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 413 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 413 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 6450 karma points MVP 6x 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 413 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 413 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 6450 karma points MVP 6x 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

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