Changing html rendering of ListItems using razor syntax

I have the following html on my cshtml file.   I need the li data-step="1" to be hidden and data-step="2" to have the class="active"
when my Model.SiteName.Contacains("subscibersite_")

Please help

Here is the existing code:

 <div class="wizard" data-initialize="wizard" id="myWizard">
                                    <ul class="steps">
                                        <li data-step="1" class="active"><span class="badge">1</span>Folder Selection<span class="chevron"></span></li>
                                        <li data-step="2"><span class="badge">2</span>Select File(s)<span class="chevron"></span></li>
                                        <li data-step="3"><span class="badge">3</span>Notifications and Notes<span class="chevron"></span></li>
                                        <li data-step="4"><span class="badge">4</span>Upload Files<span class="chevron"></span></li>
                                    </ul>

Open in new window


or if there was a way to do something like this too...

<div class="wizard" data-initialize="wizard" id="myWizard">
                                    <ul class="steps">
                                        @if (!Model.SiteName.Contains("subscribersite_"))                              
                                        { 
                                            <li data-step="1" class="active"><span class="badge">1</span>Folder Selection<span class="chevron"></span></li>
                                            <li data-step="2"><span class="badge">2</span>Select File(s)<span class="chevron"></span></li>
                                            <li data-step="3"><span class="badge">3</span>Notifications and Notes<span class="chevron"></span></li>
                                            <li data-step="4"><span class="badge">4</span>Upload Files<span class="chevron"></span></li>                                            
                                        }
                                        else 
                                        {
                                            <li data-step="1" class="active"><span class="badge">1</span>Select File(s)<span class="chevron"></span></li>
                                            <li data-step="2"><span class="badge">2</span>Notifications and Notes<span class="chevron"></span></li>
                                            <li data-step="3"><span class="badge">3</span>Upload Files<span class="chevron"></span></li>
                                       
                                        }
                                    </ul>

Open in new window

LVL 11
Robb HillSenior .Net DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Set in the ul element a data attr to set the Model.SiteName.Contacains("subscibersite_") value.Then via Jquery you can do if conditions to hide ro set classes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
 <div class="wizard" data-initialize="wizard" id="myWizard" data-check="Here_echo_the --->Model.SiteName.Contains('subscribersite_')">
                                    <ul class="steps">
                                        <li data-step="1" class="active"><span class="badge">1</span>Folder Selection<span class="chevron"></span></li>
                                        <li data-step="2"><span class="badge">2</span>Select File(s)<span class="chevron"></span></li>
                                        <li data-step="3"><span class="badge">3</span>Notifications and Notes<span class="chevron"></span></li>
                                        <li data-step="4"><span class="badge">4</span>Upload Files<span class="chevron"></span></li>
                                    </ul>
  </div>

<!-- End your code here -->
  <script>
    //Get the data-check value that you echo at html ul element
var flag=$('#myWizard').data('check');
//The if condition checks and hide or set the class depending of the data-step value
if( flag==='set the value that you want to check here'){
  $('li[data-step="1"]').hide();
  $('li[data-step="2"]').addClass('active');
}
  </script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robb HillSenior .Net DeveloperAuthor Commented:
put the following in my script tag at the bottom of my page:


//Get the data-check value that you echo at html ul element
        var flag = $('#myWizard').data('check');
		alert(flag);
        //The if condition checks and hide or set the class depending of the data-step value
        if (flag === 'subscribersite_') {
		alert(flag);
            $('li[data-step="1"]').hide();
            $('li[data-step="2"]').addClass('active');
        }

Open in new window


I also rewrote what you sent like so:

 <div class="wizard" data-initialize="wizard" id="myWizard" data-check="Model.SiteName.Contains('subscribersite_')">
                                    <ul class="steps">
                                        <li data-step="1" class="active"><span class="badge">1</span>Folder Selection<span class="chevron"></span></li>
                                        <li data-step="2"><span class="badge">2</span>Select File(s)<span class="chevron"></span></li>
                                        <li data-step="3"><span class="badge">3</span>Notifications and Notes<span class="chevron"></span></li>
                                        <li data-step="4"><span class="badge">4</span>Upload Files<span class="chevron"></span></li>
                                    </ul>

Open in new window



I am not getting any alerts...its like its not executing the script
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.