So, i works in a project and i have a problem when i pass data from my view to my javascript,i have a foreach loop but always i get the last elements, this is my view :

 @foreach (var al in Model.alerts)
    { 
    <table border="0">
     <tr>
     <td rowspan=3><img src= '@Html.Raw(al.Owpicture)' class="img" alt="IMAGES"/></td>
     <td><label class="lb">@Html.Raw(al.cinOw)</label></td>
     </tr>
     <tr>
    <td><label class="lb">@Html.Raw(al.Owname)</label></td>
     </tr>
     <tr>
     <td><label class="lb">@Html.Raw(al.OwpermitNumber)</label></td>
     </tr>
    </table>
        <script>
            //this is variable to pass
            var carNum = '@Html.Raw(al.carNumber)';
        </script>
    <input type="submit" name="Report" value="Report" onclick="IsReport(carNum)" />

and this is my script code :

 function IsReport(carNum)
   {
       var url = '/Home/IsReport/' + carNum;
        $.ajax({
        type: "Post",
        url: url,
        data: {},
        datatype: 'json',
        success: function (data) { alert(carNum); },
    });
   }

i tried everything but always i get the last carNum, so please if someone have any idea i will be very appreciate .

So, i works in a project and i have a problem when i pass data from my view to my javascript,i have a foreach loop but always i get the last elements, this is my view :

 @foreach (var al in Model.alerts)
    { 
    <table border="0">
     <tr>
     <td rowspan=3><img src= '@Html.Raw(al.Owpicture)' class="img" alt="IMAGES"/></td>
     <td><label class="lb">@Html.Raw(al.cinOw)</label></td>
     </tr>
     <tr>
    <td><label class="lb">@Html.Raw(al.Owname)</label></td>
     </tr>
     <tr>
     <td><label class="lb">@Html.Raw(al.OwpermitNumber)</label></td>
     </tr>
    </table>
        <script>
            //this is variable to pass
            var carNum = '@Html.Raw(al.carNumber)';
        </script>
    <input type="submit" name="Report" value="Report" onclick="IsReport(carNum)" />

and this is my script code :

 function IsReport(carNum)
   {
       var url = '/Home/IsReport/' + carNum;
        $.ajax({
        type: "Post",
        url: url,
        data: {},
        datatype: 'json',
        success: function (data) { alert(carNum); },
    });
   }

i tried everything but always i get the last carNum, so please if someone have any idea i will be very appreciate .

• javascript
• jquery
• ajax
• asp-mvc-4

• 1 every time you loop through, you are overwriting carNum with the current value. – Evan Davis Commented Apr 28, 2013 at 19:45
• The key to understanding this is in being aware that the <script> blocks in which you set carNum are all executed at page rendering, and so only this variable takes the last value you set it to. So, by the time any onclick handler is run, it will always take this value. If you pass the value directly in the handler however, it will work. – halfer Commented Apr 28, 2013 at 19:48
• Incidentally, since you are using jQuery, it would be worth looking into an unobtrusive approach to attaching event functions - they're much better than legacy onclick handlers. – halfer Commented Apr 28, 2013 at 19:50
• That's some horrible HTML right there. A table for each object, incorrect use of the label element and a very helpful IMAGES alternative for the images. – powerbuoy Commented Apr 28, 2013 at 19:55

2 Answers 2

You need to try this way:-

<input type="submit" name="Report" value="Report" onclick="IsReport(@Html.Raw(al.carNumber))" />

What happens here in your code is that every iteration it will put the following in your html. and when you refer to the variable carnum it has the value from the last iteration.

<script>
            //this is variable to pass
            var carNum = '@Html.Raw(al.carNumber)';
        </script>

Another way is to use data attribute instead of using onclick event:-

<input type="submit" name="Report" value="Report" data-carnum="@al.carNumber" />

and in your script

$(function(){
$("input[name=Report]").on('click',function(){
....//some code
IsReport($(this).data('carnum'));
...///some code
});

});

    function IsReport()
       {
            $.ajax({
            type:"Post",
            url:'/Home/IsReport/' + carNum,
            datatype:'json',
            success:function (data) { alert(data.carNum); },
        });
       }

The above answer display's the data.carNum value.