Convert Bootstrap Template to Blazor (Part 5)

This is part 4 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can read about the other post here:

1.       Part 1 – Create project and Copy over assets
2.       Part 2 - Navigation
3.       Part 3 – Header and Footer
4.       Part 4 – About and Copyright

With building this component there are a couple of new concepts that we get to deal with.  We can break down what we need to do into these steps:

1. Create a contact data model with data annotations 
2. Convert the current form into to a Blazor form component 
3. Add the Submit button handler 
4. Create a service to handle the submit 

Data Model 

The fields we need are listed above, we just need to determine the validation rules.  Here is what we decided: 

1. Name 
1. Required  
2. Max length of 100 
2. Phone Number  
1. Required 
2. Max length of 12 
3. Minimum length of 10 
3. Email 
1. Required 
2. DataType of Email 
4. Message 
1. Required 
2. Max Length 1000 (we don’t want huge messages) 

Convert the HTML Form 

1. We need to convert the html form tag into the Blazor form component 
2. For each field control 
1. Change the DIV elements to P tags 
1. This just cleans up the code 
2. Change the input tags to the InputText components 
1. We need to use the Blazor control 
3. Remove the data-validation-required-message 
1. This will be handled by the data annotations 
4. Removed the place holder text 
1. This is just personal taste 
5. Remove the p tag that is used for showing the validation 
6. Add the data binding 
3. Change the “Send” to “Submit” 
1. Just personal taste 

Before 

                       <div class="control-group"> 

                            <div class="form-group floating-label-form-group controls mb-0 pb-2"> 

                                <label>Name</label> 

                                <input class="form-control" id="name" type="text" placeholder="Name" required="required" data-validation-required-message="Please enter your name."> 

                                <p class="help-block text-danger"></p> 

                            </div> 

                        </div> 

Blazor Style 

    <p class="form-group controls mb-0 pb-2"> 

        <label for="message">Message </label> 

        <InputText class="form-control" id="message" @bind-Value="person.Message" /> 

    </p> 

To me this is much cleaner code.   

Submit button handler 

We need to create the handler that we will be using to save the contact information.  This ends up being a simple event handler: 

    private ContactMe person = new ContactMe(); 

    string error = ""; 

    private async Task HandleValidSubmit() 

    { 

        error = await service.SendContactMessage(person); 

        if(string.IsNullOrEmpty(error)) 

        { 

            person = new ContactMe(); 

        } 

    }

We set the model, person and we need a string to hold any errors we get back from trying to save the contact data.  In the actual event, we call the service to send the contact message.   We need to inject that service into our page as well. 

If the send is successful, we will blank out the model so the page fields will be empty.  If we did not do this, the values in the fields will still be shown after the submit. 

Contact Me Service 

This is a normal C# service.  This is the service that in a production environment you would handle the contact request for real.  You can send an email, call a function, post a message, anything that would fit in your workflow.   

In our example we are simply going to save the serialized json to a folder on the server.  This should work for us.  This will be an async method. 

        public async Task<string> SendContactMessage(ContactMe person) 

        { 

            string result = ""; 

            //put code here to handle the submit.  For this example, we are just witting it out to a folder 

            if (!string.IsNullOrEmpty(person.Name)) 

            { 

                try 

                { 

                    string fileName = $"{Environment.CurrentDirectory}/wwwroot/ContactMes/{person.Name}.contactMe"; 

                    TextWriter tw = new StreamWriter(fileName); 

                    await tw.WriteLineAsync(JsonSerializer.Serialize(person)); 

                    tw.Close(); 

                } 

                catch(Exception ex) 

                { 

                    Console.WriteLine($"Error: {ex.Message}"); 

                    result = "Unable to save contact to data store"; 

                } 

            } 

            return result; 

        } 

The only thing new should be the saving o f the file to the server.  We need to get the current directory and add the folder we want to write to.  We decided to use the name as the file name.  If the data gets saved successfully, we return an empty string, else we return the error. 

We now have a generic contact me component that we can use elsewhere, but we can make one more improvement.  Let’s add a toast after we send the data.  That will provide user feedback and make the experience a little better. 

See this post for adding a toast.

There we have it, a reusable contact me form.  To use in production you will just need to code the service to process the request how you would like.

In the next part we will take a look at how we can make the Portfolio section as a component.

[Source Code]