ASP.NET MVC5 Call JavaScript function from Partial View

Question

I want to call JavaScript function, to which I pass parameter, from MVC5 Partial view.

I have declared the function addItem(item) in separate JS file at the top of the file, before $(document).ready(function {}) function.

I have tried the following code:

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

And the following:

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

both tries end up with the following error: Uncaught ReferenceError: theValueOfMyItem is not defined .

I even tried this:

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

but as expected, this gives me error The name 'addItem' does not exist in the current context .

So my question is:

Can I call JS function with parameter from partial view, and if possible what is the proper way of doing this?

Edit 1

After the suggestions of Carsten Løvbo Andersen and Satpal I get the following error: Uncaught TypeError: addItem is not a function .

Here is how I defined the function:

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

Answer 1

In your Partial View 1st convert Items List into Javascript Array and use javascript for loop to call your addItem method.

<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>

another option with c# foreach loop

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

or

<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

In your Layout page define a section:

@RenderSection("Scripts", false)

and now you can render your code from your Partial directly to the section

<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. -->

Perhaps you mind reading this article http://www.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm

Answer 4

What you can do is, put your data in a global variable

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