NewsPage.razor code from the Atlas and App Services tutorial

NewsPage.razor

@* The `page` attribute defines how this page can be opened. *@
@page "/news"

@* The `MongoDB` driver will be used to connect to your Atlas cluster. *@
@using MongoDB.Driver
@* `BSON` is a file format similar to JSON. MongoDB Atlas documents are BSON documents. *@
@using MongoDB.Bson
@* You need to add the `Data` folder as well. This is where the `News` class resides. *@
@using CryptoNews.Models
@using Microsoft.AspNetCore.Builder

@* The page title is what your browser tab will be called.  *@
<PageTitle>News</PageTitle>

@* Let's add a header to the page. *@
<h1>News</h1>

@* And then some data. *@
@* This is just a simple table contains news and their date. *@
@if (_news != null)
{
    <table class="table">
        <thead>
            <tr>
                <th>News</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            @* Blazor takes this data from the `_news` field that we will fill later on. *@
            @foreach (var newsEntry in _news)
            {
                <tr>
                    <td>@newsEntry.Title</td>
                    <td>@newsEntry.Date</td>
                </tr>
            }
        </tbody>
    </table>
}

@* This part defines the code that will be run when the page is loaded. *@
@code {

    // The `_news` field will hold all our news. 
    private List<News> _news;

    // `OnInitializedAsync()` gets called when the website is loaded. Our data
    // retrieval logic has to be placed here.
    protected override async Task OnInitializedAsync()
    {
        // First, we need to create a `MongoClient` which is what we use to
        // connect to our cluster.
        // The only argument we need to pass on is the connection string you
        // retrieved from Atlas. Make sure to replace the password placeholder with your password.
        var mongoClient = new MongoClient("<YOUR ATLAS CONNECTION STRING>");
      
        // Using the `mongoCLient` we can now access the database.
        var cryptoNewsDatabase = mongoClient.GetDatabase("crypto_news_website");
      
        // Having a handle to the database we can furthermore get the collection data.
        // Note that this is a generic function that takes `News` as it's parameter
        // to define who the documents in this collection look like.
        var newsCollection = cryptoNewsDatabase.GetCollection<News>("news");
      
        // Having access to the collection, we issue a `Find` call to find all documents.
        // A `Find` takes a filter as an argument. This filter is written as a `BsonDocument`.
        // Remember, `BSON` is really just a (binary) JSON.
        // Since we don't want to filter anything and get all the news, we pass along an
        // empty / new `BsonDocument`. The result is then transformed into a list with `ToListAsync()`.
        _news = await newsCollection.Find(new BsonDocument()).Limit(10).ToListAsync();
        // And that's it! It's as easy as that using the driver to access the data
        // in your MongoDB Atlas cluster.
    }

}