My post here is strictly related to Blazor v5 but should work in 3.x as well. Additionally, I'm using these methods with bootstrap 4.5 and 5.0 beta 1 but you could easily adapt it to use style's instead of classes or use your own classes.
To those recommending dynamic, I thank you. The dynamic type seems like it can be very valuable when used correctly. Most of the time you'll probably use an interface but this wasn't plausible for me. I went ahead and updated my project with a dynamic return type and it's working great while being the quickest, cleanest solution.
I previously added the following extension methods to boolean types to help me avoid long ternary operators in razor page code.
Here are the 3 main extension methods I use to accomplish it:
public static T Then<T>(this bool value, T result) => value ? result : default;
public static T Then<T>(this bool value, T thenResult, T elseResult) => value ? thenResult : elseResult;
public static T Else<T>(this bool value, T result) => !value ? result : default;
The following are examples of that implementation:
<div class="@Hidden.Then("d-none")">
Hidden content...
</div>
Note: ErrorOrWarning would hide the content if there was no error/warning so I could default it to yellow/italic but this is an example so please use your imagination:
<div class="@ErrorOrWarning.Else("d-none")" style="@Error.Then("color:red;font-weight:bold;","color:yellow;font-style:italic;")">
Error/Warning content...
</div>
This is the typical implementation without the extension methods. It's common to see this technique in Blazor guides/tutorials/videos online. There are cleaner ways to handle it but this is the basic idea:
<div class="@(ErrorOrWarning ? "" : "d-none")" style="@(Error ? "color:red;font-weight:bold;" : "color:yellow;font-style:italic;")">
Error/Warning content...
</div>
While this might not seem like too big a difference, if you have a lot of dynamic content/styles driving your page, it can get really messy. With those 3 lines of code you can enhance the readability and cleanliness and it really does reduce risk of typos. Adding two more extension methods, you can reduce the risk even further Note: Again, this is using bootstrap class "d-none" for the style "display:none!important" but you could just as easily replace with your own usage:
public static string ThenShow(this bool value) => value ? "" : "d-none";
public static string ThenHide(this bool value) => value ? "d-none" : "";
The limitation I previously faced was when using the overloaded Then(thenResult, elseResult), each of the parameters must be of the same type. 99% of the time this is fine. Actually, another 0.5% of the time it's still okay because you can probably solve it quickly with a .ToString() or an explicit cast.
What I ran into, and what took me to this post was:
I have a control you can imagine as a button. There is an Enum property allowing the user to select an icon to display. The selected Enum dynamically populates a readonly MarkupString property. As an alternative option, they can use the ChildContent (or IconContent in my example) of type RenderFragment. This will let them manually add anything they want (maybe an iFrame to stackoverflow haha) but my intention is for them to add style, most likely in the form of an icon.
I know I can cast/convert one to the other however my existing extension method is so clean and simple, it would be great to be able to use pass the MarkupString and RenderFragment together as parameters, conditionally output to the razor page. So, thanks to this post, I changed my Then(thenResult, elseResult) extension methods to use unique generic parameter types and return a dynamic type like so:
public static dynamic Then<T,E>(this bool value, T thenResult, E elseResult) => value ? thenResult : elseResult;
Now in my razor page I have a very simple line for the icon output. Note: IconContent is a RenderFragment and IconMarkup is a MarkupString.
@((@IconContent == null).Then(IconMarkup, IconContent))
And because I love extension methods and I'm typing this up, I took it a step further with another extension method:
public static bool IsNull(this RenderFragment value) => value == null;
Which enables the extremely clean and simple:
@IconContent.IsNull().Then(IconMarkup, IconContent)
Here's the extra extension method I mentioned above which converts a string to a MarkupString. It might be overkill but I like it.
public static MarkupString ToMarkup(this string value) => (MarkupString)value;
Let me know if you have a better recommendation or if you think I'm doing something wrong. I'm sure this post makes it seem like I overuse extension methods but I really don't. I keep their use limited to outcomes such as I've outlined in this post.
object
and then cast the result, or use a generic methodpublic string|int GetSomeStringOrNumberValue()
, but of course this would open a huge can of worms as to how callers of the method would handle return values.