Web grid in razor view

See more:

Razor

MVC4

I am working on asp.net mvc4 and razor. i am getting hte below data from database based on the productId=2.this is the single row data from database.My question is how can i display this single row data in web grid.Any body help me.

{"ProductId":2,"ProductInfo":[{"Key":"Size","Value":"small"},{"Key":"color","Value":"Gray"},{"Key":"Gender","Value":"Male"},{"Key":"Price","Value":"$150.00"},{"Key":"Desciption","Value":"Test Product Description--DY"},{"Key":"Rating","Value":"4"},{"Key":"Rating","Value":"4"}],"CategoryID":1,"ManufaturerId":3,"ItemNo":"sku1212","ProductName":"ECCO Womens Kawaii Sandals","DeletedInd":"N","medImagePath1":"/Images/SmallnlargeImg/sandal1_medium1.png","medImagePath2":"/Images/SmallnlargeImg/sandal1_medium2.png","medImagePath3":"/Images/SmallnlargeImg/sandal1_medium3.png","larImagePath1":"/Images/SmallnlargeImg/sandal1_large1.png","larImagePath2":"/Images/SmallnlargeImg/sandal1_large2.png","larImagePath3":"/Images/SmallnlargeImg/sandal1_large3.png","smaImagePath1":"/Images/SmallnlargeImg/sandal1_thumb1.png","smaImagePath2":"/Images/SmallnlargeImg/sandal1_thumb2.png","smaImagePath3":"/Images/SmallnlargeImg/sandal1_thumb3.png"}

I want to display below columns for grid

ProductId,CategoryID,ManufaturerId ,ItemNo,ProductName,DeletedInd,LastRefreshedDate,CreatedDate,LastRefreshedUserId,CreatedUserId,EffectiveBeginDate,EndDate,UPCCode,StoreID,SKU,SKUFullName,[SupplierCode] ,[SupplierCodeFullName]