javascript - 在 razor foreach 语句中调用 JavaScript 函数

Question

我浏览了几篇文章，但没有找到真正解决这个问题的答案，所以我在尝试提供最相关的细节的同时询问。

我有一个非常简单的脚本文件，名为 custom.js ...

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

我已在我的部分页面中引用了该脚本。

<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>")
 }

上面的代码可以工作，但看起来很糟糕，并且它向 MenuItems 集合中每个项目的标记添加了一个 script 标记。 MenuItems 集合仅包含与我的菜单的显示名称和 html 链接相关的两个字符串的列表......请考虑使用诸如 Test Page 等简单的内容填充名称和 myTestPage .com 链接。

我看到过一些像这样的快捷语法

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

但是，无论我如何尝试，我都无法让它发挥作用。

任何明确的建议都可以让我直接调用 JavaScript 函数，从 ViewBag 传递两个属性，而无需创建 script 标签并使用 @ Html.Raw？

Answer 1

像下面这样的东西应该可以工作。从foreach中取出script标签，然后引用javascript。您还必须输入 <text></text> javascript 周围的标签和变量周围的引号，以便它们能够正确传输:

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