Question

我有一个ViewModel的视图，它包含一个C＃列表。我希望将其填入Knockout observableArray。

我的viewModel ：

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对象中，我的viewmodel作为参数。

我已经在视图中启动了我的代码：

  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 &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'}]
    ];

Answer 1

使用<text>：

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

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

}
];

也许你可以做的少一些。或者如here所示使用@Html.Raw()：

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

将JavaScript对象与ASP.NET MVC Razor一起添加到数组的语法

1 个答案: