Expander with a Partial?

[Joel]

I was asked to condense one of my Razor pages by having sections create dynamically.  So, instead of bouncing the user over to a separate View they want me to stay on the same View but just expand an area in order to accommodate more input.    I thought I'd run the idea past you guys being as I have no idea how I'd accomplish this.  As a WPF programmer, I could do it there by having an Expander control with a UserControl that binds to a list of Addresses.

 

Capture the information on a person using this type of flow.

FirstName (standard field)

LastName (standard field)

Etc.

Address 1 (push a button to expand)

Address 2 (push a button to expand)

Address 3

[Ivan Danchev]

Hello Joel,

You could consider using the PanelBar helper (demos). It allows you to either nest arbitrary Html or to load a partial views as content of its items.

See the Basic usage demo for example of adding Html as content, as for loading partial views in different items you can do so as demonstrated below:

@(Html.Kendo().PanelBar()
    .Name("panelbar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Items(panelbar =>
    {
        panelbar.Add().Text("Content1")
            .Content(Html.Partial("/Pages/Partial1.cshtml", new Partial1Model()).ToHtmlString());

        panelbar.Add().Text("Content2")
            .Content(Html.Partial("/Pages/Partial2.cshtml", new Partial2Model()).ToHtmlString());

        panelbar.Add().Text("Content3")
            .Content(Html.Partial("/Pages/Partial3.cshtml", new Partial3Model()).ToHtmlString());
    })
)

Note that ToHtmlString is an extension method for IHtmlContent:

public static class HtmlContentExtensions
{
    public static string ToHtmlString(this IHtmlContent htmlContent)
    {
        using (var writer = new StringWriter())
        {
            htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
            return writer.ToString();
        }
    }
}

Regards,
Ivan Danchev
Progress Telerik