34

So I'm trying to pass a parameter to a javascript function using the razor '@' notation (in an MVC-4 View) but I'm getting Syntax error: "Unterminated string constant"

Is there another way I should be writing this? 

@foreach (var item in Model)
{
 ...
    <input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID')" />
}

I've used the same syntax as this answer https://stackoverflow.com/a/5179316/1662619

Edit:

It's just a syntax error, the functionality still works

Community
  • 1
  • 1
Jimmy
  • 2,191
  • 6
  • 25
  • 45
  • Solution:- remove the single quotation around @item.ID – Kings Nov 17 '14 at 21:59
  • Instead of single-quotation, it's better to use of backtick(`) in javascript. this answer completely describes it. [backticks in razor pages](https://stackoverflow.com/a/54052399/7487135) – Iman Bahrampour Jan 05 '19 at 20:27

6 Answers6

43

If you can use JQuery .data()

<input type="button" value="Assign" onclick="AssignButtonClicked(this)" 
       data-assigned-id="@item.ID" />

Further it can be fetched using 

function AssignButtonClicked(elem){
     var id= $(elem).data('assigned-id');
}
Satpal
  • 132,252
  • 13
  • 159
  • 168
14

try this

 <input type="button" value="Assign"
   onclick="@("AssignButtonClicked('"+item.ID+"')")"  />
Amit
  • 15,217
  • 8
  • 46
  • 68
4

Try this,

 <input type="button" value="Assign" onclick="AssignButtonClicked(@item.ID);" />

Script

<script type="text/javascript">

 function AssignButtonClicked(obj) {
        alert(obj);
        return false;
    }
</script>
Jaimin
  • 7,964
  • 2
  • 25
  • 32
  • @Jim Barton It's perfectly working on my project.Can you show some code for `foreach` loop. – Jaimin Aug 19 '13 at 10:58
  • The input tag is inside a if that makes a difference? The rest of the loop just consists of @Html.DisplayFor(modelItem => item.Forename) rows etc.. – Jimmy Aug 19 '13 at 11:08
  • @Jim Barton unterminated string constant is beacause of missing a closing quotation mark.pretty sure you have made some mistake in the syntax.Check your `table`and your `foreach` loop i think you missing some `tr`,`td` or `some tag`. – Jaimin Aug 19 '13 at 11:18
2

As alternative, you may use the other way to get @item.ID in your jQuery function. Just add hiden span with it and get it's value in your function.

Say, you have list:

<ul>
@foreach (var item in Model)
{
 ...
   <li> <input type="button" value="Assign" onclick="AssignButtonClicked()" />
        <span class="hidenID">@item.ID</span>
</li>
}
</ul>

than in your script add:

<script>
$(document).ready(function(){
$('.hidenID').hide() //**hide your span
});

function AssignButtonClicked()
{
...
var id = $(this).closest('li').find('.hidenID').text();
...
}

</script>

But to my mind better approach for jQuery is as follows:

    <ul>
        @foreach (var item in Model)
        {
         ...
           <li> <input type="button" value="Assign" class="button" />
                <span class="hidenID">@item.ID</span>
        </li>
        }
        </ul>
    <script>
        $(document).ready(function(){
        $('.hidenID').hide() //**hide your span
        });

        $(function(){
         $('.button').click(function(){
        ...
         var id = $(this).closest('li').find('.hidenID').text();
        ...
        }
    });

});

    </script>
Andrey Gubal
  • 3,481
  • 2
  • 18
  • 21
0

You tried with:

<input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID');" />

I added a semicolon at the end of javascript function call AssignButtonClicked('@item.ID');

Daniele
  • 1,938
  • 16
  • 24
0

To avoid this kind of issue, you may build all your js function call in c# code section.

Instead of:

<input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID')" />

Use:

@{
  var assignFunctionCall = "AssignButtonClicked(" + item.ID + ")";
}
<input type="button" value="Assign" onclick="@assignFunctionCall " />
Bbone
  • 1
  • 1