Riddell
Riddell

Reputation: 1489

Custom control using panels not working

I'm trying to recreate what the ASP.NET Wizard control does using a custom control. I can't use the wizard control because that reloads the page and wraps the HTML in table.

Control Criteria: - Async Reload - Ability to change step from control ID (.Next(), .Prev())

It's currently made up of 2 parts:

Markup:

<asp:UpdatePanel id="upTest" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Label ID="lblbActiveStep" runat="server" Text="Label"></asp:Label>

        <customControl:MultiStep ID="msExample" Visible="True" ActiveStepIndex="0" runat="server">
            <customControl:Step runat="server" Name="Step 1">
                <p>Step 1</p>
            </customControl:Step>

            <customControl:Step runat="server" Name="Step 2">
                <p>Step 2</p>
            </customControl:Step>

            <customControl:Step runat="server" Name="Step 3">
                <p>Step 3</p>
            </customControl:Step>
        </customControl:MultiStep> 

        <asp:Button ID="btnTest" OnClick="btnTest_OnClick" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>

My current code works for displaying the active step but when updating the ActiveStepIndex it does not re-render.

MultiStep Control:

[ParseChildren(true, "Steps"), PersistChildren(false)]
public class MultiStep : CompositeControl
{
    [PersistenceMode(PersistenceMode.InnerProperty)]
    public StepList Steps { get; set; }

    [PersistenceMode(PersistenceMode.InnerProperty)]
    public int ActiveStepIndex { get; set; }

    public MultiStep()
    { 
        Steps = new StepList();
        ActiveStepIndex = 0;
    }

    protected override void RenderChildren(HtmlTextWriter writer)
    {
        for (int i = 0; i < Steps.Count; i++)
        {
            Steps[i].Visible = (i == ActiveStepIndex);

            if (Steps[i].Visible)
                Steps[i].InstantiateIn(this);
        }

        base.RenderChildren(writer);
    }

    public void Next()
    {
        if (ActiveStepIndex < Steps.Count )
        {
            ActiveStepIndex++;
            UpdateVisible(ActiveStepIndex);
        }
    }

    private void UpdateVisible(int stepIndex)
    {
        foreach (Step step in Steps)
        {
            step.Visible = false;
        }

        Steps[ActiveStepIndex].Visible = true;
    }
}

Step Sub-Control:

[ParseChildren(true, "Content"), PersistChildren(false)]
public class Step : CompositeControl
{

    [PersistenceMode(PersistenceMode.InnerProperty)]
    public string Name { get; set; }

    [PersistenceMode(PersistenceMode.InnerProperty)]
    [TemplateContainer(typeof(MultiStep))]
    [TemplateInstance(TemplateInstance.Single)]
    public ITemplate Content { get; set; }

    [PersistenceMode(PersistenceMode.InnerProperty)]
    public Panel Panel { get; set; }

    public Step()
    {
    }

    public void InstantiateIn(Control container)
    {
        Content?.InstantiateIn(container);
    }
}

StepList Collection

public class StepList : Collection<Step> { }

When clicking the testing button it runs this code:

protected void testing_OnClick(object sender, EventArgs e)
{
    msExample.Next();
}

The next step does not appear: Multi Step not working

Update

The step only updates once and then the button no longer works for some strange reason. Button update control once

Upvotes: 0

Views: 59

Answers (0)

Related Questions