• Status: Solved
  • Priority: High
  • Security: Private
  • Views: 35
  • Last Modified:

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

1
Robb Hill
Asked:
Robb Hill
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now