How to create a master details page in asp net core razor page

Introduction

ASP.NET is a popular programming language used for developing web applications. One common requirement in web development is to create a master details page, where a list of items is displayed on one side, and the details of the selected item are shown on the other side. In this article, we will explore how to create a master details page in ASP.NET Core Razor Pages.

Step 1: Create a new ASP.NET Core Razor Pages project

To begin, let's create a new ASP.NET Core Razor Pages project. Open Visual Studio and “Create a new project”. Choose “ASP.NET Core Web Application” and select the “Razor Pages” template. Give your project a name and click “Create”.


// ASP.NET Core Razor Pages code goes here

Step 2: Create a model and database

Next, we need to create a model to represent our data and a database context to interact with the database. In this example, let's assume we have a “Product” model with properties like “Id”, “Name”, and “Price”. Create a new called “Models” and add a new class called “Product.cs”.


// Product.cs
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Next, create a new folder called “Data” and add a new class called “AppDbContext.cs”. This class will inherit from the “” class provided by Entity Framework Core.


// AppDbContext.cs
public class AppDbContext : DbContext
{
    public DbSet Products { get; set; }

     override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.UseSqlServer("your_connection_string_here");
    }
}

Step 3: Create Razor Pages

Now, let's create the Razor Pages for our master details page. In the “Pages” folder, add a new Razor Page called “Index.cshtml”. This page will display the list of products.


// Index.cshtml
@page
@model IndexModel

Products

@ (var product in Model.Products) { }
Name Price
@product.Name @product.Price

Next, add a new Razor Page called “Details.cshtml”. This page will display the details of a selected product.


// Details.cshtml
@page
@model DetailsModel

Product Details

@Model.Product.Name

Price: @Model.Product.Price

Step 4: Implement the Razor Page models

Now, let's implement the Razor Page models for our master details page. In the “Pages” folder, add a new class called “Index.cshtml.cs”. This class will handle the logic for the “Index.cshtml” page.


// Index.cshtml.cs
public class IndexModel : PageModel
{
     readonly AppDbContext _dbContext;

    public IndexModel(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public List Products { get; set; }

    public void OnGet()
    {
        Products = _dbContext.Products.ToList();
    }
}

Next, add a new class called “Details.cshtml.cs”. This class will handle the logic for the “Details.cshtml” page.


// Details.cshtml.cs
public class DetailsModel : PageModel
{
    private readonly AppDbContext _dbContext;

    public DetailsModel(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public Product Product { get; set; }

    public void OnGet(int id)
    {
        Product = _dbContext.Products.FirstOrDefault(p => p.Id == id);
    }
}

Step 5: Configure routing

Finally, we need to configure routing in our application to map the URLs to the Razor Pages. Open the “.cs” file and add the following code inside the “ConfigureServices” method:

Next, add the following code inside the “Configure” method:


// Startup.cs
public void Configure( app, IWebHostEnvironment env)
{
    // ...

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
    });
}

Conclusion

In this article, we have learned how to create a master details page in ASP.NET Core Razor Pages. We started by creating a new ASP.NET Core Razor Pages project and then proceeded to create a model and database context. We then created the Razor Pages and implemented the Razor Page models. Finally, we configured routing to map the URLs to the Razor Pages. By following these steps, you can easily create a master details page in ASP.NET Core Razor Pages for your web application.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents