Razor MVC Populating JavaScript Array with Model Array

Razor MVC Populating Javascript array with Model Array

This is possible, you just need to loop through the razor collection

<script type="text/javascript">

    var myArray = [];

    @foreach (var d in Model.data)
    {
        @:myArray.push("@d");
    }

    alert(myArray);

</script>

Pass Array from MVC to javascript?

This should do

var someArray=[<%foreach (var s in myStringArray){%>'<%=s%>',<%}%>];

Creating an array of JSON objects in JavaScript on a Razor page from custom viewmodel in MVC?

Try to pass this from Razor page to JavaScript.

@Html.Raw(@JsonConvert.SerializeObject(Model.DataPieces)
  .Replace("{\"", "{")
  .Replace(",\"", ",")
  .Replace("\":", ":"))

The replaces serve to get rid of the invalid characters produced by default in the converter without you needing to play with streams or applying other libraries. Ugly but working.

Sometimes, I also add one more replace: .Replace("\"","'") to get a more JS like look. The outer method is needed so you don't get problems with & in the "e;.

This is a hand-on solution so if anybody knows a better way, I'd love to get some feedback.

Syntax to add javascript objects to array in combination with ASP.NET MVC Razor

Use <text>:

var invoices = [
@foreach (var invoice in Model.PartnerInvoices)
{

    <text>[ 'invoiceDate':'@invoice.InvoiceDate', 
            'customerName':'@invoice.CustomerName'],</text>

}
];

Maybe you can do with a little less. Or use @Html.Raw() as shown here:

<script>
    var invoices = @Html.Raw(Json.Encode(Model.PartnerInvoices));
</script>

How to array from model to use it with jquery in mvc

I made a small example using Json.Encode:

@{
    var list = new List<TagItem>() {
        new TagItem() { TagName = "1" },
        new TagItem() { TagName = "2" },
        new TagItem() { TagName = "3" },
        new TagItem() { TagName = "4" },
        new TagItem() { TagName = "5" },
        new TagItem() { TagName = "6" },
        new TagItem() { TagName = "7" },
        new TagItem() { TagName = "8" }
    };

    var onlynames = list.Select(x => x.TagName);
}

@section Scripts {
    <script>
        var json = @Html.Raw(Json.Encode(list));
        var json1 = @Html.Raw(Json.Encode(onlynames));
    </script>
}

Variable json will be an array of TagItems and json1 will be an array of names.

Value of json

[Object, Object, Object, Object, Object, Object, Object, Object]

which every object will contain the property TagName inside it.

json1 will be directly a string.

["1", "2", "3", "4", "5", "6", "7", "8"]

populate razor table with javascript array in c#

You can not use Razor to render data received through AJAX. The reason is the page life cycle:

1) Controller action handles a request and returns a View.

2) View is rendered with Razor on the server side, the resulting HTML is delivered to the client.

3) Client receives the HTML and executes any embedded JavaScript on the client side. This includes any AJAX calls.

As you can see, at the time your JS code runs, any Razor syntax has been long converted to HTML. On the other hand, at the time Razor renders the View, no JS variables are available yet.

What you can do:

• the reply to your AJAX call returns finished HTML (instead of JSON) that has been rendered with Razor on the Server side.
• use a JS templating language like Mustache to render the JSON data on the client side using JS instead of Razor.

---

Related Topics