I'm really struggling to get my head around this so I thought that a) I'd write it down here to see if it becomes any clearer and b) someone might be able to point out where I'm going wrong.

I've a partial view which has a dropdown built on it:

@inherits UmbracoViewPage<IEnumerable<Stories>>
  <div class="filter__item">

            @Html.Action("GetDropdown", "StoryThemeDropdown", new { area = "MOTH", selectedOption = "all", inputName = "theme", includeAllEntry = true, controlId = "theme-select" })

        </div>

This successfully hits my StoryThemeDropdownController and gets the values for the dropdown. It's been done this way as the dropdown is built dynamically with Relationships between Themes and News Stories e.g. if a news story has a theme assigned to it, the theme is shown in the dropdown, if the theme has now relationship, it's not shown in the dropdown.

So, once that's done the StoryThemeDropDownController calls another partial

  return PartialView("StoryThemeDropDown", new 
   StoryThemeDropdownModel(inputName, controlId, t));

This partial renders the dropdown on to the page and up to this point everything works great.

@inherits UmbracoViewPage<StoryThemeDropdownModel>

    @if (Model != null && Model.Options != null && Model.Options.Any())
    {
        <select name="@Model.Name" id="@Model.ControlId" class="js-typeFilter">
             @foreach (var option in Model.Options)
            {
                <option value="@option.Text" selected="@option.Selected">@option.Text</option>
            }
        </select>
    }


<script>
         $(document).on('change', '.js-typeFilter', function () {
        var storyType = $("#@Model.ControlId").val();

        $.ajax({
            url: '@Url.Action("GetStories", "StoryListing")',
            type: 'POST',
            data: {storyType: storyType }
            cache: false,
            success: function (result) {
                $('#newsResults').html(result);
            }
        });
    });


</script>

My model for this looks like:

    public class StoryThemeDropdownModel
    {
        public StoryThemeDropdownModel( string name, string controlId, List<SelectListItem> options)
        {
            Name = name;
            ControlId = controlId;
            Options = options;
        }

        public string Name { get; }
        public string ControlId { get; }
        public List<SelectListItem> Options { get; }
    }

}

Now I have two problems, the first, I can't seem to be able to get the selected value back to the controller so that I can then only display Stories with a specific theme. The second issue I found is, I need to convert the theme to a umb:// ID because it seems to be indexed by the umb ID. I found this out by hardcoding a umb:// id in to my search function and it returned what I needed.

I'm hoping that someone is free to lend a hand on this as it's totally confused me. I think it's close but just not close enough to work :)