RAZOR Javascript coding assistance

Question

I have the following JS code that I use to create an object:

var TransactionData = {
    orderId: '@Model.Order.SalesOrderNumber.SelfOrDefault().FullOrderNuber',
    curreny: "USD",
    total: '@Model.Order.TotalSalesPrice',
    items: [
        {
            @foreach (var item in Model.Order.LineItems)
            {
                sku: item.ProductId,
                quantity: item.Quantity,
                price: item.AdjustedUnitPrice
            }
    }]   
}

I need to loop through the LineItems in my Model to get the sku, quantity and price. There are 1 to x items that need to be created. Using the code above I get the error "; expected" after the comma in the sku:, quantity: and price: lines. Ultimately I am trying to get the following in the items:

{
  "price" : "140", 
  "quantity" : "1",
  "sku" : "156278"
},
{
  "price" : "12.69", 
  "quantity" : "3",
  "sku" : "908736" 
}

I think I am almost there I just need to fix this error. Any suggestions? I am rusty on JS on RAZOR so please bear with me.

Thanks.

You're mixing server-side and client-side code. The error is happening because you have JavaScript code in your C#. — David, Oct 10 '17 at 15:32
I would create TransactionData in my controller, pass it to the view as viewbag, use json.encode and you will get the object as json object. — Munzer, Oct 10 '17 at 15:33

score 0 · Answer 1 · answered Oct 10 '17 at 15:33

0

I believe the right way to manipulate javascript code within Razor is to encapsulate it with <text> tags.

See this post: Using Razor within JavaScript

Hope it solves your syntax errors!

answered Oct 10 '17 at 15:33

Frédéric Marcotte Piché

89
1
12

As the users commented above, I don't think the optimal way to manipulate your data is by using Razor to manipulate javascript, but if you're going to do it anyway, the tag should make it work. – Frédéric Marcotte Piché Oct 10 '17 at 15:36

score 0 · Accepted Answer · answered Oct 10 '17 at 15:39

This is being interpreted entirely as server-side code:

@foreach (var item in Model.Order.LineItems)
{
    sku: item.ProductId,
    quantity: item.Quantity,
    price: item.AdjustedUnitPrice
}

Which, of course, is a syntax error because those three lines are not valid C#. Instead, you want to treat those as client-side code with some server-side values emitted to the output. Something like this:

@foreach (var item in Model.Order.LineItems)
{
    <text>
    {
        sku: @item.ProductId,
        quantity: @item.Quantity,
        price: @item.AdjustedUnitPrice
    },
    </text>
}

Though, the more manual effort that you put into building your JavaScript structures in Razor code, the more you begin to justify just serializing the structures instead. This question is a good place to start with that. You can use any serializer you like, of course.

score 0 · Answer 3 · answered Oct 10 '17 at 20:25

Here is what I finally ended up with:

var items = [  
    @foreach (var item in Model.Order.LineItems)
        {
            <text>
                {
                    sku: '@item.Product.SKU',
                    quantity: '@item.Quantity',
                    price: '@item.AdjustedUnitPrice',
                    name: '@item.Product.Description.Name'
                },
            </text>
        }
];

This creates the array of items and then use:

items: items

to set the array and it works.

Thanks all.

RAZOR Javascript coding assistance

3 Answers3