DEV Community: Bradley Wells

A Blog Boilerplate for Statiq, the C# static site generator

Bradley Wells — Wed, 13 May 2020 09:00:00 +0000

If you want to create a blog using a static site generator in 2020, you may be overwhelmed with all the options. In this guide, I hope to convince you why you should consider using Statiq (formerly WYAM) for your next statically generated blog, and I will give you tips for getting started with this powerful tool.

Why Statiq?

There is a plethora of popular tools for creating a statically-rendered blog, one that does not rely on databases or server-side processing. Without databases, static sites can be more secure, have faster load times, and can be hosted very inexpensively.

Among the most popular competitors to Statiq are Gatsby, Hugo, and Jekyll. Gatsby is based on the React Javascript library. Hugo is based on the Go programming language. And Jekyll is based on Ruby. However, you are at this site because you are a C# developer. If you are more comfortable in C# than you are in Ruby, Go, or the Javascript framework of the day, there is another important option you should consider for launching your static website — Statiq. The Statiq framework is built on .NET Core, so it is easy to extend if you are a .NET developer.

The Statiq framework allows you to create static content from a variety of sources, including input files such as Markdown, YAML, XML, as well as from databases and services. You can create a pipeline to handle content and data creation from virtually any source you might need, but fortunately for you, The developers of Statiq, mostly @daveaglick along with some other open-source contributors, have already created a toolkit, Statiq.Web, with built-in pipelines capable of handling the most common scenarios.

Getting Started with Statiq.Web

First things first. The Statiq Framework itself is completely free and open source under an MIT license. Statiq.Web is turnkey solution built on the Statiq Framework that also includes a live-reload preview server, out-of-the-box deployment capabilities, and other features to make getting started a breeze, It is licensed under the License Zero Prosperity Public License. The Prosperity license allows free use for non-commercial applications, but there is a $50 per developer, per major version fee to obtain a License Zero Private License for users intending to use the product in commercial applications.

To help you get started creating a static generated blog using Statiq.Web, I created a boilerplate template. To get started, clone the statiq-blog-boilerplate project on Github.

Using the Template

Making customizations to your blog using the boilerplate is easy. Here are some common configuration suggestions.

To change your website title, blog title, and other details, edit the appropriate value in Constants.cs.

To change the subdirectory for your blog from /blog/ to another path, change the name of the blog folder in the input directory and set the BlogPath string in Constants.cs to the new location.

To change the structure of post permalinks, change line 24 of Program.cs. By default, the boilerplate template uses /{year}/{category}/{title} for generating permalinks.

The sidebar is displayed by default. To hide it, add HideSidebar: true markup to the pages where you do not wish to show the sidebar.

To change the order of items in the sidebar, or to add your own widgets, simply edit /input/blog/_sidebar.cshtml. If you want the sidebar to display on the left side of the page. Simply move things around in /input/_layout.cshtml.

To adjust how posts are displayed in index and archive pages, adjust /input/blog/_posts.cshtml. For example, you could create a card-style display by using the following code:

<div class="row">
    @foreach (IDocument post in Model)
    {
        IDocument topicDocument = Outputs[nameof(Archives)][$"{Constants.BlogPath}/categories/{post.GetString("Category")}/index.html"];
        string excerpt = post.GetString(Statiq.Html.HtmlKeys.Excerpt);
        excerpt = excerpt.RemoveEnd("");
        var words = excerpt.Split().Take(50);
        excerpt = string.Join(" ", words);
        excerpt += $" ... <span class=\"small\"><a href=\"{Context.GetLink(post)}\">Read more</a></span></p>";

        <div class="col-12 col-md-6 @(Document.GetBool("HideSidebar")?"col-lg-4 col-xl-3":"col-xl-4") mb-3">
            <div class="card">
                <div class="card-header">
                    <h2 itemprop="headline name" class="card-title">
                        <a itemprop="url" class="small" href="@Context.GetLink(post).Substring(1)">@post.GetString("Title")</a>
                    </h2>
                    <div class="bh">
                        <time datetime="@post.GetString("Published")" itemprop="datePublished">@post.GetDateTime("Published").ToString("MMMM dd, yyyy")</time>
                        @if (topicDocument != null)
                        {
                            <a href="@(topicDocument.GetLink())"><span class="badge badge-info">@topicDocument.GetTitle()</span></a>
                        }
                    </div>
                </div>
                <div class="card-body">
                    <div itemprop="articleBody">
                        <div class="card-text">@Html.Raw(excerpt)</div>
                    </div>
                </div>
            </div>
            <div class="collapse" aria-hidden="true" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                <meta itemprop="name" content="@post.GetString("Author")">
            </div>
            <meta itemprop="dateModified" content="@post.GetString("Modified")">
        </div>
    }
</div>

Testing your Static Blog

Eventually, you will want to add your own content and blog posts to your new project. The boilerplate template includes sample posts in the /input/blog/posts/ directory. Feel free to delete these posts and add your own to this folder using Markdown (.md) or any other supported syntax.

Once you have configured everything to your liking, run your project and start the preview server by executing the following console command from your project directory.

dotnet run -- preview

By default, your website will be accessible at http://localhost:5080. The preview server will tell you which port it is listening on.

The Bottom Line

In this guide, you learned about Statiq, the C# static site generator, and you learned how you can use Statiq.Web to create a blog. Feel free to peruse my template source code on GitHub at bradwellsb/statiq-blog-boilerplate to learn more about the cool things you can do this with free boilerplate!

Source

Create a beautiful drag and drop file upload component with Blazor

Bradley Wells — Mon, 04 May 2020 05:00:00 +0000

This tutorial will highlight a useful Nuget package for enabling file uploads in your Blazor project. In particular, you will learn how to create a beautiful user experience with drag and drop file uploads that respond to ondragenter and ondragleave events.

Getting Started

To get started, launch Visual Studio and create a new server-side Blazor project. We will be using the BlazorInputFile Nuget package to handle all the JSInterop calls for us. Install the package via the Package Manager Console.

Install-Package BlazorInputFile

To begin using BlazorInputFile, you must includes a reference for the package’s JavaScript file to your project. To do this, locate and open your project’s _Host.cshtml within the Pages folder. Then, add the following line just before the closing </body> tag.

<script src="_content/BlazorInputFile/inputfile.js"></script>

In this tutorial, you will build a drag-drop experience as a reusable Blazor component. This will give you flexibility in case you wish you use the component in multiple pages of your project. Add a new Razor component to your project’s Shared directory by right-clicking the Shared folder, and selecting Add > New Item. Select Razor Component and call it DragDrop.

Designing the Drag and Drop Interface

Layout

At the top of your new DragDrop.razor file, add a using directive for BlazorInputFile and inject an instances of Blazor’s JavaScript runtime.

@using BlazorInputFile
@inject IJSRuntime jsRuntime

Your drag-drop component will simply extend the InputFile component of BlazorInputFile with some custom CSS styling. It could be as simple as the following.

<div class="dropzone">
    <InputFile OnChange="HandleFileInputChange" />
    Upload file
</div>

From here, you would define the styling for the .dropzone class and define the actions to be taken by the OnChange event handler.

We will make our example a little more interesting because we want the user to be presented with some visual feedback when a file is hovering over the drop zone. Our example will add a few more features. It will support adding multiple files, and it will check to ensure only certain file types are accepted and that each file is smaller than a given maximum file size. A validation message will be shown if either of these checks fail. Finally, our example will provide some visual feedback by listing the filenames of each uploaded file and allowing the user to remove specific files.

When you add the following to DragDrop.razor , you will see a number of error messages. Don’t worry, we will handle each one by declaring the referenced variables and defining each event handler.

<div class="row">
    <div class="col-12 p-0">
        <div class="dropzone @dropClass rounded">
            <InputFile id="fileInput" multiple title=""
                       OnChange="HandleFileInputChange"
                       accept="image/png,image/gif,image/jpeg"
                       @ondragenter="HandleDragEnter"
                       @ondragleave="HandleDragLeave" />
            Upload images
        </div>
        @if ((fileTypeError || fileSizeError))
        {
            <ul class="validation-errors mb-0">
                @if (fileTypeError)
                {
                    <li class="validation-message">Only image files are accepted.</li>
                }
                @if (fileSizeError)
                {
                    <li class="validation-message">The max file size is @MaxFileSizeMB MB.</li>
                }
            </ul>
        }
        @if (selectedFiles != null && selectedFiles.Count > 0)
        {
            <div class="col-12">
                <ul>
                    @foreach (var file in selectedFiles)
                    {
                        <li>
                            @file.Name
                            <button class="btn btn-link text-danger p-0 pl-1" type="button"
                                    @onclick="@(e => RemoveFile(file))">
                                <small class="align-text-bottom">Remove</small>
                            </button>
                        </li>
                    }
                </ul>
            </div>
        }
    </div>
</div>

Variable Declaration

Begin by declaring the variables you will be using in this Blazor component. Add the following declarations to the @code{ } block of DragDrop.razor.

const int MaxFileSizeMB = 5;
const int MaxFileSize = MaxFileSizeMB * 1024 * 1024; // 5MB
private string dropClass = "";
private bool fileSizeError = false;
private bool fileTypeError = false;
private List<IFileListEntry> selectedFiles = new List<IFileListEntry>();

As you can see, there is a variable that will be used to enforce a maximum file size of 5 MB, The dropClass variable will be used to programmatically add a class to the dropzone container when the user is dragging a file over the dropzone but has not yet released the mouse button. In addition, there are boolean flags that will be triggered in the event of an error. Finally, you have reserved a block of memory, selectedFiles, that will contain the list of files to be uploaded to the server.

Event Handlers

Now that your variables are declared, it is time to declare the methods that will be fired when the OnChange, ondragenter, and ondragleave events are raised. There is also a fourth handler that will be triggered when the user, wishing to remove a file from the input element, clicks the remove button.

The HandleDragEnter() and HandleDragLeave() handlers are simple. They will simply set and clear the value of the dropClass string, respectively. The value of dropClass is used to programmatically assign assign a styling class to the div element on Line 6, which wraps the InputFile component.

private void HandleDragEnter()
{
    dropClass = "dropzone-drag";
}

private void HandleDragLeave()
{
    dropClass = "";
}

The HandleFileInputChange() handler method will be a little more complex. Since our InputFile field accepts multiple files, this handler should perform validation on the list of files, checking that the size of each one is below the maximum file size threshold and that the filetype of each one is on our list of accepted filetypes. Each valid file should be added to the selectedFiles collection.

private async Task HandleFileInputChange(IFileListEntry[] files)
{
    dropClass = "";
    fileSizeError = false;
    fileTypeError = false;
    List<string> acceptedFileTypes = new List<string>() { "image/png", "image/jpeg", "image/gif" };
    if (files != null)
    {
        foreach (var file in files)
        {
            bool error = false;
            if (file.Size > MaxFileSize)
            {
                error = true;
                fileSizeError = true;
            }

            if (!acceptedFileTypes.Contains(file.Type))
            {
                error = true;
                fileTypeError = true;
            }

            //keep the good files
            if (!error)
            {
                selectedFiles.Add(file);
            }
        }
    }
}

Finally, the RemoveFile() handler method simply removes the selected file from the list of files stored in the selectedFiles collection.

private void RemoveFile(IFileListEntry file)
{
    selectedFiles.Remove(file);
}

Styling

Now that you have handled all the file input, drag, and button events, it is time to add styling to the drag-drop zone. Open site.css from within the wwwroot/css directory and add the following lines to the stylesheet.

.dropzone {
    border: 3px dashed steelblue;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #444;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}

    .dropzone:hover {
        background-color: #f3f3f3;
        color: #333;
    }

    .dropzone input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.dropzone-drag {
    background-color: palegreen;
}

Bringing it all together

You can, now, use your drag-drop component on any page of your project. For example, add it to your projects Index.razor page to test it.

@page "/"

<h2>Drag/Drop Demo</h2>
<DragDrop />

Your complete code for the DragDrop.razor Blazor component may look like the following.

@using BlazorInputFile

<div class="row">
    <div class="col-12 p-0">
        <div class="dropzone @dropClass rounded">
            <InputFile id="fileInput" multiple title=""
                       OnChange="HandleFileInputChange"
                       accept="image/png,image/gif,image/jpeg"
                       @ondragenter="HandleDragEnter"
                       @ondragleave="HandleDragLeave" />
            Upload images
        </div>
        @if ((fileTypeError || fileSizeError))
        {
            <ul class="validation-errors mb-0">
                @if (fileTypeError)
                {
                    <li class="validation-message">Only image files are accepted.</li>
                }
                @if (fileSizeError)
                {
                    <li class="validation-message">The max file size is @MaxFileSizeMB MB.</li>
                }
            </ul>
        }
        @if (selectedFiles != null && selectedFiles.Count > 0)
        {
            <div class="col-12">
                <ul>
                    @foreach (var file in selectedFiles)
                    {
                        <li>
                            @file.Name
                            <button class="btn btn-link text-danger p-0 pl-1" type="button"
                                    @onclick="@(e => RemoveFile(file))">
                                <small class="align-text-bottom">Remove</small>
                            </button>
                        </li>
                    }
                </ul>
            </div>
        }
    </div>
</div>

@code {
    const int MaxFileSizeMB = 5;
    const int MaxFileSize = MaxFileSizeMB * 1024 * 1024; // 5MB
    private string dropClass = "";
    private bool fileSizeError = false;
    private bool fileTypeError = false;
    private List<IFileListEntry> selectedFiles = new List<IFileListEntry>();

    private void HandleDragEnter()
    {
        dropClass = "dropzone-drag";
    }

    private void HandleDragLeave()
    {
        dropClass = "";
    }

    private async Task HandleFileInputChange(IFileListEntry[] files)
    {
        dropClass = "";
        fileSizeError = false;
        fileTypeError = false;
        List<string> acceptedFileTypes = new List<string>() { "image/png", "image/jpeg", "image/gif" };
        if (files != null)
        {
            foreach (var file in files)
            {
                bool error = false;
                if (file.Size > MaxFileSize)
                {
                    error = true;
                    fileSizeError = true;
                }

                if (!acceptedFileTypes.Contains(file.Type))
                {
                    error = true;
                    fileTypeError = true;
                }

                //keep the good files
                if (!error)
                {
                    selectedFiles.Add(file);
                }
            }
        }
    }

    private void RemoveFile(IFileListEntry file)
    {
        selectedFiles.Remove(file);
    }
}

Source

Use Blazor to collect credit card information

Bradley Wells — Mon, 27 Apr 2020 06:00:00 +0000

In the previous tutorial, you learned how to link a Stripe Connect account with a local user store in a Blazor application. If, instead, you need a way to collect payment information from your customers, this tutorial will help you understand the Stripe customer flow.

Source Code

Source code for this project, and for others in the Blazor and Stripe series, are available on Github.

Disclaimer

This tutorial does not use Stripe’s browser-side library, Stripe.js, to collect credit card information. As a result, credit card information will be passed through your server if you are working with a server-side Blazor project. This tutorial is intended for testing purposes only. A subsequent tutorial will demonstrate the preferred method where a token is generated client-side using Stripe.js and JSInterop.

What you will need

This guide is built around a Blazor application, but you can also use the principles in an MVC or Razor pages project. We will be using the Stripe.net Nuget package. Install it by issuing the following command in the Package Manager Console.

Install-Package Stripe.net

You can easily configure Stripe.net by setting some global variables in your project’s Startup.cs file.

StripeConfiguration.ApiKey = Configuration.GetSection("Stripe")["ApiKey"];
StripeConfiguration.ClientId = Configuration.GetSection("Stripe")["ClientId"];

You can find your API key in your Stripe developer dashboard. Don’t forget to use the Test key if your application is not production-ready. Your Client ID can be found on the Stripe Connect Settings page. The above code is using the Secret Manager to store sensitive data. Please see the Secret Manager tutorial if you have questions about keeping secrets out of your source code.

Create Data Model

In this tutorial, I will be collecting a customer’s credit card information. Depending on your application needs, you may need to collect ACH bank account information instead.

First, create a model that will represent the Card data required by Stripe.

public class CardModel
{
    [Required, Display(Name = "Card Holder Name")]
    public string CardHolderName { get; set; }

    [Required, CreditCard, Display(Name = "Card Number")]
    public string CardNumber{ get; set; }

    [Required, Display(Name = "Expiration Month"), Range(0, 12)]
    public long? CardExpiryMonth { get; set; }

    [Required, Display(Name = "Expiration Year"), Range(2020,2100)]
    public long? CardExpiryYear { get; set; }

    [Required, Display(Name = "CVC Security Code"),
        RegularExpression("^[0-9]*$", ErrorMessage = "CVC security code can only contain numbers")]
    public string CardCvc { get; set; }
}

I went ahead and added some data validation annotations to this model.

Design Customer Setup Page

Now, create a new page in your Blazor web app called CustomerSetup.razor with the following route and using directive.

@page "/Account/CardSetup"
@using Stripe

On this page, we will create a form that accepts a user’s payment information. Since we are interested in creating a Stripe Customer and linking it to an existing user in our database, let’s ensure a user is logged in in order to see the form. We can do this using the AuthorizeView component.

<AuthorizeView Context="authContext">
    <Authorized>

    </Authorized>
</AuthorizeView>

Your form may look like the following.

<EditForm OnValidSubmit="@FormSubmit" Model="@accountOptions">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <h4>Add Credit Card</h4>
    <div class="form-group row">
        <label for="cardholderName" class="col-sm-6 col-form-label">Cardholder Name:</label>
        <input id="cardholderMame" class="form-control col-sm-6 input-lg" type="text"
               @bind="accountOptions.CardHolderName">
    </div>
    <div class="form-group row">
        <label for="cardNum" class="col-sm-6 col-form-label">Card Number:</label>
        <input id="cardNum" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardNumber" />
    </div>
    <div class="form-group row">
        <label for="cardExpiryMo" class="col-sm-6 col-form-label">Expiration Month:</label>
        <input id="cardExpiryMo" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardExpiryMonth" />
    </div>
    <div class="form-group row">
        <label for="cardExpiryYear" class="col-sm-6 col-form-label">Expiration Year:</label>
        <input id="cardExpiryYear" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardExpiryYear" />
    </div>
    <div class="form-group row">
        <label for="cardCvc" class="col-sm-6 col-form-label">CVC Security Code:</label>
        <input id="cardCvc" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardCvc" />
    </div>
    <div class="row">
        <div class="col-12 text-right">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</EditForm>

Configure Customer Setup Logic

Next, you must configure your form’s binding and OnSubmit handler. Create an instance of the model you created previously to be consumed by the form, and create the FormSubmit method. The name of this method should correspond to the name you provided as the OnValidSubmit callback of the EditForm component.

@code {
    private Card card;
    private CardModel accountOptions = new CardModel();

    private async Task FormSubmit()
    {

    }
}

The FormSubmit() method should generate a Stripe token based on the credit card information. Then it should create a customer and link the credit card information (by token) to that customer. In a real application, you would only save the newly created customer’s Stripe Customer ID to your local database.

private async Task FormSubmit()
{
    var cardOptions = new CreditCardOptions()
    {
        Number = accountOptions.CardNumber,
        ExpMonth = accountOptions.CardExpiryMonth,
        ExpYear = accountOptions.CardExpiryYear,
        Cvc = accountOptions.CardCvc
    };

    string cardToken = CreateCardToken(cardOptions);

    string customerId = CreateCustomer(accountOptions.CardHolderName);
    //this is where you would save customerId to your app's user table

    card = LinkCardToCustomer(customerId, cardToken);
}

Above is how that flow might come together. Next, we will write the CreateCardToken(), CreateCustomer(), and LinkCardToCustomer() methods.

private string CreateCardToken(CreditCardOptions cardOptions)
{
    var options = new TokenCreateOptions
    {
        Card = cardOptions
    };

    return new TokenService().Create(options).Id;
}

private string CreateCustomer(string description)
{
    var options = new CustomerCreateOptions
    {
        Description = description
    };

    return new CustomerService().Create(options).Id;
}

private Card LinkCardToCustomer(string customerId, string accountToken)
{
    var options = new CustomerUpdateOptions
    {
        Source = accountToken,
    };

    return new CustomerService().Update(customerId, options).Sources.FirstOrDefault() as Card;
}

A Note about Error Handling

When designing the page’s logic, you should include appropriate error handling. For example, when generating a token from account information, you should confirm that the token creation succeeded before proceeding. You can do this by catching StripeException errors and returning an empty string from the CreateCardToken() method if token creation failed.

private string CreateCardToken(CreditCardOptions cardOptions)
{
    var tokenOptions = new TokenCreateOptions
    {
        Card = cardOptions
    };

    try
    {
        return new TokenService().Create(tokenOptions).Id;
    }
    catch (StripeException e)
    {
        return "";
    }
}

Then, only proceed to customer creation if the token was successfully created.

string cardToken = CreateCardToken(cardOptions);

if (cardToken != null)
{
    ...
}

The Bottom Line

In this tutorial, you learned how to work with the Stripe.net library to integrate Stripe payment and customer information into your Blazor application. This is a critical step if you wish to monetize your application. Hopefully this tutorial has demonstrated that Blazor is, indeed, ready to be used in real-world applications!

Source

Set up Stripe Connect Express Accounts with Blazor

Bradley Wells — Mon, 20 Apr 2020 05:00:00 +0000

In this tutorial, you will learn how to integrate Stripe Connect Express accounts with your server-side Blazor application.

What is Stripe Connect

Stripe Connect allows you to develop marketplace and platform applications that can accept money and pay out to connected Stripe accounts. For example, a platform like Lyft has the ability to receive payments from a customer, retain a percentage as a platform fee, and then pay out the difference to the customer’s driver. Those drivers would all be considered Stripe Connect accounts for the Lyft platform.

There are three ways to integrate with Stripe Connect. A Standard account is the easiest to integrate, but it has limitations with respect to branding and the type of charges it can handle. A Custom account offers the most control, but it requires significantly more integrations work. An Express account is a happy medium between the two alternatives, and it is the focus of this tutorial.

Configure Stripe.Net

Like the Stripe webhooks tutorial, this tutorial will rely on the Stripe.net Nuget package. Install it and add it to your server-side Blazor project.

Install-Package Stripe.net

To configure Stripe.net, load your project’s Startup.cs file, locate the Configure() method, and add the following lines:

StripeConfiguration.ApiKey = Configuration.GetSection("Stripe")["ApiKey"];
StripeConfiguration.ClientId = Configuration.GetSection("Stripe")["ClientId"];

The API key can be found in your Stripe developer dashboard. You can find your Client ID in the Stripe Connect Settings page. The above code is using the Secret Manager to store sensitive data. Please see the Secret Manager tutorial if you have questions about keeping secrets out of your source code.

Linking Stripe Connect Account

This tutorial assumed you are already using an identity provider like Azure AD B2C or IdentityServer to authenticate your application’s users. In addition, you will likely be storing information in a database, as well. If I were designing a project that integrated with both Azure AD B2C and Stripe Connect, I would have an entry in a local table that included the user’s Azure Object ID and their Stripe Connect ID.

To link a Stripe Connect Express account with the currently signed in user in a server-side Blazor application, simply add a button with an OnClick event handler to a page, such as an Edit Profile page.

<button class="btn btn-primary" @onclick="ConnectStripe">Setup Stripe Connect</button>

I suggest adding some logic so that the button only appears for signed in users who have not already linked their Stripe Connect account.

<h3>Edit Profile</h3>
@if (currentUser == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <AuthorizeView>
        <Authorized>
            <div>
                <h4>Stripe Connect</h4>
                <div>
                    @if (currentUser.StripeConnectId == null)
                    {
                        <button class="btn btn-primary" @onclick="ConnectStripe">Setup Stripe Connect</button>
                    }
                </div>
            </div>
        </Authorized>
    </AuthorizeView>
}

You will need to fetch the currently signed in user’s information by overriding the page’s OnInitializedAsync method.

Generate Stripe Connect OAuth Link

Now, it is time to design the ConnectStripe method which is triggered by the button’s OnClick event. This method will simply generate and navigate to an OAuth link based on your Stripe Connect ID and redirect URI.

If you have not already configured a redirect URI in your Stripe Connect Settings page, go ahead and create one that points to a page on your Blazor app, such as http://localhost:5000/VerifyStripeConnect. This could be a route for a specific controller action, but this tutorial will demonstrate that it can be done with a Blazor page. We will create this page later.

To protect against Cross-Site Request Forgery (CSRF) attacks, Stripe Connect allows you to attach a state parameter to the URL. This parameter will be passed back to the redirect URI, so you can verify that it corresponds to the current user’s request.

You can generate a unique token to use as the value of the state parameter, and store it in the current user’s browser session store using the Blazored.SessionStorage Nuget package. Once you have install the Nuget package, the following line will inject an instance onto your Blazor page.

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

Later, you will read the value from the session store and verify that it matches the state value passed back by Stripe Connect.

Following is a sample event handler method for generating a Stripe Connect OAuth link from a Blazor page.

private async Task ConnectStripe()
{
    var state = Guid.NewGuid();
    string baseUrl = "https://connect.stripe.com/express/oauth/authorize";
    string redirectUri = "http://localhost:5000/VerifyStripeConnect";

    string clientId = StripeConfiguration.ClientId;
    string businessType = "individual";

    await sessionStorage.SetItemAsync("stripeState", state.ToString());

    string stripeAuthUrl = $"{baseUrl}?" +
        $"redirect_uri={redirectUri}&" +
        $"client_id={clientId}&" +
        $"stripe_user[business_type]={businessType}&" +
        $"stripe_user[email]={currentUser.EmailAddress}&" +
        $"stripe_user[first_name]={currentUser.FirstName}&" +
        $"stripe_user[last_name]={currentUser.LastName}&" +
        $"state={state}";

    navMan.NavigateTo(stripeAuthUrl, true);
}

The above code generates a link and then navigates the current user to the link to complete the Stripe Connect onboarding process. I provided parameters based on my local user table to prefill some of the Stripe Connect form fields, such as email address, first name, and last name. This is optional.

After the user enters the required information for Stripe, they will be redirected to http://localhost:5000/VerifyStripeConnect.

Create Verification Page

You need to create a page whose route corresponds to the redirect URI you provided in your Stripe Connect Settings page. Create a new Blazor page and add the following route directive.

@page "/VerifyStripeConnect"

I want this page to automatically perform the verification and then redirect the user to the appropriate page based on whether verification succeeded.

Start by verifying that the state parameter of the incoming request matches the value of the token you created and stored in the session store. This must be done after the page has been rendered in the user’s browser. Override the OnAfterRenderAsync method.

protected override async Task OnAfterRenderAsync(bool firstRender)
{

}

Next, validate the state parameter by fetching the expected state from the browser’s session store and comparing it to the value received from state query parameter.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var expectedState = await sessionStorage.GetItemAsync<string>("stripeState");
    var queryString = navMan.ToAbsoluteUri(navMan.Uri).Query;
    var query = QueryHelpers.ParseQuery(queryString);

    if (query.TryGetValue("state", out var state))
    {
        if (state == expectedState)
        {       
            //state values match
        }
    }
}

Finally, use the authorization code returned by Stripe to fetch the user’s Stripe Connect ID.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var expectedState = await sessionStorage.GetItemAsync<string>("stripeState");
    var queryString = navMan.ToAbsoluteUri(navMan.Uri).Query;
    var query = QueryHelpers.ParseQuery(queryString);

    if (query.TryGetValue("state", out var state))
    {
        if (state == expectedState)
        {       
            await sessionStorage.RemoveItemAsync("stripeState");

            if (query.TryGetValue("code", out var code))
            {
                var stripeId = stripeService.GetStripeIdFromAuthCode(code);
                currentUser.StripeConnectId = stripeId;

                await apiService.EditUserAsync(currentUser);
                navMan.NavigateTo("/EditProfile");
            }
        }
    }
}

After successfully verifying the state and completing the user’s Stripe Connect Express account connection, I update the Users table in my local database and redirect the user back to the Edit Profile page.

Get Stripe ID from Auth code

You may have noticed the GetStripeIdFromAuthCode() method called on line 54. This method is part of a StripeService class I created for interfacing with the Stripe API. This method takes the one-time use authorization code returned by Stripe and returns a string corresponding to the user’s new Stripe Connect account.

public string GetStripeIdFromAuthCode(string authCode)
{
    var options = new OAuthTokenCreateOptions
    {
        GrantType = "authorization_code",
        Code = authCode,
    };

    var service = new OAuthTokenService();
    var response = service.Create(options);

    return response.StripeUserId;
}

The Bottom Line

This tutorial walked you through how to integrate Stripe Connect with an existing Blazor server-side application. I hope this tutorial has inspired you as you look to create a real-world applications. Maybe you will even consider using Blazor and Stripe for your next business startup! Let me know if you have any questions.

Source

Stripe.NET Create Stripe Webhooks Receiver

Bradley Wells — Mon, 13 Apr 2020 05:30:00 +0000

In this tutorial, you will create an ASP.NET controller that will act as a listener for Stripe webhooks. This controller can respond to events related to your Stripe customers or connected accounts.

Getting Started

If you will be following along with other tutorials in this series, I will be working with a server-side Blazor project. If not, the same principles will apply to MVC or Razor pages projects, so use whichever you prefer.

Get started by installing the Stripe.Net Nuget package for use in your project.

Install-Package Stripe.net

Configure Stripe.Net

There are a number of global configuration settings for Stripe.Net. The one you will need to set for this tutorial is your Stripe API Key. Don’t forget to use the Test key if your project is not yet live. Remember, you should never store secrets in your project’s source code. Using ASP.NET’s Secret Manager, add your API key. I also added my webhook endpoint signing key.

"Stripe": {
    "ApiKey": "sk_test_xxxx",
    "WebhookSigningKey": "whsec_xxxx"
}

Now, open the project’s Startup.cs file and start by importing the Stripe namespace.

using Stripe;

Still in Startup.cs , locate the Configure() method. Here, you will set the global API Key parameter for Stripe.Net.

StripeConfiguration.ApiKey = Configuration.GetSection("Stripe")["ApiKey"];

We will be using the webhook signing key to verify that events sent to our webhook receiver were actually sent by Stripe. To do this, use ASP.NET’s Options pattern. Create a class called StripeOptions that looks like the following. The name WebhookSigningKey should match the key name you configured in secrets.json.

public class StripeOptions
{
    public string WebhookSigningKey { get; set; }
}

Back in Startup.cs , locate the ConfigureServices() method. Here, you will bind the values from secret manager to the StripeOptions class and add it as a type that can be injected into your controller.

services.AddOptions();
services.Configure<StripeOptions>(Configuration.GetSection("Stripe"));

Create Webhook Receiver

Your webhook listener simply be a controller with a single HttpPost endpoint. Stripe will send POST requests to this endpoint containing details related to a Stripe event. Your controller will determine which type of event it has received and take the appropriate action based on the event.

Create a Controllers folder in your project. Within that folder, create a class called StripeWebhook. You will make this a controller class that will be able to respond to any event received from Stripe’s webhooks.

In projects where I am receiving payments from customers and paying out to connected Stripe accounts, I like to create two separate webhook receiver controllers. One controller will respond to customer events and the other will respond to Stripe Connect events. This is not strictly necessary, as a single controller can respond to both events. I just do this to help me manage my controller code!

Now, inject any services you will need in the controller using C# dependency injection. Also inject the StripeOptions interface so you will be able to access your unique webhook signing key.

[Route("[controller]")]
public class StripeWebhook : ControllerBase
{
    private readonly string _webhookSecret;
    private readonly StripeService _stripeService;
    private readonly ApiService _apiService;

    public StripeWebhook(IOptions<StripeConfig> options,
        StripeService stripeService,
        ApiService apiService)
    {
        _webhookSecret = options.Value.WebhookSigningKey;
        _stripeService = stripeService;
        _apiService = apiService;
    }
}

In my constructor example above, I have extracted the WebhookSigningKey value from the Options interface and assigned it to a private variable _webhookSecret. I also injected two service instances. One to handle any API calls dealing with my local database, and another for interfacing with Stripe.

Next, add a single HttpPost endpoint for your controller.

[HttpPost]
public async Task<IActionResult> Index()
{

}

This is where you will respond to events sent by Stripe. When you are designing your webhook receiver, please remember that Stripe expects your application to send an Http success response code every time an event is received.

Stripe will notify your webhook receiver for any numbers of events. For example, your application might respond when a customer updates their payment information, when a customer’s payment method will soon expire, or when a charge fails. Your controller should determine which type of event it has received and then take the appropriate action.

[HttpPost]
public async Task Index()
{
    string json = await new StreamReader(HttpContext.Request.Body).ReadToEndAsync();

    try
    {
        var stripeEvent = EventUtility.ConstructEvent(json,
            Request.Headers["Stripe-Signature"], _webhookSecret);
        switch (stripeEvent.Type)
        {
            case Events.CustomerSourceUpdated:
                //make sure payment info is valid
                break;
            case Events.CustomerSourceExpiring:
                //send reminder email to update payment method
                break;
            case Events.ChargeFailed:
                //do something
                break;
        }
        return Ok();
    }
    catch (StripeException e)
    {
        return BadRequest();
    }
}

The controller action above starts by parsing the body of the request received and saving it as a string json. Then, the controller verifies that the event was sent by Stripe by comparing the value of the Stripe-Signature with our unique webhook secret. Finally, we determine the type of event and perform the appropriate action based on the event. In this case, we might have some code that will verify that a customer’s payment method is still valid and update our database records accordingly when a customer.source.updated event is received. Similarly, we might send a friendly reminder email in response to the customer.source.expiring event when a customer’s payment method is set to expire.

Once your controller is finished, don’t forget to tell Stripe which endpoint to send webhook events to by updating your Stripe developer dashboard.

The Bottom Line

In this tutorial, you learned how to create a webhook receiver that will respond to Stripe events. You can use the same technique if you wish to set up a listener that responds to webhook events sent out by any other platform, such as Github. Hopefully this was a practical tutorial that will help you monetize your next startup! In subsequent tutorials, you will learn more about working with the Stripe API in server-side Blazor applications.

Source

ASP.NET Basics: Inject Service into Controller

Bradley Wells — Mon, 06 Apr 2020 05:00:00 +0000

In this tutorial, you will learn how to use C# dependency injection to inject a service into a controller. This is useful if you need to call an action from within a separate controller.

Register Service Class

First, register your service class with the ServiceCollection interface. Open Startup.cs of your project and locate the ConfigureServices method. Depending on how your service is configured, you might register it through the HttpClientFactory.

services.AddHttpClient<ApiService>(client =>
{
    client.BaseAddress = new Uri(Configuration["ApiBase"]);
})

Or you might register as a service with Singleton, Scoped, or Transient lifetime.

services.AddTransient<ApiService>();

Inject into Controller

To inject the service into your controller, use the standard C# dependency injection technique.

[Route("stripe/[controller]")]
public class CustomerWebhook : ControllerBase
{
    private readonly ApiService _apiService;
    public CustomerWebhook(ApiService apiService)
    {
        _apiService = apiService;
    }

    //Add controller actions
}

Invoke Service Method from Controller

Suppose you have a method in your service class that calls an API controller to get a user from the database by the user’s ID.

public async Task<User> GetUserByIdAsync(int id)
{
    var response = await _httpClient.GetAsync($"api/users({id})");
    response.EnsureSuccessStatusCode();
    using var responseContent = await response.Content.ReadAsStreamAsync();
    return await JsonSerializer.DeserializeAsync<User>(responseContent);            
}

The service class’s GetUserByIdAsync() method interacts with the project’s UsersController. You might need this user information from within another controller, AnotherController. If you have injected ApiService as a dependency in AnotherController , you can easily use it to interact with UsersController.

var dbUser = await _apiService.GetUserById(userId);

The Bottom Line

In this tutorial, you learned how to inject a service into a controller. That controller could be an API controller, an MVC controller, or a webhooks receiver. In the next tutorial, we will put this technique into practice as we create a listener controller to respond to webhooks sent by Stripe.

Source

OData Actions in .NET Core

Bradley Wells — Mon, 30 Mar 2020 06:00:00 +0000

Original Article

In the previous tutorial, you learned how to create a function in an OData API. Such a function could accept multiple parameters and return relevant data corresponding to those parameters. An OData action, on the other hand, is better suited for modifying a database entity. In this tutorial, you will learn how to create and configure an OData action.

Create OData Action

Whereas an OData function is generally associated with an Http GET request, an Action can be associated with a POST request. For this example, you will build off the previous tutorial where you created a project to track your favorite open source contributors. In that tutorial, you created a standard GET method to return a specific project by its Project Id. Then you used a special OData function to add a GET endpoint ByProjectByContributor to filter and return only a project’s pull requests that were made by a specific contributor.

Recall, we are using the following model for the Project entity in this example.

public class Project
{
    public int Id { get; set; }
    public string Title { get; set; }
    public List PullRequests {get; set; }
}

Now, suppose you want to change the Title of a given project. This is a trivial example, as you could simply PUT or PATCH a specific project with key Id. For example, PUT: api/projects(5)

Instead, we will create an OData action with its own endpoint that is designed to update the Title of a specific project. Let’s create an action with the following endpoint:

POST: api/projects(5)/SetTitle

Your controller action may look like the following

// POST: api/projects(5)/SetTitle       
[HttpPost]
[ODataRoute("({id})/SetTitle")]
public async Task<IActionResult> SetTitle([FromODataUri] int id, ODataActionParameters parameters)
{
    if (!ModelState.IsValid)
    {
        return BadRequest();
    }

    string newtitle = (int)parameters["Title"];            

    var project = await _context.Projects
        .Where(p => p.Id == id)
        .FirstOrDefaultAsync();

    project.Title = newTitle;

    _context.Update(project);
    await _context.SaveChangesAsync();
}

Of course, you would want to enclose the SaveChangesAsync() command in a try-catch block in order to catch any DbUpdateConcurrencyException exceptions.

Register OData Action

To use your new OData action, you must first register it in your EDM model builder, just like you did with the OData functions. If you are using endpoint routing and the GetEdmModel() method from the previous tutorial, bind your action to the Project entity type and register the Title parameter.

private IEdmModel GetEdmModel()
{
    var builder = new ODataConventionModelBuilder();
    builder.EntitySet<Project>("Projects");

    ...

    builder.EntityType<Project>()
        .Action("SetTitle")
        .Parameter("Title").Required();

    ...

    return builder.GetEdmModel();
}

Make Call to OData Action

You might be wondering how to pass the parameters to the controller action. For OData actions, all parameters are passed in the payload of the POST request as Json. For example:

POST: api/projects(5)/SetTitle

{
   "Title": "Super Cool C# Project"
}

This can be made easier by creating a service class with a method that handles the Json encoding for you. Such a method might look like:

public class ApiService
{
    public HttpClient _httpClient;

    public ApiService(HttpClient client)
    {
        _httpClient = client;
    }

    ...

    public async Task<HttpResponseMessage> SetTitle(int projectId, string newTitle)
    {
        TitleModel title = new TitleModel() { Title = newTitle };
        string json = JsonSerializer.Serialize(title);
        var stringContent = new StringContent(json, System.Text.Encoding.UTF8, "application/json");

        return await _httpClient.PostAsync($"api/projects({projectId})/SetTitle", stringContent);            
    }

    ...
}

Where the TitleModel object is derived from a class that contains any parameters you want to pass to the controller action.

public class TitleModel
{
    public string Title { get; set; }
}

Once you register the service, you can inject it into a Blazor page, view, or even a controller as a dependency and invoke the SetTitle() method.

Why Use OData Actions?

Again, this is a somewhat trivial example of how to use an OData controller action. In real-world usage, your action may include complex logic and calculations. It can even be used to modify multiple entities across different entity types. For example, suppose you want to become GDPR compliant and allow a user to delete all their data that is stored on your server? You could create an OData action to generate a list of entities they control and remove them by issuing one simple API call.

As you can see, OData actions are a powerful tool to add to your API building toolbelt. Let me know how you plan to use OData actions, and, as always, if you have any questions or thoughts, let me know in the comments below.

Source

OData API Multiple Endpoints, Multiple Parameters

Bradley Wells — Mon, 16 Mar 2020 07:00:00 +0000

Original Article

The Open Data Protocol is a flexible protocol for creating APIs. This tutorial will demonstrate how to pass multiple parameters to an API endpoint. You can use this technique to create multiple GET endpoints instead of relying on OData filters.

Example Models

Suppose you have a project where you are tracking your favorite open source projects and your favorite open source contributors. You might have a database table that holds a list of projects, a table that holds a list of contributors, and a table of pull requests. The model pull request table might be as follows:

public class PullRequest
{
    public int Id { get; set; }
    public string Title { get; set; }

    public int ProjectId { get; set; }
    public int ContributorId { get; set; }

    public Project Project { get; set; }
    public Contributor Contributor { get; set; }
}

The model includes the pull request title, project ID, and ID of the contributor. It also includes navigational properties that will link to the related data, namely the Project and Contributor. In some ways, the pull requests table can be seen as a many-to-many join table with payload that links projects and contributors. A project can have many contributors, and a contributor can contribute to many projects.

public class Project
{
    public int Id { get; set; }
    public string Title { get; set; }
    public List PullRequests {get; set; }
}

Using OData Filters

Suppose, you wanted to retrieve a list of pull requests for a specific project, by a specific contributor. The classical approach would be to retrieve a specific project, including the PullRequests collection, and then filter the collection by ContributorId.

First, in the GetProject (or equivalent) method of ProjectsController , you must make certain to include PullRequests when fetching from the database.

[EnableQuery]
[ODataRoute("({id})")]
public async Task GetProject([FromODataUri] int id)
{
    ...
    var project = await _context.Projects.Where(s => s.Id == id)
        .Include(s => s.PullRequests)
        .FirstOrDefaultAsync();
    ...
}

Then, expand the list of Pull Requests when you fetch a specific Project. You could then filter the pull requests by ContributorId to return only those by the specific contributor.

GET api/projects(1)?$expand=PullRequests&$filter=PullRequests/ContributorId eq 5

One thing worth noting about this approach: Because this query is hard-coded as a string, if you change the name of a variable in the backend model, Visual Studio’s IntelliSense will not be able to help you refactor this instance.

Using OData Functions

If the pull requests themselves are the primary focus of your project, you might have a PullRequestsController with a GET endpoint to fetch all pull requests and a GET endpoint to fetch a specific pull request by its ID. In this case, it could be useful to create an API endpoint to help you filter by ProjectId and ContributorId.

// GET: api/pullrequests/ByProjectByContributor(projectId=1,contributorId=5)
[ODataRoute("ByProjectByContributor(projectId={projectId},contributorId={contributorId})")]
public IQueryable<PullRequest> ByProjectByContributor([FromODataUri] int projectId, [FromODataUri] int contributorId)
{
    var pullRequests = _context.PullRequests.Where(
        pr => pr.ProjectId == projectId
        && pr.ContributorId == contributorId);
    return pullRequests;
}

Before it works, you must register the function in your OData EDM model. Open Startup.cs of your OData API project. I am using endpoint routing with route parsing performed by an EDM model fetched from a method GetEdmModel().

app.UseEndpoints(endpoints =>
{
    endpoints.Select().Filter().OrderBy().Expand().Count().MaxTop(50);
    endpoints.MapODataRoute("api", "api", GetEdmModel());
});

Locate your GetEdmModel() (or equivalent) method and register the function you created. You must also register each of the parameters your function uses. You can configure parameters as optional or required.

private IEdmModel GetEdmModel()
{
    var builder = new ODataConventionModelBuilder();
    builder.EntitySet<Project>("Projects");
    builder.EntitySet<Contributor>("Contributors");
    builder.EntitySet<PullRequest>("PullRequests");

    var pullRequestsByProjectByContributor = builder.EntityType<Project>().Collection
        .Function("ByProjectByContributor")
        .ReturnsCollectionFromEntitySet<Project>("Projects");
    pullRequestsByProjectByContributor.Parameter<int>("projectId").Required();
    pullRequestsByProjectByContributor.Parameter<int>("contributorId").Required();

    return builder.GetEdmModel();
}

If you set an optional parameter, be sure your controller has logic for handling it, such as a default value or a conditional check.

Now you have an extra GET endpoint you can use to pass multiple parameters to your OData API.

GET: api/pullrequests/ByProjectByContributor(projectId=1,contributorId=5)

This approach is especially useful if you plan to create a filtering component on your frontend. Rather than building a complex query string for filtering, you can simply pass the parameters from the frontend filter component to this custom function to fetch only the results your end user wants.

The Bottom Line

In this tutorial, you learned how to add multiple GET endpoints to an OData API. You also learned how to pass multiple parameters to an OData endpoint by registering a custom function in your EDM model. You can use this technique to create as many custom endpoints as your project requires, thus helping keep your data processing on the backend.

Source

OData Endpoint Routing .NET Core

Bradley Wells — Mon, 09 Mar 2020 05:00:00 +0000

If you have previously used OData API in your ASP.NET Core projects, you may have been disappointed to discover that it did not support Endpoint Routing. Well, now there is good news! That has changed beginning with the release of version 7.4.0 of OData. In this tutorial, you will learn how to enable endpoint routing in your OData API applications.

Why Endpoint Routing?

Endpoint routing is a key component of the ASP.NET Core middleware model. It behaves similarly to MVC routing. It allows you to configure middleware between a UseRouting() extension method, where route decisions are made, and a UseEndpoints method, where the endpoint is executed.

Since .NET Core 3.0, Microsoft has recommended using the endpoint routing middleware for all C# web applications. They have even recommended developers to migrate existing applications to endpoint routing where possible. For this reason, it is welcome news to see the OData team proactively address the issues that prevented developers from migrating their API projects.

Enable Endpoint Routing

Previously with OData it was necessary to use MVC routing and configure the routes via a route builder. This solution was less than ideal, but it worked fine if the API was part of a separate project, because you could still take advantage of endpoint routing on your frontend web application, such as a Blazor application.

With OData 7.4.0, you no longer have to make this sacrifice. As of the time of this writing, OData 7.4.0 is in preview. To install it via Nuget, issue the following command:

Install-Package Microsoft.AspNet.OData -Version 7.4.0-beta

Next, open Startup.cs of your OData API and locate the Configure() method. This is where you will call the UseRouting and UseEndpoints middlewares.

app.UseRouting();
app.UseEndpoints()

If your application is using authentication, such as IdentityServer4, you will add the authentication and authorization middleware between these two lines, as follows:

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints()

Next, you must configure the OData endpoints. Expand the UseEndpoints extension method and add any OData features you wish to use. Finally, map the OData route by assigning a route prefix and configure the Entity Data Model.

app.UseEndpoints(endpoints =>
{
    endpoints.Select().Filter().OrderBy().Expand().Count().MaxTop(50);
    endpoints.MapODataRoute("api", "api", GetEdmModel());
});

A complete configuration, may look like the following. In this example, the OData routes are located at the /api/ uri.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.Select().Filter().OrderBy().Expand().Count().MaxTop(50);
        endpoints.MapODataRoute("api", "api", GetEdmModel());
    });            
}

private IEdmModel GetEdmModel()
{
    var builder = new ODataConventionModelBuilder();
    builder.EntitySet<Contact>("Contacts");
    return builder.GetEdmModel();
}

That’s all! Instead of configuring OData service routes in the UseMvc extension method, you are able to configure it within the endpoints middleware. In fact, there is no longer any reason to AddMvcCore or rely on any of the underlying mvc features as of OData 7.4.0.

The Bottom Line

Endpoint routing is the future of .NET and .NET core, and it is the recommended routing model for all applications. Now, you can configure an OData API with endpoint routing. My sample Blazor Contacts template app, using EF Core and an OData API, has been updated and configured to use Endpoint Routing. Feel free to browse through the source code on GitHub to see it in action.

Source

Populate Blazor Dropdown Menu from EF Core Lookup Table

Bradley Wells — Thu, 27 Feb 2020 05:00:00 +0000

A lookup table in your Entity Framework Core database can be a more robust alternative to a simple enum when working with code-first C# data models. In this tutorial, you will learn how to create a lookup table and use its contents to populate a dropdown list in a Blazor application.

Creating the Model

Suppose you have an application that stores data about local businesses. The model for your Business class might include the the following basic identifying properties.

public class Business
{
    public int Id { get; set; }
    public string BusinessName { get; set; }
    public string Address { get; set; }
    public string PhoneNumber { get; set; }
    public int? CategoryId { get; set; }
    public Category Category { get; set; }
}

The navigation property with name Category derives from the Category class, defined below. The integer CategoryId serves as a foreign key for Category. Let’s create a data model for Category. Add a class named Category.cs to your project. The lookup table model will contain two properties, an ID, which will serve as the key for the database, and the category Name.

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

When the Business.Category is expanded, your application will have access to the category’s Name.

Configuring EF Core Database Context

Now that you have created the model, you need to configure the database context, so Entity Framework can use it. First, add the following line to DbContext.

public DbSet<Category> Categories { get; set; }

Then, in OnModelCreating of DbContext , add a table to store the list of categories.

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    ...
    modelBuilder.Entity<Category>().ToTable("Categories");
    ...
}

Seed the Lookup Table

You have several options for populating the lookup table. You could create an API endpoint and POST the categories to the database. This is a great solution, if you wish to update the list periodically.

In this tutorial, you will simply seed the table when the database is created at compile time. For example, you might have DbInitializer class with Initialize() method that you launch from the Main() method of Program.cs.

DbInitializer.Initialize(context);

Within there, you could use the following data to seed the lookup table.

if (context.Categories.Any())
{
    return; // DB has been seeded
}

var categories = new Category[]
{
    new Category
    {
        Name="Banking and Finance"
    },
    new Category
    {
        Name="Fuel and Transportation"
    },
    new Category
    {
        Name="Hotels and Lodging"
    },
    new Category
    {
        Name="Restaurants"
    },
    new Category
    {
        Name="Shopping and Retail"
    }
};

foreach (Category category in categories)
{
    context.Categories.Add(category);
}
context.SaveChanges();

Lookup Table vs Enum

An Enum is a useful construct that assigns a constant to an integer value. An equivalent enum for the Category class might look like the following.

public enum Category
{
    BankingFinance,
    FuelTransportation,
    HotelsLodging,
    Restaurants,
    ShoppingRetail
}

Notice, the enumeration is hard-coded. There is no way to programmatically change the values of an enum. A lookup table, by contrast, provides the flexibility of creating an interface for modifying the list at runtime.

In addition, the constant value cannot include spaces or special characters. Displaying the contents of an enum in a friendly, readable way can, thus, be tricky. There is an annotation property in the System.Runtime.Serialization namespace that helps provide user-friendly display names.

[EnumMember(Value = "Banking and Finance")]
BankingFinance

Unfortunately, as of .NET Core 3.1, the EnumMember attribute does not yet work with the System.Text.Json namespace. The Name property of a lookup table, by contrast, provides the flexibility of a string data type, something a simple enumeration lacks.

Populate Dropdown from Lookup Table

Once you set up an API in your Blazor web app to fetch the list of Categories, you can populate a dropdown list by binding to the CategoryId property.

<div class="form-group row">
    <label for="businessCategory" class="col-sm-6 col-form-label">Category:</label>
    <select id="businessCategory" class="form-control col-sm-6 input-lg" @bind="business.CategoryId">
        <option value="" disabled selected>Select Category</option>
        @if (categories != null)
        {
            @foreach (var category in categories)
            {
                <option value="@category.Id">@category.Name</option>
            }
        }
    </select>
</div>

Source

Automatically add new Azure B2C users to local database table

Bradley Wells — Tue, 18 Feb 2020 13:15:00 +0000

This tutorial will teach you how to automatically add an Azure AD B2C user to a local database table when the user completes the signup user flow. In particular, you will learn how to use the OnTicketReceived OpenIdConnectEvents event along with Azure’s boolean newUser claim to determine that a user has just registered on your ASP.NET (Blazor, MVC, or Razor Pages) site, and then you will take some action, such as making an API call, based on that signup event.

Configure Azure

It is fairly common practice to track user information in a local database, even when working with an external identity provider, such as Azure AD B2C.

The first thing you must do to catch the signup event is configure Azure to return the “User is new” claim to your application in the signup user flow. To do this, open the Azure Portal to the appropriate directory, navigate to your AD B2C tenant, and locate the signup user flow. From there, load the user flow’s application claims, and be sure “User is new” is checked.

In this tutorial, you will be storing the user’s Object ID in your local user table, so be sure that claim is enabled as well.

Create User Model

For this tutorial, you will use an entity framework core model to store your user information. The simplest form of this model will hold the ObjectId of the user, as found in Azure AD B2C. That model would look like the following.

public class User
{
    [Key]
    public int Id { get; set; }
    public string UserOId { get; set; }
}

It is outside the scope of this tutorial to demonstrate how to create the API controller and endpoints for working with the User entity. Nor does this tutorial seek to show how to add the entity to your database context. It is sufficient to say that both things must be done.

Create OnTicketReceived Callback

When writing this tutorial, I decided to keep my OnTicketReceived event handler in the same class as my other Azure AD B2C customizations. Feel free to put yours wherever you want, but I will add mine to a static B2CExtensions class.

The OnTicketReceived event is raised any time a user logs in to or registers for an account on your web app. Since you are only interested in performing an action when a user registers, not when they log in, you will first need to check if the user is new. To do this, you must check the claims sent back to your application by Azure.

If a user is new, that is to say they have just successfully completed the signup user flow, a bool newUser = true will be included in the claims list. If the user is not new, this claim will not be present, and you will not need to take any action. Name your event handler OnTicketReceivedCallback. The handler will take the following form.

public async static Task<Task> OnTicketReceivedCallback(TicketReceivedContext context)
{
   //Check if user just completed signup flow
   List<Claim> claims = context.Principal.Claims.ToList();
   bool isNewUser = claims.FirstOrDefault(x => x.Type == "newUser") == null ? false : true;

   //If so, do what needs to be done
   if (isNewUser)
   {
       //Write objectid to local user table
   }

   return Task.CompletedTask;
}

Write User to DB

In a previous tutorial, you learned about using the HttpClientFactory to register a typed HttpClient that you can use throughout your Blazor web application to make API calls. This tutorial will use that same approach by referencing a CreateUserAsync method in a registered class called ApiService. For a reminder about how configure this setup, please see the HttpClientFactory and Web API tutorial.

First, get the user’s object ID from Azure by fetching the value of the NameIdentifier claim type. In my solution, I write this value (and any other values from the User model I wish to be included in the local table) to a new instance of the User object and I pass that object to the ApiService class which will attempt to POST to the API. Your solution may look different.

public async static Task<Task> OnTicketReceivedCallback(TicketReceivedContext context)
{
   //Check if user just completed signup flow
   List<Claim> claims = context.Principal.Claims.ToList();
   bool isNewUser = claims.FirstOrDefault(x => x.Type == "newUser") == null ? false : true;

   //If so, do what needs to be done
   if (isNewUser)
   {
        string userOId = claims.FirstOrDefault(c => c.Type == ClaimTypes.NameIdentifier).Value;
        //Write objectid to local user table
        User user = new User() { UserOId = userOId };
        var response = await context.HttpContext.RequestServices.GetService<Services.ApiService>().CreateUserAsync(user);
        if (!response.IsSuccessStatusCode)
        {
            //failed to write oid to database
        }
   }

   return Task.CompletedTask;
}

Register Event Handler

To register the event handler you just created, OnTicketReceivedCallback, as a handler for the OnTicketReceived event, open your Blazor project’s Startup.cs file and locate the ConfigureServices() method.

If you enabled Azure authentication when you created the project in Visual Studio, it was likely scaffolded using the AzureADB2C.UI package. To register a handler for the OnTicketReceived event, add the following lines.

services.Configure<OpenIdConnectOptions>(AzureADB2CDefaults.OpenIdScheme, options =>
    options.Events = new OpenIdConnectEvents
    {
        OnTicketReceived = B2CExtensions.OnTicketReceivedCallback
    });

If your handler is located in a different place, be sure to make the appropriate adjustments.

Troubleshooting and Bottom Line

If you run into problems, be sure the event handler assignment is registered after any of its dependencies. For example, it should appear after you have added and configured AzureADB2C authentication. In our example, OnTicketReceivedCallback also references the ApiService HttpClient, so it should also appear after that service is added. Consider placing the event handler assignment at the bottom of ConfigureServices.

Now that you have successfully intercepted the Signup event for your web application, the possibilities are endless.

Source

EF Core and C# Data Model Validation

Bradley Wells — Tue, 04 Feb 2020 05:00:00 +0000

Source

Data validation with Entity Framework Core and C# data models can be fun. In this tutorial, you will learn about some of the most useful annotation attributes that can be used to provide validation for a C# model.

To use data validation attributes, you will use the DataAnnotations namespace.

using System.ComponentModel.DataAnnotations;

Common Attributes: Key and Required

Among the most common data validation annotations are the Key and Required keywords. When using a code-first design, EF Core will attempt to choose a unique key when storing an entity in the database. For example, if ID or classnameID appears in the model, it will be automatically identified as the key. However, if you do not wish to use these naming conventions, you can designate a property as the entity’s key by using the Key annotation.

[Key]
public int UniqueIdentifier { get; set; }

Next, suppose there are properties for which you insist values be stored in the Entity Framework database. You can designate a property as a required property using the Required keyword annotation.

[Required]
public string Name { get; set; }

Now, when you attempt to bind to this model property from a form input, on an ASP.NET web frontend for instance, data validation will automatically take place and an error will display if the user leaves the field blank.

Working with Strings

Suppose you want to ensure that the string entered for the Name field does not exceed a specified number of characters. You can add string length limit validation using the StringLength annotation.

[StringLength(50)]
public string Name { get; set; }

You can also set a minimum length for a string. The following annotation will validate that a given string is between 3 characters and 50 characters.

[StringLength(50,MinimumLength = 3)]

Note, you can combine multiple data annotations. For example, to define the Name property as required, simply stack the Required and StringLength annotations.

[Required]
[StringLength(50)]
public string Name { get; set; }

Validating Specific Data Types

Data annotations can be used to provide simple validation for specific data types. This will save you time, and allow you to focus on getting your product to market. You can, for example, annotate properties that represent credit card numbers, phone numbers, email addresses, and URLs.

To validate that a property is formatted as a credit card number, use the [CreditCard] data annotation. To perform preliminary data validation for a phone number property in a C# data model, use the [Phone] annotation. To validate an email address, annotate the property using the [EmailAddress] keyword. Finally, to ensure that an EF Core property’s value is a URL, use the [Url] data annotation. Consider the following example.

[CreditCard]
public string CreditCardNumber { get; set; }

[Phone]
public string PhoneNumber { get; set; }

[EmailAddress]
public string EmailAddress { get; set; }

[Url]
public string Website { get; set; }

Working with Numbers

If you are working with numbers in your data model, you may need to set some guidelines. For example, you may only want to accept positive integers, or values that fall between a given range. Setting a range of valid values is as simple as using the Range(min, max) syntax as a data annotation.

[Range(0,100)]
public int Percentage { get; set; }

Now, only values between 0 and 100 will be accepted as valid for the Percentage property. In this case, the values must also be integer values since the data type is int.

Custom Error Messages

Suppose you are using the following annotated property in your data model.

[Required]
[StringLength(50)]
public string LastName1 { get; set; }

If the end user attempts to leave the field blank, they will receive an error message that the LastName1 field is required. Using the property’s name in the error message, in this case, does not produce a very user-friendly message. If you would rather the error say “The Last Name field is required,” you are in luck. You can use DataAnnotations to set the name of the property to be used in validation messages using the Display keyword.

[Required]
[StringLength(50)]
[Display(Name = "Last Name")]
public string LastName1 { get; set; }

Instead of using the default validation error messages for such field annotations as Range and StringLength, you can define custom error messages as an attribute of the annotation.

[StringLength(50, ErrorMessage = "Name must be fewer than 50 characters.")]

The Bottom Line

In this tutorial, you learned how a code-first design approach can be used to easily add data validation to a C# data model. Using the validation annotations found in the System.ComponentModel.DataAnnotations namespace will automatically validate strings and numbers before storing them in the database. It even provides a way to give custom error messages on the frontend in case a value is not valid. These techniques help ensure only valid values are store in your Entity Framework Core database.

Source