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

Question

I have a view with a ViewModel, that contains a C# list. I want to fill this into a Knockout observableArray.

My viewModel:

public class PartnerInvoiceOverviewViewModel
    {

        public List<PartnerInvoiceViewModel> PartnerInvoices { get; set; }
}

This C# object, PartnerInvoiceOverviewViewModel, is here:

public class PartnerInvoiceViewModel
{

    public string PdfUrl { get; set; }
    public DateTime InvoiceDate { get; set; }
    public string CustomerName { get; set; }
    public string Currency { get; set; }
    public decimal Amount { get; set; }
}

Now, what I want to do, is to build up the Knockout object.

Right now I have the following hardcoded in my Knockout viewmodel:

self.invoices = ko.observableArray([
    new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf", "not printed"),
    new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf", "not printed")
]);

I want to move this out in a foreach loop in the view. Therefore, I thought about moving this into the data object, my viewmodel takes as a parameter.

I have started my code in the view here:

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

                [ 'invoiceDate':invoice.InvoiceDate, 'customerName':invoice.CustomerName]

        }
    ];

    var data = {
        dateFrom: dateStart,
        dateTo: dateToday,
        invoiceData: invoices
    };

    // apply knockout bindings
    var economicViewModel = new EconomicsViewModel('#economicInvoiceOverview', data);
    ko.applyBindings(economicViewModel, document.getElementById(economicInvoiceOverview));

My problem is this kind of syntax doesn't compile. How do I combine the Razor templating while adding JS objects like this?

EDIT:

Updated view code:

var invoices = [
    @foreach (var invoice in Model.PartnerInvoices)
    {
        <text>[{'invoiceDate':'@invoice.InvoiceDate', 'customerName':'@invoice.CustomerName', 'pdfLink':'@invoice.PdfUrl', 'status':'N/A'}]</text>
    }
];

EDIT #2:

generated HTML+JS:

   var invoices = [
            [{'invoiceDate':'06-01-2014 00:00:00', 'customerName':'Dream Company', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'03-01-2014 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'18-12-2013 00:00:00', 'customerName':'Famlab', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'04-12-2013 00:00:00', 'customerName':'Schmidt &amp; Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'21-11-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'06-11-2013 00:00:00', 'customerName':'Plumber &amp; Parts', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'09-10-2013 00:00:00', 'customerName':'Optician Services', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'17-09-2013 00:00:00', 'customerName':'Dream Company', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'05-09-2013 00:00:00', 'customerName':'Lawyer Office', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'15-08-2013 00:00:00', 'customerName':'Famlab', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'18-07-2013 00:00:00', 'customerName':'Dream Company', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-07-2013 00:00:00', 'customerName':'East Furniture Factory', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'27-06-2013 00:00:00', 'customerName':'Plumber &amp; Parts', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'05-06-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'13-05-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'08-05-2013 00:00:00', 'customerName':'Lawyer Office', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'01-05-2013 00:00:00', 'customerName':'Q. P. Audit Firm', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'21-04-2013 00:00:00', 'customerName':'East Furniture Factory', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'16-04-2013 00:00:00', 'customerName':'Plumber &amp; Parts', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-04-2013 00:00:00', 'customerName':'Expotium GmbH', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-04-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'21-03-2013 00:00:00', 'customerName':'Dream Company', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'21-03-2013 00:00:00', 'customerName':'Famlab', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'05-03-2013 00:00:00', 'customerName':'Lawyer Office', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'15-02-2013 00:00:00', 'customerName':'Q. P. Audit Firm', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'13-02-2013 00:00:00', 'customerName':'Lawyer Office', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'13-02-2013 00:00:00', 'customerName':'Optician Services', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'24-01-2013 00:00:00', 'customerName':'Optician Services', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'20-01-2013 00:00:00', 'customerName':'Schmidt &amp; Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-01-2013 00:00:00', 'customerName':'Schmidt &amp; Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'07-01-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'02-01-2013 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'03-07-2012 00:00:00', 'customerName':'Schmidt &amp; Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'01-07-2012 00:00:00', 'customerName':'Expotium GmbH', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'22-06-2012 00:00:00', 'customerName':'Famlab', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'12-06-2012 00:00:00', 'customerName':'Q. P. Audit Firm', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-06-2012 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'15-05-2012 00:00:00', 'customerName':'The Dream Company', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-05-2012 00:00:00', 'customerName':'Expotium GmbH', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'26-04-2012 00:00:00', 'customerName':'The Furniture Factory', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'22-04-2012 00:00:00', 'customerName':'Schmidt &amp; Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'04-04-2012 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'22-03-2012 00:00:00', 'customerName':'Famlab', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'03-03-2012 00:00:00', 'customerName':'The Lawyer Office', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'14-02-2012 00:00:00', 'customerName':'Expotium GmbH', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'02-02-2012 00:00:00', 'customerName':'The Plumber', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'12-01-2012 00:00:00', 'customerName':'The Optician', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-01-2012 00:00:00', 'customerName':'Datahouse Ltd.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
    ];

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

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>

edited May 23 '17 at 12:27

Community

1
1

answered May 17 '14 at 11:37

CodeCaster

147,647
23
218
272

I took your inspiration and started to build the array. I got the Razor thing to work, but it seems the JS syntax I made is wrong? I have attached the attempt I have above (under Edit). Is that JS-syntax wrong? I get a TypeError in FireBug – Lars Holdgaard May 17 '14 at 11:57
I can't see the HTML/JS this generates nor your FireBug, so I wouldn't know. – CodeCaster May 17 '14 at 11:58
Sorry. I added the generated HTML/JS now – Lars Holdgaard May 17 '14 at 12:00
1

I think you'll need a comma after each array element. – CodeCaster May 17 '14 at 12:01
1

Ofcourse! Thanks a lot for the help :-) I learned things in the process. have a nice saturday! – Lars Holdgaard May 17 '14 at 12:03

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

1 Answers1