I listened to all Umbraco videos and I am now trying to apply my knowledge. This video talks of partial views as a means to present custom data. http://umbraco.tv/videos/developer/fundamentals/surface-controllers/handling-posts/

Most of it works, but I am a bit confused. I retrieve data from MediaService to list audio files in different subfolders. The data is presented OK. Then I want to allow the user to swap to another folder by changing a DropDownlist. Then everything goes wrong.

1) First I am a bit confused on how to trigger on Dropdown change. Should I use jQuery or can Razor helpers help me?

2) Right now I use a button to trigger new selection. It kind of works. The new data is rendered all right, but all of my layout disappears! The master page with all menus and styling is gone.

I guess it all boils down to how partial views work together with templates and document types when posting data in the form. It seems that I lost track somewhere ... :)

Any help very much appreciated!

Controller

public class AudioListSurfaceController : SurfaceController
{
    public ActionResult Index()
    {
        var audioListModel = new AudioListModel();
        var sermonFolder = GetSermonFolder();
        if (sermonFolder != null)
        {
            audioListModel.YearFolderNames = sermonFolder.Children().Select(f => f.Name).ToList();
            audioListModel.YearFolderName = audioListModel.YearFolderNames.OrderByDescending(x => x).FirstOrDefault();
        }
        return Search(audioListModel);
    }

    [HttpPost]
    public ActionResult Search(AudioListModel audioListModel)
    {
        var sermonFolder = GetSermonFolder();
        if (sermonFolder != null)
        {
            audioListModel.YearFolderNames = sermonFolder.Children().Select(f => f.Name).ToList();
            var yearFolder = sermonFolder.Children().SingleOrDefault(f => f.Name == audioListModel.YearFolderName);
            if (yearFolder != null)
            {
                foreach (var mediaItem in yearFolder.Children())
                {
                    audioListModel.AudioModels.Add(new AudioModel
                    {
                        Title = mediaItem.Name,
                        Author = mediaItem.GetValue<string>("author"),
                        Date = mediaItem.GetValue<DateTime>("date"),
                        Location = mediaItem.GetValue<string>("location"),
                        Size = mediaItem.GetValue<string>("size"),
                        SizeBytes = mediaItem.GetValue<int>("sizeBytes"),
                        Duration = TimeSpan.FromSeconds(mediaItem.GetValue<int>("durationSeconds")),
                        Path = mediaItem.GetValue<string>("umbracoFile"),
                    });
                }
            }
        }

        return PartialView("AudioListForm", audioListModel);
    }


    private IMedia GetSermonFolder()
    {
        var sermonFolder = Services.MediaService.GetRootMedia().FirstOrDefault(folder => folder.ContentType.Alias == "audioFolder" && folder.Name == "Predikningar");
        return sermonFolder;
    }
}

Partial View

@using Sandeslatt.Controllers
@model Sandeslatt.Models.AudioListModel

@using (Html.BeginUmbracoForm<AudioListSurfaceController>("Search"))
{
    @Html.DropDownListFor(m => m.YearFolderName, Model.GetYearFolderNames(Model.YearFolderName), new {@class = "form-control"})

    <button type="submit" class="btn btn-primary">Sök</button>
}

<table class="table table-bordered table-condensed table-striped table-nonfluid">
    <tr>
        <th>Datum</th>
        <th>Titel/Talare</th>
        <th class="text-center">Längd</th>
        <th class="text-center">Storlek</th>
        <th class="text-center">Spela</th>
        <th class="text-center">Ladda ner</th>
    </tr>
    @foreach (var audioModel in Model.AudioModels.OrderByDescending(a => a.Date))
    {
        <tr>
            <td>@audioModel.Date.ToString("yyyy-MM-dd")</td>
            <td>
                <strong>@audioModel.Title</strong><br/>
                @audioModel.Author
            </td>
            <td class="text-right">@audioModel.DurationDisplay</td>
            <td class="text-right">@audioModel.Size</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    }
</table>

Hosting Template

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.AudioList>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = "Master.cshtml";
}

@Html.Action("Index", "AudioListSurface")