Razor syntax: Demo 3 | C# Online Compiler

Razor syntax: Demo 3 by Anonymous

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		// go to view
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        // go to view
    }
}

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />

    @message                               
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add Numbers</title>
    <meta charset="utf-8" />
    
  </head>
<body>
	<div>
<style type="text/css">

  .review-body {
      color: #2e2e38;
      margin: 0;
      font-size: 0.75rem;
      overflow-x: hidden;
      font-family: EYInterstate;
      font-weight: 400;
      line-height: 1.43;
      background-color: #fff;
  }
  .review-body p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  .review-body .content{
    padding: 10px 22px;
  }
  .review-body hr {
    border: 1px solid rgb(234, 234, 242);
    height: 1px;
  }
  .review-body .header-logo {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 16px;
  }
  .review-body .header-logo .logo-catalyst {
    margin-right: 22px;
    height: 36px;
    width: 36px;
  }
  .review-body .header-logo .title-catalyst{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: normal;
    padding-right: 35px
  }
  .review-body .header-logo .logo-company {
    margin-right: 22px;
    height: 28px;
    width: 86px;
  }
  .review-body .header-pathway-category-suite{
    margin: 8px 0;
    display: flex;
  } 
  .review-body .header-pathway-category-suite .item{
      margin-right: 40px;
  }
  .review-body .header-pathway-category-suite .item .title{
      color: rgb(116, 116, 128);
      font-size: 12px;
      font-weight: 300;
  }
  .review-body .header-pathway-category-suite .item .name{
      color: rgb(46, 46, 56);
      font-size: 14px;
      font-weight: normal;
  }
  
  .review-body .wrap-info{
      margin-top: 28px;
  }
  .review-body .wrap-info .info{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  }
  
  .review-body .wrap-overview{
    margin-top: 39px;
  }  
  .review-body .wrap-overview .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  } 
  .review-body .wrap-overview .description{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
    margin-top: 13px;
  }
  
  .review-body .wrap-process{
    margin-top: 39px;
  }
  .review-body .wrap-process .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 13px;
  }
  .review-body .wrap-process .expand-all{
    color: rgb(178, 178, 192);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 1px solid rgb(234, 234, 242);
    padding: 12px;
  } 
  .review-body .wrap-process .expand-all .name{
    color: rgb(46, 46, 56);
    font-size: 14px;
    font-weight: normal;
  } 
  .review-body .wrap-process .expand-all:not(.collapse) .name.expand{
    display: none;
  }
  .review-body .wrap-process .expand-all:not(.collapse) .name.collapse{
    display: block;
  }
  .review-body .wrap-process .expand-all.collapse .name.expand{
    display: block;
  }
   .review-body .wrap-process .expand-all.collapse .name.collapse{
    display: none;
  }
  .review-body .wrap-process .expand-all .minus{
    display: block;
  } 
  .review-body .wrap-process .expand-all .plus{
    display: none;
  } 
  .review-body .wrap-process .expand-all.collapse .minus{
    display: none;
  } 
  .review-body .wrap-process .expand-all.collapse .plus{
    display: block;
  } 
  .review-body .wrap-process .minus, .review-body .wrap-process .plus{
    margin: auto 17px;
    width:24px;
    height:24px
  }
  .review-body .wrap-process .item{
    color: rgb(178, 178, 192);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid rgb(234, 234, 242);
    border-top: none;
    padding: 12px;
  }
  .review-body .wrap-process .item .name{
    color: rgb(46, 46, 56);
    font-size: 14px;
    font-weight: normal;
  }
  .review-body .wrap-process .item .description{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
    margin: 28px 60px;
  }
  .review-body .wrap-process .item.collapse .description{
    display: none;
  } 
  
  .review-body .wrap-process .item .minus{
    display: block;
  } 
  .review-body .wrap-process .item .plus{
    display: none;
  } 
  
  .review-body .wrap-process .item.collapse .minus{
    display: none;
  } 
  .review-body .wrap-process .item.collapse .plus{
    display: block;
  } 
  .review-body .wrap-assessment-criteria{
    margin-top: 39px;
  }
  .review-body .wrap-assessment-criteria .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 13px;
  }
  .review-body .wrap-assessment-criteria ul li{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
  }
  .review-body .wrap-assessment-criteria ul{
    padding-inline-start: 20px;
  }
  .review-body .wrap-assessment-criteria ul li::marker{
    color: rgb(46, 46, 56);
  }
  .review-body .supporting-documents{
    width: 50%;
  } 
  .review-body .supporting-documents .header {
    display: flex;
    justify-content: space-between;
    padding-top: 11px;
    padding-bottom: 21px;
    align-items: center;
  } 
  .review-body .supporting-documents .header .title {
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  }
  .review-body .supporting-documents .header .chip {
    color: #fff;
    background: rgb(32, 32, 43);
    border-radius: 10px;
    height: 18px;
    width: 30px;
    border: none;
    cursor: default;
    display: inline-flex;
    outline: 0;
    padding: 0;
    font-size: 12px;
    box-sizing: border-box;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    margin-right: 8px;
  }
  .review-body .supporting-documents .header .wrap-count{
    display: flex;
    align-items: center;
  }
  .review-body .supporting-documents .header .total{
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: normal;
  }
  .review-body .supporting-documents .table-doc{
    width: 100%;
    border-collapse: collapse;
  }
  .review-body .supporting-documents .table-doc thead {
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: bold;
    text-align: justify;
    height: 45px;
    border-top: 1px solid rgb(46, 46, 56);
    border-bottom: 1px solid rgb(234, 234, 242);
  } 
  .review-body .supporting-documents .table-doc thead tr {
    height: 45px;
  }
  .review-body .supporting-documents .table-doc .thead-file-type {
    padding-left: 13px;
    white-space: nowrap;
    padding-right: 64px;
  } 
  .review-body .supporting-documents .table-doc .file-type {
    padding-left: 30px;
  }
  .review-body .supporting-documents .table-doc .file-type .wrap-icon {
    width: 20px
  }
  .review-body .supporting-documents .table-doc tbody tr:nth-child(odd) {
    background: rgb(250, 250, 252);
  }
  .review-body .supporting-documents .table-doc tbody tr {
    height: 61px;
  }
  .review-body .supporting-documents .table-doc tbody tr td {
    font-size: 12px; 
    font-weight: 300;
  }
  .review-body .supporting-documents .table-doc .file-name, .review-body .supporting-documents .table-doc .file-category {
    word-break: break-word;
  }

  
  
  .review-body .foot{
    padding: 10px 22px;
    display: flex;
    align-items: center;
    background: rgb(246, 246, 250);
  } 
  .review-body .foot .IWS{
    color: rgb(46, 46, 56);
    font-size: 25px;
    font-weight: bold;
    margin-right: 17px;
  }
  .review-body .foot .copyright{
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: 300;
  }  

</style>
<div class="review-body">
  <div class="content">
    <div class="header-logo">
    
<!--   to display the logo, use img or svg-->

<!--      <img alt="logo" src="/static/media/logo-header.a5192556.svg" class="logo-catalyst">-->

      <p class="title-catalyst">Catalyst</p>
      
      <!--   to display the logo, use img or svg-->
      
<!--      <img alt="logo" src="/static/media/logo-header.a5192556.svg" class="logo-company">-->
      
    </div>
    <hr>
    <div class="header-pathway-category-suite">
      <div class="item">
        <div class="title">Pathway</div>
        <div class="name">Autonomous Maintenance</div>
      </div>
      <div class="item">
        <div class="title">Category/suite</div>
        <div class="name">IWS</div>
      </div>
    </div>
    <hr>
    <div class="wrap-info">
        <div class="info"><strong>Stage 2: </strong>Implementation Action</div>
        <div class="info"><strong>Theme: </strong>Culture of Standard Work</div>
        <div class="info"><strong>2IA1: </strong>Develop the Run-to-Target Accelerator Deployment Plan for the Line on the Smart Deployment Console</div>
    </div>
    <div class="wrap-overview">
        <div class="title">Overview</div>
        <div class="description">
        The Run-to-Target (RTT) Accelerator guides the line team through the deployment of RTT systems and capabilities. The deployment of RTT is planned and managed through the EY Catalyst Smart Deployment Console (SDC). A baseline assessment is conducted in the SDC to understand the current situation on the line. This assessment identifies capability gaps, and the SDC automatically generates a plan to close any existing gaps. 
        </div>
    </div>
    <div class="wrap-process">
      <div class="title">Process steps and execution</div>
      <div class="expand-all">

        
        <div class="name expand">Expand all</div>
        <div class="name collapse">Collapse all</div>
      </div>
      <div class="item ">
        
        <div class="name">Step 01: Create a new area for the line in the Smart Deployment Console (SDC)</div>
        <div class="description">
        The Smart Deployment Console (SDC) contains an area tree that reflects the organization’s structure. When a new area starts implementation of the integrated work system (IWS), the area must be added to the area tree to provide the line team with a workspace within the application. Areas are created and managed in the Client Admin Console. New areas will typically be created by the SDC Administrator for the site. The area should be created in line with any existing naming conventions that are already in use. The area should also be assigned an appropriate area category.
        </div>
      </div>
      <div class="item">
        
        <div class="name">Step 01: Create a new area for the line in the Smart Deployment Console (SDC)</div>
        <div class="description">
        The Smart Deployment Console (SDC) contains an area tree that reflects the organization’s structure. When a new area starts implementation of the integrated work system (IWS), the area must be added to the area tree to provide the line team with a workspace within the application. Areas are created and managed in the Client Admin Console. New areas will typically be created by the SDC Administrator for the site. The area should be created in line with any existing naming conventions that are already in use. The area should also be assigned an appropriate area category.
        </div>
      </div>
    </div>
    <div class="wrap-assessment-criteria">
     <div class="title">Assessment criteria</div>
       <ul>
         <li>
         A baseline assessment has been completed in the Smart Deployment Console (SDC).
         </li>
        <li>
        A deployment plan has been created in the Smart Deployment Console (SDC), and updates are scheduled on a weekly cycle. Assessments and key performance indicator (KPI) updates are scheduled on a monthly cycle.
        </li>
        <li>
       Assessments and key performance indicator (KPI) updates are scheduled on a monthly cycle.
        </li>
       </ul>
    </div>
    <div class="supporting-documents">
        <div class="header">
          <div class="title">Supporting documents</div>
          <div class="wrap-count">
            <div class="chip">4</div>
            <div class="total">Total files attached</div>
          </div>
        </div>
        <table class="table-doc">
          <thead>
            <tr>
              <th class="thead-file-type">
                File Type
              </th> 
              <th>
                Name
              </th>
              <th>
                Category
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="file-type">
                <div class="wrap-icon">
                 </div>
              </td>
              <td class="file-name">                    LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongName.pdf                  
              </td>
              <td class="file-category">  longNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategory
              </td>
            </tr>
            <tr>
              <td class="file-type">
                <div class="wrap-icon">
                  </div>
              </td>
                <td>
                fileName.pdf
                </td>
                <td>
                Delor
                </td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>
  <div class="foot">
    <span class="IWS">IWS</span>
    <span class="copyright"> Copyright © EY Catalyst Limited 2020 or used under license. This
      information may not be used or disclosed in whole or in part for
      any purpose other than as permitted in the Terms of Service.</span>
     
  </div>
</div>
<script>
document.querySelector(".review-body .wrap-process .expand-all").addEventListener("click", function() {
  this.classList.toggle("collapse");
  const expandAllHasClass = this.classList.contains('collapse')
  document.querySelectorAll(".review-body .wrap-process .item").forEach((coll)=>{
      if(expandAllHasClass){
        coll.classList.add("collapse") 
      } else {
        coll.classList.remove("collapse")
      } 
  });
})
document.querySelectorAll(".review-body .wrap-process .item").forEach((coll)=>{
  coll.addEventListener("click", function() {
      this.classList.toggle("collapse");
      const expandAll = document.querySelector(".review-body .wrap-process .expand-all")
      const item = document.querySelectorAll(".review-body .wrap-process .item")
      const itemCollapse = document.querySelectorAll(".review-body .wrap-process .item.collapse")
      if(item.length === itemCollapse.length){
        expandAll.classList.add("collapse") 
      } else {
        expandAll.classList.remove("collapse") 
      }
  });
})
</script>
</div>


</body>
</html>

View

 
@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />
​
    @message                               
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add Numbers</title>
    <meta charset="utf-8" />
    
  </head>
<body>
    <div>
<style type="text/css">
​
  .review-body {
      color: #2e2e38;
      margin: 0;
      font-size: 0.75rem;
      overflow-x: hidden;
      font-family: EYInterstate;
      font-weight: 400;
      line-height: 1.43;
      background-color: #fff;
  }
  .review-body p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  .review-body .content{
    padding: 10px 22px;
  }
  .review-body hr {
    border: 1px solid rgb(234, 234, 242);
    height: 1px;
  }
  .review-body .header-logo {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 16px;
  }
  .review-body .header-logo .logo-catalyst {
    margin-right: 22px;
    height: 36px;
    width: 36px;
  }
  .review-body .header-logo .title-catalyst{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: normal;
    padding-right: 35px
  }
  .review-body .header-logo .logo-company {
    margin-right: 22px;
    height: 28px;
    width: 86px;
  }
  .review-body .header-pathway-category-suite{
    margin: 8px 0;
    display: flex;
  } 
  .review-body .header-pathway-category-suite .item{
      margin-right: 40px;
  }
  .review-body .header-pathway-category-suite .item .title{
      color: rgb(116, 116, 128);
      font-size: 12px;
      font-weight: 300;
  }
  .review-body .header-pathway-category-suite .item .name{
      color: rgb(46, 46, 56);
      font-size: 14px;
      font-weight: normal;
  }
  
  .review-body .wrap-info{
      margin-top: 28px;
  }
  .review-body .wrap-info .info{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  }
  
  .review-body .wrap-overview{
    margin-top: 39px;
  }  
  .review-body .wrap-overview .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  } 
  .review-body .wrap-overview .description{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
    margin-top: 13px;
  }
  
  .review-body .wrap-process{
    margin-top: 39px;
  }
  .review-body .wrap-process .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 13px;
  }
  .review-body .wrap-process .expand-all{
    color: rgb(178, 178, 192);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 1px solid rgb(234, 234, 242);
    padding: 12px;
  } 
  .review-body .wrap-process .expand-all .name{
    color: rgb(46, 46, 56);
    font-size: 14px;
    font-weight: normal;
  } 
  .review-body .wrap-process .expand-all:not(.collapse) .name.expand{
    display: none;
  }
  .review-body .wrap-process .expand-all:not(.collapse) .name.collapse{
    display: block;
  }
  .review-body .wrap-process .expand-all.collapse .name.expand{
    display: block;
  }
   .review-body .wrap-process .expand-all.collapse .name.collapse{
    display: none;
  }
  .review-body .wrap-process .expand-all .minus{
    display: block;
  } 
  .review-body .wrap-process .expand-all .plus{
    display: none;
  } 
  .review-body .wrap-process .expand-all.collapse .minus{
    display: none;
  } 
  .review-body .wrap-process .expand-all.collapse .plus{
    display: block;
  } 
  .review-body .wrap-process .minus, .review-body .wrap-process .plus{
    margin: auto 17px;
    width:24px;
    height:24px
  }
  .review-body .wrap-process .item{
    color: rgb(178, 178, 192);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid rgb(234, 234, 242);
    border-top: none;
    padding: 12px;
  }
  .review-body .wrap-process .item .name{
    color: rgb(46, 46, 56);
    font-size: 14px;
    font-weight: normal;
  }
  .review-body .wrap-process .item .description{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
    margin: 28px 60px;
  }
  .review-body .wrap-process .item.collapse .description{
    display: none;
  } 
  
  .review-body .wrap-process .item .minus{
    display: block;
  } 
  .review-body .wrap-process .item .plus{
    display: none;
  } 
  
  .review-body .wrap-process .item.collapse .minus{
    display: none;
  } 
  .review-body .wrap-process .item.collapse .plus{
    display: block;
  } 
  .review-body .wrap-assessment-criteria{
    margin-top: 39px;
  }
  .review-body .wrap-assessment-criteria .title{
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 13px;
  }
  .review-body .wrap-assessment-criteria ul li{
    color: rgb(116, 116, 128);
    font-size: 14px;
    font-weight: 300;
  }
  .review-body .wrap-assessment-criteria ul{
    padding-inline-start: 20px;
  }
  .review-body .wrap-assessment-criteria ul li::marker{
    color: rgb(46, 46, 56);
  }
  .review-body .supporting-documents{
    width: 50%;
  } 
  .review-body .supporting-documents .header {
    display: flex;
    justify-content: space-between;
    padding-top: 11px;
    padding-bottom: 21px;
    align-items: center;
  } 
  .review-body .supporting-documents .header .title {
    color: rgb(46, 46, 56);
    font-size: 18px;
    font-weight: 300;
  }
  .review-body .supporting-documents .header .chip {
    color: #fff;
    background: rgb(32, 32, 43);
    border-radius: 10px;
    height: 18px;
    width: 30px;
    border: none;
    cursor: default;
    display: inline-flex;
    outline: 0;
    padding: 0;
    font-size: 12px;
    box-sizing: border-box;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    margin-right: 8px;
  }
  .review-body .supporting-documents .header .wrap-count{
    display: flex;
    align-items: center;
  }
  .review-body .supporting-documents .header .total{
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: normal;
  }
  .review-body .supporting-documents .table-doc{
    width: 100%;
    border-collapse: collapse;
  }
  .review-body .supporting-documents .table-doc thead {
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: bold;
    text-align: justify;
    height: 45px;
    border-top: 1px solid rgb(46, 46, 56);
    border-bottom: 1px solid rgb(234, 234, 242);
  } 
  .review-body .supporting-documents .table-doc thead tr {
    height: 45px;
  }
  .review-body .supporting-documents .table-doc .thead-file-type {
    padding-left: 13px;
    white-space: nowrap;
    padding-right: 64px;
  } 
  .review-body .supporting-documents .table-doc .file-type {
    padding-left: 30px;
  }
  .review-body .supporting-documents .table-doc .file-type .wrap-icon {
    width: 20px
  }
  .review-body .supporting-documents .table-doc tbody tr:nth-child(odd) {
    background: rgb(250, 250, 252);
  }
  .review-body .supporting-documents .table-doc tbody tr {
    height: 61px;
  }
  .review-body .supporting-documents .table-doc tbody tr td {
    font-size: 12px; 
    font-weight: 300;
  }
  .review-body .supporting-documents .table-doc .file-name, .review-body .supporting-documents .table-doc .file-category {
    word-break: break-word;
  }
​
  
  
  .review-body .foot{
    padding: 10px 22px;
    display: flex;
    align-items: center;
    background: rgb(246, 246, 250);
  } 
  .review-body .foot .IWS{
    color: rgb(46, 46, 56);
    font-size: 25px;
    font-weight: bold;
    margin-right: 17px;
  }
  .review-body .foot .copyright{
    color: rgb(46, 46, 56);
    font-size: 12px;
    font-weight: 300;
  }  
​
</style>
<div class="review-body">
  <div class="content">
    <div class="header-logo">
    
<!--   to display the logo, use img or svg-->
​
<!--      <img alt="logo" src="/static/media/logo-header.a5192556.svg" class="logo-catalyst">-->
​
      <p class="title-catalyst">Catalyst</p>
      
      <!--   to display the logo, use img or svg-->
      
<!--      <img alt="logo" src="/static/media/logo-header.a5192556.svg" class="logo-company">-->
      
    </div>
    <hr>
    <div class="header-pathway-category-suite">
      <div class="item">
        <div class="title">Pathway</div>
        <div class="name">Autonomous Maintenance</div>
      </div>
      <div class="item">
        <div class="title">Category/suite</div>
        <div class="name">IWS</div>
      </div>
    </div>
    <hr>
    <div class="wrap-info">
        <div class="info"><strong>Stage 2: </strong>Implementation Action</div>
        <div class="info"><strong>Theme: </strong>Culture of Standard Work</div>
        <div class="info"><strong>2IA1: </strong>Develop the Run-to-Target Accelerator Deployment Plan for the Line on the Smart Deployment Console</div>
    </div>
    <div class="wrap-overview">
        <div class="title">Overview</div>
        <div class="description">
        The Run-to-Target (RTT) Accelerator guides the line team through the deployment of RTT systems and capabilities. The deployment of RTT is planned and managed through the EY Catalyst Smart Deployment Console (SDC). A baseline assessment is conducted in the SDC to understand the current situation on the line. This assessment identifies capability gaps, and the SDC automatically generates a plan to close any existing gaps. 
        </div>
    </div>
    <div class="wrap-process">
      <div class="title">Process steps and execution</div>
      <div class="expand-all">
​
        
        <div class="name expand">Expand all</div>
        <div class="name collapse">Collapse all</div>
      </div>
      <div class="item ">
        
        <div class="name">Step 01: Create a new area for the line in the Smart Deployment Console (SDC)</div>
        <div class="description">
        The Smart Deployment Console (SDC) contains an area tree that reflects the organization’s structure. When a new area starts implementation of the integrated work system (IWS), the area must be added to the area tree to provide the line team with a workspace within the application. Areas are created and managed in the Client Admin Console. New areas will typically be created by the SDC Administrator for the site. The area should be created in line with any existing naming conventions that are already in use. The area should also be assigned an appropriate area category.
        </div>
      </div>
      <div class="item">
        
        <div class="name">Step 01: Create a new area for the line in the Smart Deployment Console (SDC)</div>
        <div class="description">
        The Smart Deployment Console (SDC) contains an area tree that reflects the organization’s structure. When a new area starts implementation of the integrated work system (IWS), the area must be added to the area tree to provide the line team with a workspace within the application. Areas are created and managed in the Client Admin Console. New areas will typically be created by the SDC Administrator for the site. The area should be created in line with any existing naming conventions that are already in use. The area should also be assigned an appropriate area category.
        </div>
      </div>
    </div>
    <div class="wrap-assessment-criteria">
     <div class="title">Assessment criteria</div>
       <ul>
         <li>
         A baseline assessment has been completed in the Smart Deployment Console (SDC).
         </li>
        <li>
        A deployment plan has been created in the Smart Deployment Console (SDC), and updates are scheduled on a weekly cycle. Assessments and key performance indicator (KPI) updates are scheduled on a monthly cycle.
        </li>
        <li>
       Assessments and key performance indicator (KPI) updates are scheduled on a monthly cycle.
        </li>
       </ul>
    </div>
    <div class="supporting-documents">
        <div class="header">
          <div class="title">Supporting documents</div>
          <div class="wrap-count">
            <div class="chip">4</div>
            <div class="total">Total files attached</div>
          </div>
        </div>
        <table class="table-doc">
          <thead>
            <tr>
              <th class="thead-file-type">
                File Type
              </th> 
              <th>
                Name
              </th>
              <th>
                Category
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="file-type">
                <div class="wrap-icon">
                 </div>
              </td>
              <td class="file-name">                    LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongName.pdf                  
              </td>
              <td class="file-category">  longNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategoryLongNameCategory
              </td>
            </tr>
            <tr>
              <td class="file-type">
                <div class="wrap-icon">
                  </div>
              </td>
                <td>
                fileName.pdf
                </td>
                <td>
                Delor
                </td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>
  <div class="foot">
    <span class="IWS">IWS</span>
    <span class="copyright"> Copyright © EY Catalyst Limited 2020 or used under license. This
      information may not be used or disclosed in whole or in part for
      any purpose other than as permitted in the Terms of Service.</span>
     
  </div>
</div>
<script>
document.querySelector(".review-body .wrap-process .expand-all").addEventListener("click", function() {
  this.classList.toggle("collapse");
  const expandAllHasClass = this.classList.contains('collapse')
  document.querySelectorAll(".review-body .wrap-process .item").forEach((coll)=>{
      if(expandAllHasClass){
        coll.classList.add("collapse") 
      } else {
        coll.classList.remove("collapse")
      } 
  });
})
document.querySelectorAll(".review-body .wrap-process .item").forEach((coll)=>{
  coll.addEventListener("click", function() {
      this.classList.toggle("collapse");
      const expandAll = document.querySelector(".review-body .wrap-process .expand-all")
      const item = document.querySelectorAll(".review-body .wrap-process .item")
      const itemCollapse = document.querySelectorAll(".review-body .wrap-process .item.collapse")
      if(item.length === itemCollapse.length){
        expandAll.classList.add("collapse") 
      } else {
        expandAll.classList.remove("collapse") 
      }
  });
})
</script>
</div>
​
​
</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

10
20

Cached Result
Last Run:	8:28:46 pm
Compile:	0.121s
Execute:	0s
Memory:	0b
CPU:	0.016s

View IL Code