adding js code with razor

Question

I am generating some tabs dynamically. I end up with 4 tabs. The class of the tabs is beeing set in the foreach loop, and it is set to be the languageId, as you can see in the code below.

<div id="tabs">
  <ul>
    @for (int i = 0; i < Model.NoteViewModel.NoteTextViewModels.Count(); i++)
    {                                                       
      var languageId = @Model.NoteViewModel.NoteTextViewModels[i].LanguageId;                               
      var imageName = string.Format("FlagSmall_{0}.gif", languageId);
      <li>
        <a href="#@languageId" class="@currentLanguage">
          <img src="@Url.Content("~/Graphics/" + imageName)" />
        </a>
      </li>                                                                                     
    }
  </ul>

Now I introduce a new variable: var currentLanguage = new NotesController().LogonInfo.LanguageId; which holds the current language of the user logged in. What I want to do, is to set focus on the tab where href (or id or class) is the same as the currentLanguage. For this I guess I need js, but since I can't have js code with razor syntax, I'm stuck. So I want something like this:

@for (int i = 0; i < Model.NoteViewModel.NoteTextViewModels.Count(); i++)
{                                                       
  var languageId = @Model.NoteViewModel.NoteTextViewModels[i].LanguageId;
  var currentLanguage = new NotesController().LogonInfo.LanguageId;                                
  var imageName = string.Format("FlagSmall_{0}.gif", languageId);                              
  <li>
    <a href="#@languageId">
      <img src="@Url.Content("~/Graphics/" + imageName)" />
    </a>
  </li>                    
  if (languageId == currentLanguage)
  {
    documentation.getElementById("currentLanguage").focus();
  }
}

How can I achieve this?

David · Accepted Answer · 2015-03-12 13:31:44Z

2

I can't have js code with razor syntax

Sure you can, though you may need to explicitly tell the view engine that this is client-side content and not server-side code. You can do this with the <text> tag. It's not an HTML tag per se, but something the razor engine uses to specify static content. Something like this:

<script type="text/javascript">
@for (int i = 0; i < Model.NoteViewModel.NoteTextViewModels.Count(); i++)
{
    <text>
    var someJavaScriptVariable = 'some value';
    // etc.
    </text>
}
</script>

answered Mar 12, 2015 at 13:31

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bellash Over a year ago

Your answer is correct but I'm sure this will result in a JavaScript error because someJavaScriptVariable will be defined already if Model.Note...Models.Count() is great than 1. I do suggest using an array outside the loop and push values inside the for loop

<script type="text/javascript">var someJavaScriptArray =[];</script> @for (int i = 0; i < Model.NoteViewModel.NoteTextViewModels.Count(); i++) {     <text><script type="text/javascript">someJavaScriptArray.push( 'some value');     // etc.    </script>     </text> }

Collectives™ on Stack Overflow

adding js code with razor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related