Create Nested WebGrid with Expand/Collapse in ASP.NET MVC 6

5 (100%) 1 vote

BestASPNETHostingReview.com | Best and cheap ASP.NET MVC 6 hosting. In this post, I am explain How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC6.
Steps :

Step – 1 : Create New Project

  • Go to File > New > Project > Select asp.net MVC6 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database

  • Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data

  • Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > OK.

In this example, I have used two tables as below

Step-4: Add Entity Data Model

  • Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
  • A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
  • Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a class for create a view model

  • 1st : Add a folder.
  • Go to Solution Explorer > Right Click on the project > add > new folder.
  • 2nd : Add a class on that folder
  • Go to Solution Explorer > Right Click on that folder > Add > Class… > Enter Class name > Add.

Write the following code in this class :

Step-6: Add a new Controller

  • Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete “empty MVC Controller”> Add.

Step-7: Add new action into your controller for show nested data in a webgrid

Here I have added “List” Action into “Order” Controller. Please write this following code

Step-8: Add view for the Action & design

  • Right Click on Action Method (here right click on form action) > Add View… > Enter View Name > Select View Engine (Razor) > Check “Create a strong-typed view” > Select your model class > Add.

NOTE ” Please Rebuild solution before add view :

I hope this article helpful for you, happy coding :)