Building a Crypto News Website in C# Using the Microsoft Azure App Service and MongoDB Atlas

1
@* The `page` attribute defines how this page can be opened. *@
2
@page "/news"
3
4
@* The `MongoDB` driver will be used to connect to your Atlas cluster. *@
5
@using MongoDB.Driver
6
@* `BSON` is a file format similar to JSON. MongoDB Atlas documents are BSON documents. *@
7
@using MongoDB.Bson
8
@* You need to add the `Data` folder as well. This is where the `News` class resides. *@
9
@using CryptoNewsApp.Data
10
@using Microsoft.AspNetCore.Builder
11
12
@* The page title is what your browser tab will be called.  *@
13
<PageTitle>News</PageTitle>
14
15
@* Let's add a header to the page. *@
16
<h1>News</h1>
17
18
@* And then some data. *@
19
@* This is just a simple table contains news and their date. *@
20
@if (_news != null)
21
{
22
    <table class="table">
23
        <thead>
24
        <tr>
25
            <th>News</th>
26
            <th>Date</th>
27
        </tr>
28
        </thead>
29
        <tbody>
30
        @* Blazor takes this data from the `_news` field that we will fill later on. *@
31
        @foreach (var newsEntry in _news)
32
        {
33
            <tr>
34
                <td>@newsEntry.Title</td>
35
                <td>@newsEntry.Date</td>
36
            </tr>
37
        }
38
        </tbody>
39
    </table>
40
}
41
42
@* This part defines the code that will be run when the page is loaded. It's basically  *@
43
@* what would usually be PHP in a non-Blazor environment. *@
44
@code {
45
    
46
    // The `_news` field will hold all our news. We will have a look at the `News`
47
    // class in just a moment.
48
    private List<News>? _news;
49
50
    // `OnInitializedAsync()` gets called when the website is loaded. Our data
51
    // retrieval logic has to be placed here.
52
    protected override async Task OnInitializedAsync()
53
    {
54
        // First, we need to create a `MongoClient` which is what we use to
55
        // connect to our cluster.
56
        // The only argument we need to pass on is the connection string you
57
        // retrieved from Atlas. Make sure to replace the password placeholder with your password.
58
        var mongoClient = new MongoClient("YOUR_CONNECTION_STRING");
59
        // Using the `mongoCLient` we can now access the database.
60
        var cryptoNewsDatabase = mongoClient.GetDatabase("crypto-news-database");
61
        // Having a handle to the database we can furthermore get the collection data.
62
        // Note that this is a generic function that takes `News` as it's parameter
63
        // to define who the documents in this collection look like.
64
        var newsCollection = cryptoNewsDatabase.GetCollection<News>("news");
65
        // Having access to the collection, we issue a `Find` call to find all documents.
66
        // A `Find` takes a filter as an argument. This filter is written as a `BsonDocument`.
67
        // Remember, `BSON` is really just a (binary) JSON.
68
        // Since we don't want to filter anything and get all the news, we pass along an
69
        // empty / new `BsonDocument`. The result is then transformed into a list with `ToListAsync()`.
70
        _news = await newsCollection.Find(new BsonDocument()).Limit(10).ToListAsync();
71
        // And that's it! It's as easy as that using the driver to access the data
72
        // in your MongoDB Atlas cluster.
73
    }
74
75
}

1
using MongoDB.Bson;
2
using MongoDB.Bson.Serialization.Attributes;
3
4
namespace CryptoNewsApp.Data
5
{
6
    public class News
7
    {
8
        // The attribute `BsonId` signals the MongoDB driver that this field 
9
        // should used to map the `_id` from the Atlas document.
10
        // Remember to use the type `ObjectId` here as well.
11
        [BsonId] public ObjectId Id { get; set; }
12
13
        // The two other fields in each news are `title` and `date`.
14
        // Since the C# coding style differs from the Atlas naming style, we have to map them.
15
        // Thankfully there is another handy attribute to achieve this: `BsonElement`.
16
        // It takes the document field's name and maps it to the classes field name.
17
        [BsonElement("title")] public String Title { get; set; }
18
        [BsonElement("date")] public DateTime Date { get; set; }
19
    }
20
}