Hi John,

Assuming you are using MVC templates and Umbraco v6.1+ then would approach this by having a model for my objects, then use a Surface Controller & Partial to render the X. Then for the "more" I would use a UmbracoApi Controller to return the serialised model and use jQuery to make the request(s) for more data.

There is an example of how to create a Api controller here and there is now a chapter on umbraco.tv (as well as loads of other great tutorials) I would recommend.

Hope that's helpful?

Jeavon

Jeavon - I apologize for the delay. I'm just finally getting back around this this project. So I have my NewsItem Model (the document type I want to return)... initially display 4 records and then have load more button which load in additional increments of 4 items at a time each time the button is clicked. I also have a basic API Controller to return back all the NewsItem items (guessing may need to tweak this). I also have a Partial View which is used to initially display the data and wireup the jQuery button which calls the API (code sample below). So I think I have some initial bits and pieces...

        <ul class="featured-news-article-list">

            @if (CurrentPage.Descendants("News").Where("Visible").Any())
            {   
                if(CurrentPage.Descendants("News").First().Children.Where("Visible").Any())
                {
                    foreach (var item in CurrentPage.Descendants("News").First().Children.Where("Visible").Take(4))
                    {
                        <li class="featured-news-article-listing @item.articleFormat" data-category="@item.articleCategory">
                            <a href="@item.Url">
                            @if(@item.HasValue("articleTeaserImage")){
                                <div class="image-container">
                                    <img src="@Umbraco.Media(@item.articleTeaserImage).Url" />
                                </div>
                            }
                            <h3 class="article-title">@item.pageTitle<span class="ss-navigateright"></span></h3>
                            <p class="article-teaser">@item.articleTeaser</p></a>
                        </li>                       
                    }
                }
            }   

        </ul>

        <div id="page-content">
            @* @Html.Action("AppendItems","FeaturedNewsItemsSurface") *@
        </div>


        <a href="#" class="load-more-articles">Load More <span class="ss-plus"></span></a>

        <script type="text/javascript">

        $(document).ready(function ()
        {               

            $(".load-more-articles").click(function(e)
            {
                e.preventDefault();
                var ajaxUrl = '/Umbraco/Api/NewsApi/GetAllNewsArticles?parentId=1148';
                $("#page-content").load(ajaxUrl);
            });

        });

        </script>

Hi John,

Looks like the perfect pattern to me! As you say, you perhaps need to add a pagination or offset variable to your WebApi requests so that you only get the next 4 News Items returned.

Good work!

Jeavon

Jeavon - yep, just needed to add a couple tweaks... appreciate your help and feedback... our design templates render the content inside ul > li elements so I added an API method that formatted the code in li format so I could just drop it into parent ul (I'm sure there is probably a better way to do this)... below is my initial version (formattng was lost on paste)...

jQuery call in partial view

        <ul class="upcoming-events-list">

            @if (CurrentPage.Descendants("Events").Where("Visible").Any())
            {   
                if(CurrentPage.Descendants("Events").First().Children.Where("Visible").Any())
                {
                    foreach (var item in CurrentPage.Descendants("Events").First().Children.Where("Visible").Take(3))
                    {

                        <li class="upcoming-event-item" data-category="@item.eventCategory"><a href="@item.Url">
                                <div class="event-date">
                                        <time datetime="@item.eventStartDate">@item.eventStartDate.ToString("MMM")
                                        <span>@item.eventStartDate.ToString("dd")</span></time>
                                </div>
                                <div class="event-details">
                                        <h4 class="event-title">@item.pageTitle<span class="ss-navigateright"></span></h4>
                                        <p class="event-blurb">@item.eventTeaser</p>
                                </div>
                        </a></li>

                    }
                }
            }   

    </ul>

    <a href="/events" class="view-all-events">View All <span class="ss-navigateright"></span></a>

        <script type="text/javascript">

        $(document).ready(function ()
        {               
            $(".view-all-events").click(function(e)
            {
                var currentCount = $(".upcoming-events-list li").length;
                var moreCount = 2;                  

                //alert(currentCount);

                $.ajax({
                    type: "GET",
                    url: "/Umbraco/Api/FeaturedApi/GetMoreEvents?parentId=1160&currentCount="+currentCount+"&moreCount="+moreCount
                })
                .done(function( html ) {
                    //alert( html );
                    $("ul.upcoming-events-list").append( html );    
                });

                e.preventDefault();

            });
        });

        </script>

API method:

        public string GetMoreEvents(int parentId, int currentCount, int moreCount)

    {

        UmbracoHelper help = new UmbracoHelper(UmbracoContext);



        StringBuilder sbData = new StringBuilder();



        var nodesToSearchThrough = help.TypedContent(parentId)

            .Children

            .Where(c => c.DocumentTypeAlias == EventsItemDocTypeAlias).Where("Visible").Skip(currentCount).Take(moreCount);



        foreach (var node in nodesToSearchThrough)

        {

            int eventId = node.Id;

            string eventCategory = node.GetProperty("eventCategory").Value.ToString();

            string eventSearchCategories = node.GetProperty("eventSearchCategories").Value.ToString();

            string eventUrl = node.Url;

            string eventTeaserImage = help.Media(node.GetProperty("eventTeaserImage").Value).Url;

            string eventTitle = node.GetProperty("pageTitle").Value.ToString();

            string eventTeaser = node.GetProperty("eventTeaser").Value.ToString();

            DateTime eventStartDate = Convert.ToDateTime(node.GetProperty("eventStartDate").Value.ToString());



            sbData.Append(String.Format("<li class=\"upcoming-event-item\" data-category=\"{0}\">", eventCategory));

            sbData.Append(String.Format("<a href=\"{0}\">", eventUrl));

            sbData.Append("<div class=\"event-date\">");

            sbData.Append(String.Format("<time datetime=\"{0}\">{1}<span>{2}</span></time>", eventStartDate, eventStartDate.ToString("MMM"), eventStartDate.ToString("dd")));

            sbData.Append("</div>");

            sbData.Append("<div class=\"event-details\">");

            sbData.Append(String.Format("<h4 class=\"event-title\">{0}<span class=\"ss-navigateright\"></span></h4>", eventTitle));

            sbData.Append(String.Format("<p class=\"event-blurb\">{0}</p>", eventTeaser));

            sbData.Append("</div>");

            sbData.Append("</a></li>");

        }



        return !String.IsNullOrEmpty(sbData.ToString()) ? sbData.ToString() : String.Empty;

    }

Hi John,

I will post to you how I would approach this, I just need a little time to put it together for you.

Jeavon

Hello

I am trying to implement the API controller but i am having an error message on the line below: UmbracoHelper help = new UmbracoHelper(UmbracoContext);

It says : 'Umbraco.Web.UmbracoContext' is a 'type' but is used like a 'variable'

Did I miss out something?

Thanks

Regards Aaeda

is working on a reply...