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

score 1 · Answer 1 · answered Oct 31 '14 at 02:55

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 '14 at 02:55

tvanfosson

524,688
99
697
795

Thank's tvanfosson. I must be missing something. Your code won't work either. Within the – user2960038 Oct 31 '14 at 03:09
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. – Joseph Yaduvanshi Oct 31 '14 at 03:12
As for TGH's answer, the quotes are missing around the razor code - `var jsArr ='@Html.Raw(Json.Encode(arr))';` – Oct 31 '14 at 03:17
Thanks TGH! You were right. I forgot the quotes and that's what was throwing me off. It's all working great now. – user2960038 Oct 31 '14 at 03:18

TGH · Answer 2 · 2014-10-31T03:05:44.137

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 '14 at 03:05

answered Oct 31 '14 at 02:52

TGH

38,769
12
102
135

Thanks for the replay THG. I tried something like that, but it doesn't play well within the – user2960038 Oct 31 '14 at 02:56
There are a few more ideas here http://stackoverflow.com/questions/3365551/asp-net-mvc-how-to-convert-view-model-into-json-object – TGH Oct 31 '14 at 02:59
@TGH, I think you are missing quotes `var jsonObj = '@Html.Raw(Json.Encode(Model))';` – Oct 31 '14 at 03:03

score 0 · Answer 3 · answered Oct 31 '14 at 08:21

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

Combine MVC .NET Razor with Javascript to build an array

3 Answers3