Dynamic Data-Pull From EpiServer Back-End into a jQuery Function

Dynamic Data-Pull From Episerver Back-End into a jQuery Function

While working on a client project recently, I came across an interesting problem to solve. A lot of the content in this particular site has external links, and the client wanted every one to fire off a modal that informed the user that they were leaving. Every one, that is, except the links that included domains that they deemed worthy and control via a property in the back-end of EpiServer. Thinking about it at first, the logic for the jQuery was easy, I could simply look at all the links on the page and return the ones that were not whitelisted, then add a class that will fire off the modal window when the link is clicked. What took some longer thought was how I was going to get the list of domains from the back-end of EPiServer and make them available to a jQuery function  in a view on the front-end. The solution I came up with works pretty good, and I understand that there may be a better way. Part of the fun with all of this stuff is the constant learning and revising and trying new approaches to solving problems. The code I am going to show you is really a more high-level look, as there are a few parts  that I could, and hopefully will, write an entire article about. If you are interested in seeing more of the guts of the code, you can contact me here.

This is a simple breakdown of what I did. First, I added a text area property to my Global Site Settings block. I typically make this block available to content editors within a tab on the homepage. Here is what it looks like in the block model:

[Display(Name = "Excluded Popup Domains ", GroupName = SystemTabNames.Settings, Order = 104)]
[UIHint(UIHint.Textarea)]
public virtual String Domains { get; set; }

Now, all a content editor has to do is add a new domain on each line and with a little bit of help from a custom web api controller function and a jQuery Ajax call, those domains are ready to get dynamically loaded into a jQuery string array and used up like nobody's business! This site has a lot of ajax and AngularJs data pulls, so I created a custom Web Api controller called ContentController.cs. I will dive deeper into that another time, so for now, here is the code that pulls the domains from the EPiServer back-end and returns a JSONArray:

[Route("domains")]
public string GetDomains()
{
     string domainList = Site.SiteSettings.Domains;
     string[] domains = domainList.Split();
     var json = new JavaScriptSerializer().Serialize(domains);
     return (json);
}

Pretty easy, right? So, the last piece is the ajax call from the view and reading in of the JSON to a jQuery string array. Here it is, in all it's glory:

jQuery.ajax({
            dataType: "json",
            method: "GET",
            url: "/api/content/domains/",
            success: function (data) {
                var parsed = JSON.parse(data)
                var domains = [];
                for (var x in parsed) {
                    domains.push(parsed[x]);
                }                
                // Now, do as you wish with domains[]
                });
            },
            error: function (data) {
                 console.log("Sorry bros, error.)
            }
        });

That is all there is to it. Another technique I have used is pulling the data from EPiServer and storing it in a hidden field on the view, then it is pretty easy to access with jQuery. I like this approach because it was fun to think about and build. Hopefully, it will help you too, next time you have a dynamic view to build in EPiServer. Until next time, code monkeys, HACK THE PLANET!

0 comment(s) in response to Dynamic Data-Pull From Episerver Back-End into a jQuery Function

Have a comment?