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

you want to use 'addItem(item)' function in partial view and the function is declared in MainView?? — Umair Anwaar
– Umair Anwaar, Commented Jan 16, 2017 at 10:32

Umair Anwaar · Accepted Answer · 2017-03-09 09:10:31Z

2

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>

edited Mar 9, 2017 at 9:10

answered Jan 16, 2017 at 11:59

Umair Anwaar

1,1469 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5967183 Over a year ago

Thank you Umair, but I already found different approach to solve my problem.

Satpal · Accepted Answer · 2017-01-05 11:18:57Z

0

You need to pass item in quotes to be treated as string otherwise it will be treated as variables, thus the error.

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

answered Jan 5, 2017 at 11:18

Satpal

134k13 gold badges168 silver badges171 bronze badges

3 Comments

user5967183 Over a year ago

What silly me, that I have missed that X.X, but still not working. Check my edit.

Satpal Over a year ago

@9-5xaero, addItem() is not accessible

user5967183 Over a year ago

but my function is declared in global scope (as I mentioned in the beginning of my question), how is this possible?

Martin E · Accepted Answer · 2017-01-05 12:30:53Z

0

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

edited Jan 5, 2017 at 12:30

answered Jan 5, 2017 at 12:07

Martin E

3199 silver badges18 bronze badges

3 Comments

user5967183 Over a year ago

Thank you Martin, but the foreach loop is only little part from my partial view.

Martin E Over a year ago

The sction is just a part of your partial view. i will update my anser

user5967183 Over a year ago

Thank you Martin, but this solution still do not work for me. Never mind, I will search for another solution to my problem :)

SoftwareNerd · Accepted Answer · 2017-01-05 12:52:14Z

0

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

answered Jan 5, 2017 at 12:52

SoftwareNerd

1,9058 gold badges29 silver badges63 bronze badges

1 Comment

user5967183 Over a year ago

Thank you SoftwareNerd, but the provided sample do not work. Never mind, I will search for another solution to my problem :)

Collectives™ on Stack Overflow

ASP.NET MVC5 Call JavaScript function from Partial View

Edit 1

4 Answers 4

1 Comment

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit 1

4 Answers 4

1 Comment

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related