I have looked through several posts but have not found an answer that actually solves this issue so I am asking whilst trying to provide the most pertinent details.

I have a very simple script file called custom.js ...

function AddListItemToUnorderedList(pageCode, menuName) {
    $('.child_nav').append('<li><a href="' + pageCode + '"><span>' + menuName + '</span></a></li>');
} 

I have made reference to that script in my partial page.

<script type="text/javascript" src="~/Scripts/custom.js"></script>

@{
   Layout = null;
 }

 <ul class="child_nav" style="display: none;"></ul>

 @foreach (var item in ViewBag.MenuItems)
 {
     @Html.Raw("<script type='text/javascript'>")
     @Html.Raw("AddListItemToUnorderedList('")
     @item.PageCode
     @Html.Raw("', '")
     @item.MenuName
     @Html.Raw("');")
     @Html.Raw("</script>")
 }

The above code works but it looks terrible AND it adds a script tag to the markup for each item in the MenuItems collection. The MenuItems collection simply contains a list of two strings correlating to my menu's display name and html link....consider this to be populated with something as simple as Test Page for the name and myTestPage for the link.

I have see some shortcut syntax like this

@: AddListItemToUnorderedList(item.PageCode, item.MenuName)

however, I am not able to get that to work no matter what I try.

Any clear suggestions that work that will allow me to make a direct call to the JavaScript function passing in the two properties from the ViewBag where I don't have to create the script tags and use @Html.Raw?

I have looked through several posts but have not found an answer that actually solves this issue so I am asking whilst trying to provide the most pertinent details.

I have a very simple script file called custom.js ...

function AddListItemToUnorderedList(pageCode, menuName) {
    $('.child_nav').append('<li><a href="' + pageCode + '"><span>' + menuName + '</span></a></li>');
} 

I have made reference to that script in my partial page.

<script type="text/javascript" src="~/Scripts/custom.js"></script>

@{
   Layout = null;
 }

 <ul class="child_nav" style="display: none;"></ul>

 @foreach (var item in ViewBag.MenuItems)
 {
     @Html.Raw("<script type='text/javascript'>")
     @Html.Raw("AddListItemToUnorderedList('")
     @item.PageCode
     @Html.Raw("', '")
     @item.MenuName
     @Html.Raw("');")
     @Html.Raw("</script>")
 }

The above code works but it looks terrible AND it adds a script tag to the markup for each item in the MenuItems collection. The MenuItems collection simply contains a list of two strings correlating to my menu's display name and html link....consider this to be populated with something as simple as Test Page for the name and myTestPage. for the link.

I have see some shortcut syntax like this

@: AddListItemToUnorderedList(item.PageCode, item.MenuName)

however, I am not able to get that to work no matter what I try.

Any clear suggestions that work that will allow me to make a direct call to the JavaScript function passing in the two properties from the ViewBag where I don't have to create the script tags and use @Html.Raw?

• javascript
• asp-mvc
• razor

• 4 You have an XSS vulnerability. – SLaks Commented Dec 20, 2016 at 22:02
• 2 Don't do that. Instead, put the values in data-* attributes & read them from JS. – SLaks Commented Dec 20, 2016 at 22:02
• I would appreciate a solution to the above question, not a re-engineer – Brian Evans Commented Dec 20, 2016 at 22:03
• 1 Not sure what's "not a re-engineer", but I'd suggest passing the entire MenuItems object as json into a JS function and doing the iteration there, (if you don't want razor creating the elements themselves as SLaks suggests) – Will P. Commented Dec 20, 2016 at 22:07
• You don't need to put the script tags inside the foreach; just put the opening tag before and the closing tag after. As long as everything within your foreach is writing JavaScript code, that should be sufficient. – Heretic Monkey Commented Dec 20, 2016 at 22:08

1 Answer 1

Something like the below should work. Pull out the script tags from the foreach, and then reference the javascript. You'll also have to put <text></text> tags around the javascript and quotes around the variables so they will transfer correctly:

<script type='text/javascript'> 
@foreach (var item in ViewBag.MenuItems)
{
    <text>AddListItemToUnorderedList('@item.PageCode', '@item.MenuName')</text>
}
</script>