Hi I am completely new to umbraco and razor, so apologies for the noob question. I am used to writing wordpress themes.

I have the job of creating two new templates on a site that already exists. I am really struggling to understand how to use the document types within my template. The website has two roots, the main content and the liveworks root. I am working in the liveworks root.

I have listed the program content using query builder. I was able to list the properties of the program doc types by using the following

   @var selection = Umbraco.TypedContent(1266).Children("program") 

 @foreach(var item in selection){

                <a href="@item.Url">@item.Name</a>
                @item.GetPropertyValue("smallTitle")

        }

Elsewhere in the site I see these referred to using @model syntax should i be using @item.GetPropertyValue("smallTitle") or is there a more elegant way.

I'm using v7 with modelbuilder enabled and live appdata

Also can anyone please explain models and how they are created and how they are different to doc types? Is there a noob explanation about them? I really don't understand what they are and how they are created.

here is the code (from the main root) that references programs. I need to have this exact same thing in my page but I'm not getting any content if I use this on my template.

  @{

    var currentPrograms = Model.DescendantOrSelf<Programs>();
    bool first = true;    
}

 @if (currentPrograms != null) {
        if (currentPrograms.Children<Program>().Count() > 0) {
            try { 
                var children = currentPrograms.Children<Program>().OrderByDescending(x => x.ProgramDates.ToList().ToMultiDate().MinDate()).Take(7);

                <div class="gc gc--xl px0 progDiv">
                    <div class="grid-x medium-up-2 large-up-4 card--offset">
                        <article class="cell">
                            <div class="card bg-dark text-center text-light py24 md:py64 h100">
                                <div class="md:py32 px32 mt24">
                                    <p class="heading mb8">Programs</p>
                                    <h2 class="lh1 mb24">Current Programs</h2>
                                    <a href="@currentPrograms.Url" class="button large-expanded light mb0">
                                        See All
                                    </a>
                                </div>
                            </div>
                        </article>

                        @for (int count = 0; count < children.Count(); count++) {
                            try {
                                var item = children.ElementAt(count);
                                var even = count % 2 != 0;
                                //var bgColour = ((ColourCombo)item.HeadingColours).BackgroundColour as string;

                                var itemobj = new PerformanceSpace.Models.VM_Cards(item, !even) { cellClass = null };

                                @Html.Partial("renderCard", itemobj) }
                            catch { } }

                    </div>
                </div> }
            catch{} }}

How could I reuse this content on the liveworks root template? Am I completely off track with how models work?