Variable MVC 5 form with dropdown

I have a model with two collections. I want to expose this as a form, but the objects in the second collection are dependant on the first. Depending on which option is chosen from the first collection (represented below as a dropdown), the objects filling the 2nd collection then need to be loaded and presented in the form.

I've tried having the 'dynamic' inputs returned as a partial view with little success, tried rendering client side using ajax to post to an API, as well as re-rendering the whole page on selection from the dropdown. Perhaps I could get it to work using of these methods but I'll undoubtedly go down a rabbit hole so wanted some guidance on how you should go about this.

A section of my View is included below, and my intention is that on the DropDownList changing, I can populate populate the div beneath it based on that selection (server-side or client-side).

    @using (@Html.BeginForm("Create", "Workout"))
    {
        @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(m => m.Date)
            @Html.TextBoxFor(m => m.Date, "{0:dd/MM/yyyy}", new { id = "datepicker", @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Date)
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.TemplateId)
            @Html.DropDownListFor(m => m.TemplateId, new SelectList(Model.Templates,"Id","Name"), "Select Template", new {  @class = "form-control", id = "js-template-list" })
        </div>

        <div id="DynamicInputsHere">
        </div>
    }

Thanks in advance!