StepBar | C# Online Compiler

StepBar by dvMasiuk

using System;
using System.ComponentModel.DataAnnotations;

namespace Models
{
	public enum ProjectSetUpStep
	{
		[Display(Name = "Start")]
		Start,
		[Display(Name = "Threshold")]
		Threshold,
		[Display(Name = "Description")]
		Description,
		[Display(Name = "Privacy risk analysis")]
		PrivacyRiskAnalysis,
		[Display(Name = "Report")]
		Report,
		[Display(Name = "Manage")]
		Manage
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace Models
{
    public enum ProjectSetUpStep
    {
        [Display(Name = "Start")]
        Start,
        [Display(Name = "Threshold")]
        Threshold,
        [Display(Name = "Description")]
        Description,
        [Display(Name = "Privacy risk analysis")]
        PrivacyRiskAnalysis,
        [Display(Name = "Report")]
        Report,
        [Display(Name = "Manage")]
        Manage
    }
}

@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
	</head>
	
	<body>
	
	<div id="product-start-page" class="forms pul">
    <div class="main-wrapper" style="background: top center no-repeat;">
        <header class="header-img header-extralight">
            <div class="header-img-light">
                <div class="container header-img-inner">
                    <div class="project-title">New project setup</div>
                    <div class="row">
                        <div class="col-md-12 main">
                            <div class="step-bar">
                                <div class="step-line">
                                    <div class="step-line-active" data-bind="style: { width: getLineStatusPercent() + '%'}"> </div>
                                </div>
								@foreach(var step in Enum.GetValues(typeof(Models.ProjectSetUpStep)))
								{
									@((int)step)
								}
                                <a class="step-dot"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepStart), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Start) }, style:{ left : getStatusPercent() }"
                                   href="#" style="left: 0%;">
                                    <span class="step-dot">1</span>
                                    <span class="step-label">Start</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 20%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepThreshold), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Threshold) }">
                                    <span class="step-dot">2</span>
                                    <span class="step-label">Threshold</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 40%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepDescription), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Description) }">
                                    <span class="step-dot">3</span>
                                    <span class="step-label">Description</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 60%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepRisk), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.PrivacyRiskAnalysis) }">
                                    <span class="step-dot">4</span>
                                    <span class="step-label">Privacy risk analysis</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 80%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepReport), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Report) }">
                                    <span class="step-dot">5</span>
                                    <span class="step-label">Report</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 100%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepManage), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Manage) }">
                                    <span class="step-dot">6</span>
                                    <span class="step-label">Manage</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
	
	</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
    </head>
    
    <body>
    
    <div id="product-start-page" class="forms pul">
    <div class="main-wrapper" style="background: top center no-repeat;">
        <header class="header-img header-extralight">
            <div class="header-img-light">
                <div class="container header-img-inner">
                    <div class="project-title">New project setup</div>
                    <div class="row">
                        <div class="col-md-12 main">
                            <div class="step-bar">
                                <div class="step-line">
                                    <div class="step-line-active" data-bind="style: { width: getLineStatusPercent() + '%'}"> </div>
                                </div>
                                @foreach(var step in Enum.GetValues(typeof(Models.ProjectSetUpStep)))
                                {
                                    @((int)step)
                                }
                                <a class="step-dot"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepStart), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Start) }, style:{ left : getStatusPercent() }"
                                   href="#" style="left: 0%;">
                                    <span class="step-dot">1</span>
                                    <span class="step-label">Start</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 20%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepThreshold), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Threshold) }">
                                    <span class="step-dot">2</span>
                                    <span class="step-label">Threshold</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 40%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepDescription), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Description) }">
                                    <span class="step-dot">3</span>
                                    <span class="step-label">Description</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 60%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepRisk), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.PrivacyRiskAnalysis) }">
                                    <span class="step-dot">4</span>
                                    <span class="step-label">Privacy risk analysis</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 80%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepReport), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Report) }">
                                    <span class="step-dot">5</span>
                                    <span class="step-label">Report</span>
                                </a>
                                <a href="#" class="step-dot" style="left: 100%;"
                                   data-bind="click: chooseStep.bind($data, window.enums.newProjectSteps.stepManage), css: { 'step-dot-active': isDotActive(window.enums.stepPercent.Manage) }">
                                    <span class="step-dot">6</span>
                                    <span class="step-label">Manage</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View();
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
    }
}

View in Full Screen

num=

Last Run:	3:53:22 am
Compile:	0.142s
Execute:	0s
Memory:	32kb
CPU:	0.016s

View IL Code