Building a beginner-friendly C# application

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 StickyNotes

cd StickyNotes

Now we add code to the Razor Files in the Components Directory.

NotesApp/Components/

Home.razor is the 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:

Codepshere provides the nix package manager an convienient way to provide reproducible build environments. You can install the .NET SDK with the following command.

nix-env -iA nixpkgs.dotnet-sdk_8

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

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

Now we use the run command 

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.