Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Phillip Turner 98 posts 412 karma points
    Mar 02, 2016 @ 17:22
    Phillip Turner
    0

    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

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Mar 03, 2016 @ 09:35
    Dennis Adolfi
    103

    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!

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Mar 12, 2016 @ 14:05
    Dennis Adolfi
    0

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

  • Phillip Turner 98 posts 412 karma points
    Mar 28, 2016 @ 17:26
    Phillip Turner
    0

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

    Many thanks

  • Phillip Turner 98 posts 412 karma points
    Mar 28, 2016 @ 18:11
    Phillip Turner
    0

    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
                    });
                }
            }
    
  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Mar 28, 2016 @ 20:36
    Dennis Adolfi
    0

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

  • Phillip Turner 98 posts 412 karma points
    Mar 28, 2016 @ 20:43
    Phillip Turner
    1

    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

  • Phillip Turner 98 posts 412 karma points
    Mar 28, 2016 @ 21:31
    Phillip Turner
    1

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

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Mar 28, 2016 @ 22:25
    Dennis Adolfi
    0

    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!!

Please Sign in or register to post replies

Write your reply to:

Draft