Skip to content

Instantly share code, notes, and snippets.

@LuceCarter
Created March 5, 2024 11:53
Show Gist options
  • Save LuceCarter/4da1164f9cfd447b7167194ef9c3124a to your computer and use it in GitHub Desktop.
Save LuceCarter/4da1164f9cfd447b7167194ef9c3124a to your computer and use it in GitHub Desktop.
NewsPage.razor code from the Atlas and App Services tutorial
@* 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.
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment