结合 ASP.NET MVC Razor 将 javascript 对象添加到数组的语法

Question

我有一个带有 ViewModel 的视图，其中包含一个 C# 列表。我想将其填入淘汰赛observableArray。

我的视图模型：

public class PartnerInvoiceOverviewViewModel
    {

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

这个 C# 对象 PartnerInvoiceOverviewViewModel 在这里：

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; }
}

现在，我想做的是构建 Knockout 对象。

现在，我的 Knockout 视图模型中有以下硬编码：

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")
]);

我想将它移到视图中的 foreach 循环中。因此，我考虑将其移至data 对象中，我的视图模型将其作为参数。

我已在此处的视图中启动我的代码：

  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));

我的问题是这种语法无法编译。如何在添加这样的 JS 对象时结合 Razor 模板？

编辑：

更新视图代码：

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

编辑#2：

生成的 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 & 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 & 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 & 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 & 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 & Co.', 'pdfLink':'https://restapi.e-conomic.com/invoices/booked?pageSize=999', 'status':'N/A'}]
            [{'invoiceDate':'10-01-2013 00:00:00', 'customerName':'Schmidt & 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 & 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 & 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'}]
    ];

Answer 1

使用<text>:

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

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

}
];

也许你可以少做一点。或者使用@Html.Raw() 如图here：

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