How can i create Master detail page in asp.net Core

Question

How can i display data in views in asp.net core MVC?.

I have the following json format data

[
    {
      "ProductID": "100000",
      "ProductName": "Product 1"
    },
    {
      "ProductID": "100001",
      "ProductName": "Product 2"
    },
    {
      "ProductID": "100002",
      "ProductName": "Product 3"
    },
    {
      "ProductID": "100002",
      "ProductName": "Product 4"
    }
]

I have this code to read the above json data,to read product information from the the above json data

public class GetProducts_Action : BaseEFAction<GetProducts_Action_Request, GetProducts_Action_Response>
    {
        public IFileProvider FileProvider { get; }

        public GetProducts_Action(ILogger<GetProducts_Action> logger, DBContext context, ITransactionManager scope, IFileProvider fileProvider) : base(logger, context, scope)
        {
            FileProvider = fileProvider;
        }

        protected override Task<GetProducts_Action_Response> PerformActionAsync(GetProducts_Action_Request request)
        {
            IList<ProductDTO> product;

            using (var file = System.IO.File.OpenText(FileProvider.GetFileInfo("Product.json").PhysicalPath))
            {
                var serializer = new JsonSerializer();
                product = (IList<ProductDTO>)serializer.Deserialize(file, typeof(IList<ProductDTO>));
            }

            return Task.FromResult(new GetProducts_Action_Response { Products = product });
        }
    }

    public class GetProducts_Action_Request : BaseActionRequest
    {

    }

    public class GetProducts_Action_Response : BaseActionResponse
    {
        public IList<ProductDTO> Products { get; set; }
    }
}

Interface:

public interface IProductService { Task<IList<ProductDTO>> GetProduct(); }

Controller Actions to display all products which works great

public IActionResult Index()
{
    return View();
}

[HttpGet]
public async Task<IActionResult> GetProducts()
{
    var products = await ProductsService.GetProducts();
    return Json(products);
}

I am able to display all products using the above code and works perfect, i also created a link to the detail page and URL looks like this localhost:3000/Product/Products/102.But how can get product information by id and display in the detail page?.

I tried this

   [HttpGet("{id}")]
public async Task<IActionResult> GetProductsDetail(int id)
{
    var product = (await ProductsService.GetProducts()).FirstOrDefault(a => a.ProductCode == id);
    if (product != null) {
        return Json(product);
    } else {
        return NotFound();
    }
}

but i get

Cannot implicitly convert type 'System.Collections.Generic.List to 'System.Collections.IList'

ProductList Structure

 public class ProductList
    {
       public string ProductCode { get; set; }
       public string ProductName { get; set; }
    }

I have Grid in the detail View as

 @model ProductList

                                <div class="row">
                                @(Html.Kendo().Grid<ProductList>()
                               .Name("grid")
                                .Columns(cols =>
                                {
                                      cols.Bound(ProductList => ProductList.ProductCode).Hidden(false).Title(Localizer["Column 1"].Value);
                                      cols.Bound(ProductList => ProductList.ProductName).Hidden(false).Title(Localizer["Column 2"].Value);
                                 })
                                //.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName(""))
                                .Excel(excel => excel
                                .FileName("Kendo UI Grid Export.xlsx")
                                .Filterable(true)
                                .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
                                )
                                .Navigatable(true)
                                .Filterable(f => f.Enabled(true).Mode(GridFilterMode.Row))
                                .Scrollable(s => s.Enabled(true))
                                .Sortable()
                                .PersistSelection()
                                .Pageable(pageable => pageable
                                .ButtonCount(5)
                                .Refresh(true)
                                .PageSizes(new[] { 5, 10, 20 }))
                                .DataSource(dataSource => dataSource
                                             .Custom()
                                             .PageSize(10)
                                             .Transport(transport => transport
                                             .Read(read => read.Action("GetProductsDetail", "Product"))

                                             ))
                                )

                            </div>

Answer 1

Firstly, You can get the result from this one

var listOfproducts = (await ProductsService.GetProducts().ToList());

After that, you can get value

var product = listOfproducts.FirstOrDefault(a => a.ProductCode == id);

Secondly, As I can see, GetProductsDetail is returning Json so you are getting by Ajax. If you want to redirect into a page:

1. In Index view:

@Html.ActionLink("You_Controller_Name", "GetProductsDetail", new { id = item.ID }) |

2. You should return return View(product); instead of Json.

Read the following post to have a better understanding

Get Started with Entity Framework 6 Code First using MVC 5

Passing Data from the Controller to the View