CODEWITHSUNDEEP
javascriptasp.net-mvcrazor
Ricardo
Ricardo

Reputation: 442

CS0103: The name ' ' does not exist in the current context (javascript)

Why to run this code it of the following error: And how would I do to count the repetitions within the foreach ?

CS0103: The name 'c' does not exist in the current context

if (c == 5) {

<script>

        $(document).ready(myFunction())

        function myFunction() {

            var table = document.getElementById("tbVideos");
            var c = 5;

            @foreach (var item in Model) {

                if (c == 5) {
                    c = 0;
                    var row = table.insertRow(c);
                }
                var cell1 = row.insertCell(c);
                call1.innerHTML = Html.DisplayFor(modelItem => item.ID_TERCEIRO);
                c = c + 1;
            }
        }
</script>

Upvotes: 0

Views: 11137

Answers (3)

beautifulcoder
beautifulcoder

Reputation: 11320

You are mixing JavaScript and Razor together, why aren't you just rendering the table? For example:

@foreach (var item in Model) {
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>@Html.DisplayFor(item => item.ID_TERCEIRO)</td>
    </tr>
}

All this doesn't need JavaScript, just Razor.

Everything inside the @foreach() becomes a server-side code block. The engine is expecting c inside the code block.

Upvotes: 3

Ben Burns
Ben Burns

Reputation: 15206

The reason for your error message is that @foreach becomes a server-side directive with Razor. The server is only interpreting the contents of the @foreach block, not rest of your myFunction. Because of this, there is no valid definition for c on the server when it executes the @foreach logic.

If you use Array.forEach instead, it will run on the client side. You can then pass an anonymous function to it in line with the method call, which will close over your original definition of c.

Also as others have said, don't pass the return value of myFunction to $(document).ready - pass the function itself (see comment below).

Finally, a word on best practices. It's usually an antipattern to use innerHTML unless you're writing some modularized UI widget. This is especially true when you have server-side template rendering built into your stack. By that I mean that beautifulcoder's advice is more correct for this particular example below. That is, you are likely better off to use Razor for rendering your HTML on the server side directly. Client side rendering wouldn't be too egregious however if you were using it to update data w/o a page refresh rather than as a one-shot when the ready event fires (though in that case you're better off to use a JS lib with proper data binding such as knockoutjs).

<script>

        // note: pass function to handler, not return of function
        $(document).ready(myFunction) 

        function myFunction() {

            var table = document.getElementById("tbVideos");
            var c = 5;

            Model.forEach(function(item) {

                if (c == 5) {
                    c = 0;
                    var row = table.insertRow(c);
                }
                var cell1 = row.insertCell(c);
                call1.innerHTML = Html.DisplayFor(modelItem => item.ID_TERCEIRO);
                c = c + 1;
            });
        }
</script>

Upvotes: 4

josegomezr
josegomezr

Reputation: 916

You're passing undefined as a DocumentReady callback and not the function, try this:

        $(document).ready(myFunction)

        function myFunction() {

            var table = document.getElementById("tbVideos");
            var c = 5;

            @foreach (var item in Model) {

                if (c == 5) {
                    c = 0;
                    var row = table.insertRow(c);
                }
                var cell1 = row.insertCell(c);
                call1.innerHTML = Html.DisplayFor(modelItem => item.ID_TERCEIRO);
                c = c + 1;
            }
        }

Upvotes: 0

Related Questions