ASP.NET MVC5从局部视图调用JavaScript函数

Question

我想从MVC5局部视图调用向其传递参数的JavaScript函数。

我已经在$(document).ready(function {})函数之前在文件顶部的单独JS文件中声明了addItem(item) $(document).ready(function {})函数。

我尝试了以下代码：

@foreach (string item in (TempData["Items"] as List<string>))
{
    TempData["Item"] = item;
    <script type="text/javascript">addItem(@TempData["Item"]);</script>
}

以及以下内容：

@foreach (string item in (TempData["Items"] as List<string>))
{
    <script type="text/javascript">addItem(item);</script>
}

两种尝试均以以下错误结束： Uncaught ReferenceError: theValueOfMyItem is not defined 。

我什至尝试了这个：

@foreach (string item in (TempData["Items"] as List<string>))
{
    addItem(item);
}

但是，正如所料，这给了我错误The name 'addItem' does not exist in the current context 。

所以我的问题是：

我可以从局部视图中调用带有参数的JS函数吗，如果可能的话，正确的方法是什么？

编辑1

根据CarstenLøvboAndersen和Satpal的建议，我得到以下错误： Uncaught TypeError: addItem is not a function 。

这是我定义函数的方式：

function addItem(item) {
    // processing...
}

Answer 1

在您的Partial View 1st中，将Items List转换为Javascript Array，并使用javascript for循环调用您的addItem方法。

<script type="text/javascript">
    $(function(){
        var itemArray = @Html.Raw(Json.Encode(TempData["Items"] as List<string>));

        for (var item in itemsArray) {
            //call your javascript method with param item
            addItem(item);
        }
    })
</script>

C＃ foreach循环的另一个选择

<script type="text/javascript">
        $(function () {
            @foreach (var item in (TempData["Items"] as List<string>))
            {   //your javascript method with param item.
                @:addItem(@item);
            }
        })
</script>

要么

<script type="text/javascript">

    $(function () {
        var itemsArray = [];
        @foreach (var item in (TempData["Items"] as List<string>))
        {
            @:itemsArray.push("@item");
        }


        for (var item in itemsArray) {
            //call your javascript method with param item
            addItem(item);
        }
    })


</script>

Answer 2

您需要将引号中的item传递为字符串，否则将被视为变量，从而导致错误。

<script>addItem("@item");</script>

Answer 3

在布局页面中，定义一个部分：

@RenderSection("Scripts", false)

现在，您可以将您的代码从Partial直接呈现到该部分

<div>Some DIV</div>
@section Scripts
{
    <script>
        @foreach (string item in (TempData["Items"] as List<string>))
        {
            addItem('@item');
        }
    </script>
}
<div>Some DIV</div>
<!-- You can mix it up. Everything outside of the @section will be treated as normal markup. -->

也许您介意阅读这篇文章http://www.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm

Answer 4

您可以做的是，将数据放在全局变量中

 `<script>
    var items = @(TempData["Items"] as List<string>); 
    foreach (var item in items)
    {
        addItem(item);
    }
  </script>`