Bervianto Leo Pratama for AWS Community Builders

Posted on Aug 23, 2022

Getting Started with Redis, Elastic Beanstalk, and Razor Pages (.NET 6)

#aws #redis #beginners #dotnet

Hello! How are you today? I'm going to share my exploration of Redis, Elastic Beanstalk, and Razor Pages in ASP.NET 6. So, let's check it out.

Required Tools

You will be required these tools. Please download and install it.

.NET 6
Docker
VS Code (Optional)

Project Preparation

You will need to prepare the project of Razor Pages. You can follow the steps below.

Generate the .gitignore. This will be useful when you are using a changes tracker like git.

dotnet new gitignore

Generate the Razor Project

dotnet new razor -o RedisSample

Generate the solution to link the root repository to the project directory.

dotnet new sln

Add the project to the solution.

dotnet sln add RedisSample

Install Redis.OM to the project.

dotnet add .\RedisSample\ package Redis.OM --version 0.2.1

Try to build, so we know the process is already done.

dotnet build

Time to Code!

If you want skip the step by step of coding steps, you may use this repository.

bervProject / redis-sample

Redis sample app

Redis Sample

Sample App using Redis as main databases.

Tools

.NET 6
Docker
VS Code (Optional)

Install Dependencies

dotnet restore

How to Run

Normal Run

dotnet run --project RedisSample

With File Watcher

dotnet watch --project RedisSample

Build

dotnet build

Publish

dotnet publish -o PublishedRedisSample

LICENSE

MIT

View on GitHub

Update the Program.cs like this.

using Redis.OM;
using RedisSample.HostedService;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton(new RedisConnectionProvider(builder.Configuration["REDIS_CONNECTION_STRING"]));
builder.Services.AddHostedService<CreateIndexService>();

// Add services to the container.
builder.Services.AddRazorPages();

// the rest of the codes

// ...

app.Run();

Full file

Create the model file: Models/Note.cs. This model will be used to define the redis data model.

using Redis.OM.Modeling;

namespace RedisSample.Models;

[Document(StorageType = StorageType.Json, Prefixes = new[] { "Note" })]
public class Note
{
    [RedisIdField]
    public Ulid Id { get; set; }
    [Indexed]
    public string Title { get; set; }

    [Indexed]
    public string Message { get; set; }
}

Full file

Create file HostedServices/CreateIndexService.cs. This class will be used to create the index of the model.

using Redis.OM;
using RedisSample.Models;

namespace RedisSample.HostedService;

public class CreateIndexService : IHostedService
{
  private readonly RedisConnectionProvider _redisConnectionProvider;
  public CreateIndexService(RedisConnectionProvider redisConnectionProvider)
  {
    _redisConnectionProvider = redisConnectionProvider;
  }

  public Task StartAsync(CancellationToken cancellationToken)
  {
    _redisConnectionProvider.Connection.CreateIndex(typeof(Note));
    return Task.CompletedTask;
  }

  public Task StopAsync(CancellationToken cancellationToken)
  {
    return Task.CompletedTask;
  }
}

Full file

Now, let's go the Pages directory. We will update Index.cshtml and Index.cshtml.cs also create new file AddNote.cshtml, AddNote.cshtml.cs, EditNote.cshtml, EditNote.cshtml.cs. Here we go. You may check the files in here.
Index.cshtml


@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <a class="btn btn-primary" asp-area="" asp-page="/AddNote" role="button">Add Note</a>
    <p>Total Notes: @Model.NoteList.Count</p>
    <div class="container">
        <div class="row gy-3">
            @foreach (var note in Model.NoteList)
            {
                <div class="col-6">
                    <div class="card">
                        <div class="card-body">
                            <p class="h1">@note.Title</p>
                            <p>@note.Message</p>
                            <div class="row">
                                <div class="col-2">
                                    <a class="btn btn-secondary" asp-area="" asp-page="/EditNote" asp-route-id="@note.Id"
                                    role="button">Edit</a>
                                </div>
                                <div class="col-2">
                                    <form method="post">
                                        <button class="btn btn-danger" type="submit" asp-page-handler="DeleteNote"
                                        asp-route-id="@note.Id">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Index.cshtml.cs

sing Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Redis.OM;
using Redis.OM.Searching;
using RedisSample.Models;

namespace RedisSample.Pages;

public class IndexModel : PageModel
{
  private readonly ILogger<IndexModel> _logger;
  private readonly IRedisCollection<Note> _notes;
  public List<Note> NoteList { get; set; } = new List<Note>();


  public IndexModel(ILogger<IndexModel> logger, RedisConnectionProvider redisConnection)
  {
    _logger = logger;
    _notes = redisConnection.RedisCollection<Note>();
  }

  public async Task OnGetAsync()
  {
    var notes = await _notes.ToListAsync();
    NoteList.AddRange(notes);
  }

  public async Task<IActionResult> OnPostDeleteNoteAsync(string id)
  {
    var note = await _notes.FindByIdAsync(id);

    _logger.LogDebug($"...... data: {note}");

    if (note == null)
    {
      return NotFound();
    }

    await _notes.DeleteAsync(note);
    await _notes.SaveAsync();

    return RedirectToPage();
  }
}

AddNote.cshtml

@page
@model AddNoteModel
@{
    ViewData["Title"] = "Add Note";
}

<h1>Add Note</h1>

<div class="card">
    <div class="card-body">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Note!.Title" class="control-label">Title</label>
                <input asp-for="Note!.Title" class="form-control" placeholder="Enter the title of notes">
                <span asp-validation-for="Note!.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Note!.Message">Message</label>
                <textarea class="form-control" asp-for="Note!.Message" placeholder="Enter the message of notes here"> </textarea>
                <span asp-validation-for="Note!.Message" class="text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

</div>

AddNote.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Redis.OM;
using Redis.OM.Searching;
using RedisSample.Models;

namespace RedisSample.Pages;

public class AddNoteModel : PageModel
{
    private readonly ILogger<AddNoteModel> _logger;
    private readonly IRedisCollection<Note> _notes;

    [BindProperty]
    public Note? Note { get; set; }

    public AddNoteModel(ILogger<AddNoteModel> logger, RedisConnectionProvider redisConnection)
    {
        _logger = logger;
        _notes = redisConnection.RedisCollection<Note>();
    }

    public void OnGet()
    {

    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        if (Note != null)
        {
            await _notes.InsertAsync(Note);
        }
        await _notes.SaveAsync();
        return Redirect("/");
    }
}

EditNote.cshtml

page "{id}"
@model EditNoteModel
@{
    ViewData["Title"] = "Edit Note";
}

<h1>Edit Note</h1>

<div class="card">
    <div class="card-body">
        <form method="post">
            <input type="hidden" asp-for="Note!.Id" />
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Note!.Title" class="control-label">Title</label>
                <input asp-for="Note!.Title" class="form-control" placeholder="Enter the title of notes">
                <span asp-validation-for="Note!.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Note!.Message">Message</label>
                <textarea class="form-control" asp-for="Note!.Message" placeholder="Enter the message of notes here"> </textarea>
                <span asp-validation-for="Note!.Message" class="text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

</div>

EditNote.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Redis.OM;
using Redis.OM.Searching;
using RedisSample.Models;

namespace RedisSample.Pages;

public class EditNoteModel : PageModel
{
  private readonly ILogger<AddNoteModel> _logger;
  private readonly IRedisCollection<Note> _notes;

  [BindProperty]
  public Note? Note { get; set; }

  public EditNoteModel(ILogger<AddNoteModel> logger, RedisConnectionProvider redisConnection)
  {
    _logger = logger;
    _notes = redisConnection.RedisCollection<Note>();
  }

  public async Task<IActionResult> OnGetAsync(string id)
  {
    Note = await _notes.FindByIdAsync(id);
    if (Note == null)
    {
      return NotFound();
    }
    return Page();
  }

  public async Task<IActionResult> OnPostAsync()
  {
    if (!ModelState.IsValid)
    {
      return Page();
    }

    if (Note != null)
    {
      await _notes.UpdateAsync(Note);
    }
    await _notes.SaveAsync();
    return Redirect("/");
  }
}

Test our code locally

Finally done! Now, let's start to try our code. But, we will need to host the Redis Stack first. We will run the Redis Stack using docker. You can check this link for more details. Basically you can run using this command.

docker run -d --name redis-stack -p 6379:6379 -p 8001:8001 redis/redis-stack:6.2.2-v4

Ok, let's try our code. You can run the project using this command dotnet run --project RedisSample or dotnet watch --project RedisSample.

Now, let's explore your website! You can check this video for the demo.

You might need to check the RedisInsight for more details about the stored data.

Preparing Redis Stack

I think it will not be enough if we just implement it locally. So we will need to host it somewhere else. We will deploy it to Elastic Beanstalk, but I will host the Redis Stack using Redis Enterprise since they have options to host in AWS! For more details on how I set up the Redis Enterprise, you may check this video.

Preparing Elastic Beanstalk

Now, since the Redis Stack is ready. We will move to set up Elastic Beanstalk. Please check this video.

Testing Your App

Finally, we test our code that is hosted in Elastic Beanstalk. Here's my video.

Why I didn't use ElastiCache? So, when I'm exploring the ElastiCache, seems the ElastiCache doesn't have the RediSearch module, so I can't create the index. Like this error logs.

Thank you

Thank you for reading and watching. If you have any comments and suggestions, please feel free to comment in the comment section and tell me about your suggestion.

DEV Community

Getting Started with Redis, Elastic Beanstalk, and Razor Pages (.NET 6)

Required Tools

Project Preparation

Time to Code!

bervProject / redis-sample

Redis sample app

Redis Sample

Tools

Install Dependencies

How to Run

Build

Publish

LICENSE

Test our code locally

Preparing Redis Stack

Preparing Elastic Beanstalk

Testing Your App

Thank you

Top comments (0)

Read next

Understanding the MLOps Lifecycle

Removing code smells: Using dependency injection through Props in React

No-Code Tools: Should Developers Worry or Embrace the Future?

Day 9: Terminal Forms 📇