locked
ASP.NET Multiview with progress bar RRS feed

  • Question

  • User1216627406 posted
    I am trying to use this Multi Step Form with Progress Bar using jQuery and CSS3 in an ASP.NET Multiview control.

    Iit works but partially.

    We would like any bar of the view of the Multiview control that has been processed to change the color to green as well as the number.

    So far, the only bar and number that changes to green is the active bar.

    Once the progress moves to the next bar and number, the previous bar and number revert back to the blue color.

    What do I need to change to get both the previously processed bar and number and the active bar to remain green?

    //CSS
    
            /*form styles*/
    #msform {
    margin: 50px 135px 50px auto;
    text-align: center;
    ;
    }
    #msform fieldset {
    background: white;
    margin-left:1px !important;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 70px 30px;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 10%;
    /*stacking fieldsets above each other*/
    ;
    }  
    legend {
        font-weight:bold;
        background: orange;
        width: 100%;
    
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*progressbar*/
    #progressbar {
        margin-bottom: 10px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
    }
    
        #progressbar li {
    	list-style-type: none;
    	color: #0093B2;
    	text-transform: uppercase;
    	font-size: 1.2em;
    	width: 20%;
    	float: left;
    	;
        }
    
    #progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 20px;
        line-height: 20px;
        display: block;
        font-size: 0.625em;
        color: #333;
        background: #0093B2;
        border-radius: 3px;
        margin: 0 auto 5px auto;
    }
    /*progressbar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: #0093B2;
        ;
        left: -50%;
        top: 9px;
        z-index: -1; /*put it behind the numbers*/
    }
    
    #progressbar li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
    }
    /*marking active/completed steps green*/
    /*The number of the step and the connector before it = green*/
    #progressbar li.active:before, #progressbar li.active:after {
        background: #27AE60;
        color: white;
    }
    
    
    //JS
        <script type="text/javascript">    
            $(document).ready(function () {
                var activeViewIndex = <%=myMultiView.ActiveViewIndex %>;
              $("#progressbar li").each(function(){
                  $("#progressbar li").removeClass("active");         
              })
              $("#progressbar li").eq(activeViewIndex).addClass("active");
          })
        </script>
        
        //MARKUP
    	<!-- progressbar -->
    	<ul id="progressbar">
    	    <li>Taxpayer Account Info</li>
    	    <li>Aircraft Info</li>
    	    <li>Schedule E</li>
    	    <li>Review/Sign/Submit</li>
    	</ul>
    
          <asp:MultiView ID="myMultiView" ActiveViewIndex="0" runat="server">
    	<asp:View ID="vwPayerInfo" runat="server">
    	    <h2 style="color: #0093B2; font-weight: bold; width: 1421px;">
    		Step 1: Taxpayer Account Info</h2>	
    	   ---
    	   ---
        </asp:Multiview>

    Thanks in advance

    Thursday, May 17, 2018 3:36 PM

All replies

  • User36583972 posted


    Hi simflex,

    When you click the button to the next page, the postabck will occur and the page will refresh. So, Only the current page will be green. You need to save the ActiveViewIndex collection which you have clicked in session(Or other storage methods).

    After the page refresh, you need to read the ActiveViewIndex collection value and render the navigation bar.

    Best Regards,

    Yong Lu

    Friday, May 18, 2018 9:02 AM
  • User1216627406 posted

    Thank you very much Yohann,

    Can you please give an example of how to do this?

    Friday, May 18, 2018 6:52 PM
  • User36583972 posted

    Hi simflex,

    I have made a sample on my side. You can refer the following sample.

    Note: the demo is shows how to implement, rather than writing code for you. Please write your own logic code. If there are new problems, please open the new thread.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
    
        <script type="text/javascript">    
            $(document).ready(function () {
    
                $("#progressbar li").each(function () {
                    $("#progressbar li").removeClass("active");
                })
    
                var listString = document.getElementById('HiddenField1').value;
                var listArray = listString.split('~');
                for (var i = 0; i < listArray.length; i++) {
                   
                    $("#progressbar li").eq(listArray[i]).addClass("active");
                }
    
                var activeViewIndex = <%=myMultiView.ActiveViewIndex %>;
                $("#progressbar li").eq(activeViewIndex).addClass("active");
    
            })
        </script>
        <style>
            #msform {
                margin: 50px 135px 50px auto;
                text-align: center;
                ;
            }
    
                #msform fieldset {
                    background: white;
                    margin-left: 1px !important;
                    border: 0 none;
                    border-radius: 3px;
                    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
                    padding: 70px 30px;
                    box-sizing: border-box;
                    width: 100% !important;
                    margin: 0 10%;
                    /*stacking fieldsets above each other*/
                    ;
                }
    
            legend {
                font-weight: bold;
                background: orange;
                width: 100%;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            /*progressbar*/
            #progressbar {
                margin-bottom: 10px;
                overflow: hidden;
                /*CSS counters to number the steps*/
                counter-reset: step;
            }
    
                #progressbar li {
                    list-style-type: none;
                    color: #0093B2;
                    text-transform: uppercase;
                    font-size: 1.2em;
                    width: 20%;
                    float: left;
                    ;
                }
    
                    #progressbar li:before {
                        content: counter(step);
                        counter-increment: step;
                        width: 20px;
                        line-height: 20px;
                        display: block;
                        font-size: 0.625em;
                        color: #333;
                        background: #0093B2;
                        border-radius: 3px;
                        margin: 0 auto 5px auto;
                    }
                    /*progressbar connectors*/
                    #progressbar li:after {
                        content: '';
                        width: 100%;
                        height: 2px;
                        background: #0093B2;
                        ;
                        left: -50%;
                        top: 9px;
                        z-index: -1; /*put it behind the numbers*/
                    }
    
                    #progressbar li:first-child:after {
                        /*connector not needed before the first step*/
                        content: none;
                    }
                    /*marking active/completed steps green*/
                    /*The number of the step and the connector before it = green*/
                    #progressbar li.active:before, #progressbar li.active:after {
                        background: #27AE60;
                        color: white;
                    }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <div>
                <!-- progressbar -->
                <ul id="progressbar">
                    <li>Taxpayer Account Info</li>
                    <li>Aircraft Info</li>
                    <li>Schedule E</li>
                    <li>Review/Sign/Submit</li>
                </ul>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
    
                <asp:MultiView ID="myMultiView" runat="server" ActiveViewIndex="0">
                    <asp:View ID="View1" runat="server">
                        <h3>This is view 1</h3>
                        <h3>0111111111111111</h3>
                        <br />
                        <asp:Button CommandName="NextView" ID="btnnext1" runat="server" Text="Go To Next" class='step' OnClick="btnnext1_Click" />
                        <asp:Button CommandArgument="View4" CommandName="SwitchViewByID" ID="btnlast" runat="server" Text="Go To Last" />
                    </asp:View>
    
                    <asp:View ID="View2" runat="server">
                        <h3>This is view 2</h3>
                        <h3>0222222222222222</h3>
                        <asp:Button CommandName="NextView" ID="btnnext2" runat="server" Text="Go To Next" class='step' OnClick="btnnext2_Click" />
                        <asp:Button CommandName="PrevView" ID="btnprevious2" runat="server" Text="Go To Previous View" OnClick="btnprevious2_Click" />
                    </asp:View>
    
                    <asp:View ID="View3" runat="server">
                        <h3>This is view 3</h3>
                        <h3>T333333333333333</h3>
                        <asp:Button CommandName="NextView" ID="Button1" runat="server" Text="Go To Next" class='step' OnClick="Button1_Click" />
                        <asp:Button CommandName="PrevView" ID="Button2" runat="server" Text="Go To Previous View"  OnClick="Button2_Click"/>
                    </asp:View>
    
                    <asp:View ID="View4" runat="server">
                        <h3>This is view 4</h3>
                        <br />
                        <asp:Calendar ID="Calender1" runat="server"></asp:Calendar>
                        <br />
                        <asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnfirst" runat="server" Text="Go To Next" OnClick="btnfirst_Click" />
                        <asp:Button CommandName="PrevView" ID="btnprevious" runat="server" Text="Go To Previous View"  OnClick="btnprevious_Click"/>
                    </asp:View>
    
                </asp:MultiView>
    
    
            </div>
        </form>
    </body>
    </html>

    Code Behind:

     public partial class MultiViewdemos : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
            }
    
            protected void btnnext1_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (!chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Add(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
                else
                {
                    List<int> chechint = new List<int>();
                    chechint.Add(myMultiView.ActiveViewIndex);
                    HiddenField1.Value = "";
                    Session["choosearry"] = chechint;
                    for (int i = 0; i < chechint.Count; i++)
                    {
                        HiddenField1.Value = chechint[i].ToString();
                    }
                }
            }
            
    
            protected void btnnext2_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (!chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Add(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
                else
                {
                    List<int> chechint = new List<int>();
                    chechint.Add(myMultiView.ActiveViewIndex);
                    HiddenField1.Value = "";
                    Session["choosearry"] = chechint;
                    for (int i = 0; i < chechint.Count; i++)
                    {
                        HiddenField1.Value = chechint[i].ToString();
                    }
                }
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (!chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Add(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
                else
                {
                    List<int> chechint = new List<int>();
                    chechint.Add(myMultiView.ActiveViewIndex);
                    HiddenField1.Value = "";
                    Session["choosearry"] = chechint;
                    for (int i = 0; i < chechint.Count; i++)
                    {
                        HiddenField1.Value = chechint[i].ToString();
                    }
                }
            }
    
            protected void btnfirst_Click(object sender, EventArgs e)
            {
    
                List<int> chechint = new List<int>();
                chechint.Add(myMultiView.ActiveViewIndex);
                HiddenField1.Value = "";
                Session["choosearry"] = chechint;
                for (int i = 0; i < chechint.Count; i++)
                {
                    HiddenField1.Value = chechint[i].ToString();
                }
    
            }
    
            protected void btnprevious2_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Remove(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
            }
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Remove(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
            }
    
            protected void btnprevious_Click(object sender, EventArgs e)
            {
                if (Session["choosearry"] != null)
                {
                    List<int> chechint = new List<int>();
                    chechint = (List<int>)Session["choosearry"];
                    if (chechint.Contains(myMultiView.ActiveViewIndex))
                    {
                        HiddenField1.Value = "";
                        chechint.Remove(myMultiView.ActiveViewIndex);
                        Session["choosearry"] = chechint;
                        for (int i = 0; i < chechint.Count; i++)
                        {
                            HiddenField1.Value = HiddenField1.Value + chechint[i].ToString() + "~";
                        }
                    }
                }
            }
        }
    


    Best Regards,

    Yong Lu

    Monday, May 21, 2018 3:02 AM