Combine MVC .NET Razor with Javascript to build an array

Question

I'm passing a List from my controller to a view, where I want to be able to take the Model and loop through results in JQuery/Javascript. I'm having a heck of a time figuring out how to do that.

My controller returns a list of colors. In the view, I converted the List to an array. I then pass it to my where I'm trying to loop through it to build an array I can using in my JS.

<script>
$(document).ready(function () {

    var currentView = sessionStorage.getItem('lastView');
    var jsArr;
    for (i=0; i<@arr.Length; i++) {
        jsArr.push(@arr[i])
    }

    if (!currentView) {
        sessionStorage.setItem('lastView', 0);
        $("body").css("background-image", "url('/Images/Home/@arr[0].Location')");
    } else {

        sessionStorage.setItem('lastView', currentView++);
    }
})
</script>

There has to be an easy way of doing this...

tvanfosson · Accepted Answer · 2014-10-31 02:55:27Z

1

<script>
$(document).ready(function () {

    var currentView = sessionStorage.getItem('lastView');
    var jsArr = @Html.Raw(Json.Encode(arr)) ;

    if (!currentView) {
        sessionStorage.setItem('lastView', 0);
        $("body").css("background-image", "url('/Images/Home/@Html.Raw(arr[0].Location)')");
    } else {

        sessionStorage.setItem('lastView', currentView++);
    }
})
</script>

answered Oct 31, 2014 at 2:55

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

4 Comments

user2960038 Over a year ago

Thank's tvanfosson. I must be missing something. Your code won't work either. Within the <script> tags the var jsArr = @Html.Raw(Json.Encode(arr)) ";" semicolon flags a syntax error.

Jim Schubert Over a year ago

That's just a parsing error. Create a function called identity: function identity(val) { return val; } and do: var jsArr = identity(@Html.Raw(Json.Encode(arr))); if you want to get rid of the syntax error.

user3559349 Over a year ago

As for TGH's answer, the quotes are missing around the razor code - var jsArr ='@Html.Raw(Json.Encode(arr))';

user2960038 Over a year ago

Thanks TGH! You were right. I forgot the quotes and that's what was throwing me off. It's all working great now.

TGH · Accepted Answer · 2014-10-31 03:05:44Z

0

I would instead return json from the server. However if you want to do it in an html view I think something like this might work:

var jsonObj = '@Html.Raw(Json.Encode(Model.arr))'

//the loop is unnecessary, but can be useful if you need additional processing
var myArray = [];
for (i=0; i<jsonObj.length; i++) {
        myArray.push(jsonObj[i])
    }

edited Oct 31, 2014 at 3:05

answered Oct 31, 2014 at 2:52

TGH

39.4k13 gold badges106 silver badges140 bronze badges

3 Comments

user2960038 Over a year ago

Thanks for the replay THG. I tried something like that, but it doesn't play well within the <script> tags. I tried your code and replaced the arr you are encoding with my Model. Tying to use that within my JQuery block and it doesn't work. Not sure what I'm missing.

TGH Over a year ago

There are a few more ideas here stackoverflow.com/questions/3365551/…

user3559349 Over a year ago

@TGH, I think you are missing quotes var jsonObj = '@Html.Raw(Json.Encode(Model))';

AbdulG · Accepted Answer · 2014-10-31 08:21:26Z

0

Here is a way to manually build a JSON or JS object with razor code, some very easy to use code:

@foreach (var item in Model.Users)
    {
    <text>
    UserData[UserData.length] = {
        "UserID": '@item.ID', "FullName": '@item.Name'
    };
    </text>
    }

I purposefully showed model property names being used and JSON property names being different to show an advantage of manually building the array.

Also, in this case you would be able to send a model through with multiple collections of data. Then just iterate through that collection (@foreach (var item in Model.Users)) with your Razor code to build your JSON or Javascript object array

answered Oct 31, 2014 at 8:21

AbdulG

7551 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Combine MVC .NET Razor with Javascript to build an array

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related