Building a beginner-friendly C# application

#tutorial #csharp #webapp

C# was developed by Microsoft and released in the early 2000s as part of the company's .NET initiative. It was designed with a focus on simplicity, type safety, and object-oriented principles. Since then, it has become a popular language used mainly to develop Windows and web applications using ASP.NET. I wanted to show you how easy it is to run a C# application on Codesphere. In this tutorial, I will walk you through the step-by-step process of doing so.

Setting up the web project

Since we are using Blazor web assembly, we first initialize our web project by the following commands:

dotnet new blazor -o NotesApp

cd BlazorApp

Now we add code to the Home.razor file that represents the default home page of your web application. This file contains the markup and logic associated with the main content that users see when they navigate to the home or root URL of your application.

@page "/"
@rendermode InteractiveServer
@using StickyNotes.Components.Components

<PageTitle>Home</PageTitle>

<button @onclick="AddNote">Add Note</button>

@foreach (var note in notes)
{
    <Note OnDelete="() => DeleteNote(note)" />
}

@code {
    private List<NoteModel> notes = new List<NoteModel>();

    private void AddNote()
    {
        notes.Add(new NoteModel());
        StateHasChanged();
    }

    private void DeleteNote(NoteModel noteToDelete)
    {
        notes.Remove(noteToDelete);
    }

    private class NoteModel { }

Then we add this code to Note.razor file which provides a user interface for creating and deleting notes.

@code {
    private string noteContent;
}

<div class="note-container">
    <textarea @bind="noteContent" placeholder="Write your note here..."></textarea>
    <button @onclick="DeleteNote">Delete Note</button>
</div>

@code {
    // You can define an EventCallback if you want to notify a parent component
    [Parameter]
    public EventCallback OnDelete { get; set; }

    private void DeleteNote()
    {
        // Logic to delete the note
        // If this component is part of a collection, you might want to call OnDelete to notify the parent to remove it
        OnDelete.InvokeAsync(null);
    }
}

If you like you can find the source code of this project here.

Running the project in Codesphere

To get this project running on Codesphere, you can create an empty working space and import the code from GitHub.

Then you would need to set the dotnet environment and run these commands:

Now we download the dotnet installer for Linux using wget.

wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh

Next, we assign it the roles that are necessary to run the application.

chmod +x ./dotnet-install.sh

Now add this command to install dotnet.

./dotnet-install.sh --version latest --install-dir /home/user/app/.dotnet --no-path

The next step is to change the default port from "5000" to "3000" in /Properties/launchSettings.json

  "applicationUrl": "http://0.0.0.0:3000",

Now we use the run command

/home/user/app/.dotnet/dotnet watch

This will launch the web app.

Alternatively, you can find a preconfigured version of this application in our templates. You can create a workspace and from the drop-down choose this template. You will have all these commands in the CI pipeline.

To understand how you can run a CI pipeline head over to Creating an Angular Template for Codesphere.

I hope you found this article useful, stay tuned for more.