call JavaScript function inside razor foreach statement
<p>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.  </p>

<p>I have a very simple script file called custom.js ...</p>

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

<p>I have made reference to that script in my partial page.</p>

<pre><code>&lt;script type="text/javascript" src="~/Scripts/custom.js"&gt;&lt;/script&gt;

@{
   Layout = null;
 }

 &lt;ul class="child_nav" style="display: none;"&gt;&lt;/ul&gt;

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

<p>The above code works but it looks terrible AND it adds a <strong>script</strong> 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 <strong>Test Page</strong> for the name and <strong>myTestPage.com</strong> for the link.</p>

<p>I have see some shortcut syntax like this</p>

<pre><code>@: AddListItemToUnorderedList(item.PageCode, item.MenuName)
</code></pre>

<p>however, I am not able to get that to work no matter what I try.</p>

<p>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 <strong>script</strong> tags and use @Html.Raw?</p>