How do you use Option<T> in a Razor/Blazor page?

[MrYossu]

Just trying to get my head around some basic ideas here. Say I have a Razor/Blazor page (same question in both cases), and I want to show details for a customer, based on the ID passed in the URL.

First stab at this would be to do something like this...

private Option<Customer> _customer;

protected override async Task OnInitializedAsync() {
  _customer = await UserManager.Users.FirstOrDefaultAsync(u => u.Id == Id);
}

That sets the _customer correctly, but how do I proceed then? If the customer has been found, I want to show details, if not, I want to show a message.

Previously I would have had something like this in my markup...

if (_customer == null) {
  <h2>Sorry, that customer cannot be found.</h2>
} else {
  <p>Hello @_customer.FirstName</p>
}

However, this approach doesn't give me any benefits for using Option<T> over a simple Customer variable that can be null if the ID wasn't valid.

Using Match() on the _customer variable is awkward in Razor, as it's messy trying to insert markup inside a function...

@_customer.Match(jim => {
  // What goes here?
}, () => {
  // What goes here?
})

I realise that this is a very simplistic case, and possibly overkill for Option<T>, but I'm going one step at a time.

Anyone able to advise? Thanks

P.S. I am sure that there are better ways of doing the data access as well, as the code above just uses plain old ASP.NET Core injection. I did that for simplicity, but if can give any guidelines as to how to make that more functional, it would be even better!

[louthy]

I don't use Razor, so am of little help here. Anyone else had experience?

[MrYossu]

I don't use Razor, so am of little help here. Anyone else had experience?

Well, I think the question would be the same in Razor pages or Blazor if that makes any difference.

Thanks

[orthoxerox]

I would use a component that has two render fragments and renders one of them depending on the status, something like this:

@typeparam T

@Value.Match(x => Some(x), None)

@code {
    [Parameter]
    public LanguageExt.Option<T> Value { get; set; }

    [Parameter]
    public RenderFragment<T> Some { get; set; }

    [Parameter]
    public RenderFragment None { get; set; }
}

You then can use it like this:

<Option Value="some">
    <Some>Hello, @context</Some>
    <None>No name given</None>
</Option>

<Option Value="none">
    <Some>Hello, @context</Some>
    <None>No name given</None>
</Option>

@code
{
    public LanguageExt.Option<string> some { get; set; } = "Bob";
    public LanguageExt.Option<string> none { get; set; } = LanguageExt.Option<string>.None;
} 

Of course, a better name should be picked, since it conflicts with LanguageExt.Option<T>. I also don't like the lambda in the Match, but ¯\_(ツ)_/¯

[MrYossu]

@orthoxerox Sorry for the delay in replying, I never got a notification of your reply.

Thanks for the suggestion, it's very neat. The lambda isn't that bad, I've seen worse!

One question though. Why did you make it generic? Won't you always be passing in a string?

Thanks again

[orthoxerox]

I actually don't know why I made it generic, I haven't even tested if it works with something like Option<int> or Option<Customer>.

[MrYossu]

OK, as long as I wasn't missing something clever!

I'm not really sure what it would mean to render Option<Customer> in Razor anyway. Rendering is normally done on a string.

Thanks again for the suggestion, I'll have a play with it.

[MrYossu]

@orthoxerox Your suggestion got me thinking (pretty impressive feat by the way!).

First off, I was wrong about the generic constraint. Of course you would want to pass in something other than a string. Suppose you had a page to show customer details, then the type constraint would be Customer, so you could do something like this...

<OptionBlazor Value="_customer" Context="customer">
  <Some>@customer.Name is @customer.Age years old</Some>
  <None>No customer</None>
</OptionBlazor>

Note that I changed the component name to OptionBlazor to avoid the conflict with LanguageExt.Option<T>.

Second, I previously created a Busy component, to show a "Loading..." message while data was being loaded. I modified this to use Option<T> like in your suggestion, so I can now do the same as above, but have "Loading..." display while the data is loading, and then either the Some or None content depending on the result. The component code isn't much different from yours...

@using LanguageExt
@typeparam T

@if (!Data.HasValue) {
  <p><span class="fad fa-spin fa-spinner" aria-hidden="true"></span> Loading...</p>
} else {
  @Data.Value.Match(x => Some(x), None);
}

@code {
 [Parameter]
  public Option<T>? Data { get; set; }

  [Parameter]
  public RenderFragment<T> Some { get; set; }

  [Parameter]
  public RenderFragment None { get; set; }
}

This of course set me wondering. I have plans for a Validation component, that would show the results of validating the data, an EitherBlazor component to handle the Either monad and so on.

Thanks again.