A while back, I asked on Dev about moving my blog from WordPress to … well, not WordPress anymore. My main critera was to Markdown instead of whatever the WordPress format is called. The main issue being that you need to replace the code tags.
I resolved to create a tool to do it for me. I’m doing so in Blazor.
The first task was to create a very simple data binding scenario, so I could handle all the view logic in the View Model. I’ve previously written about using view models. This post covers the scenario where you want to bind text boxes and a button.
Let’s see the View Model first:
public class MainViewModel { public string WpText { get; set; } public string MdText { get; set; } public void ConvertText() { MdText = $"Converted {WpText}"; } }
Okay, so we have two strings, and a method that populates the second string with the first. As per the linked post, the plumbing for the view model is very simple; first, it’s registered in ConfigureServices:
public void ConfigureServices(IServiceCollection services) { services.AddTransient<MainViewModel, MainViewModel>(); }
Then it’s injected into the Razor view:
@page "/" @inject ViewModels.MainViewModel MainViewModel
In fact, the next part is much simpler than I thought it would be. To bind a view model property to the view, you just use the syntax bind:
<div class="container"> <div class="row"> <div class="form-group col-md-6"> <label for="WpText">Wordpress Text</label> <input type="text" @[email protected] class="form-control" id="WpText" name="WpText"/> </div> <div class="form-group col-md-6"> <label for="MdText">Markdown</label> <input type="text" @[email protected] class="form-control" id="MdText" name="MdText"/> </div> </div> <div class="row"> <div class="form-group col-md-12"> <input type="button" value="Convert" @[email protected](() => MainViewModel.ConvertText()) class="form-control" id="Submit" /> </div> </div> </div>
Just to point out one thing that tripped me up before I leave this: the event handlers that relate to Blazor must be prefixed with an at symbol (@).