For the complete navigation for this series, you can visit the Blazor Series page<\/a>.<\/p>\n Let’s start.<\/p>\n For our application to work, we need to have a server-side implementation for the POST action. Of course, this will be a basic implementation because this series is not about the Web API logic, it is about the Blazor WebAssembly. So, if you want to learn in great detail about handling POST actions in Web API, we strongly recommend reading our article on that topic<\/a>.<\/p>\n That said, let\u2019s start with the interface modification:<\/p>\n Then, we have to implement this method in the repository class:<\/p>\n Finally, we have to add a And that\u2019s all it takes.<\/p>\n We can send the POST request from Postman:<\/p>\n And we can confirm that a new product has been created. Of course, you can check the database as well.<\/p>\n Now that we have prepared the server-side logic, we can continue with the client-side. The first thing we are going to do is to modify the Then, let\u2019s modify the In this method, we serialize our product object and create a new body content with the We should be able to navigate to the Product creation page and for that, let\u2019s create it in the Now, let\u2019s modify the class file:<\/p>\n Here, we have a private After the class modification, let\u2019s create our form in the In this file, we create a route with the Of course, later on in the series, we are going to replace the input text control for the ImageUrl property and implement a file upload functionality for that control.<\/p>\n So, now we have to modify our And that\u2019s it. All we have to do is to inject our product repository service and call the Now, we can test the solution:<\/p>\n After we click the create button, we can inspect the product page and we are going to find our new product for sure.<\/p>\n Excellent. But far from over.<\/p>\n We need to implement validation for our form and we have to notify the user about the successfully create action. So, let\u2019s continue.<\/p>\n To start with the validation process, we have to install the After that, we have to modify the Here, we require the Finally, we have to modify the We can see that we change the Now, if we try to create a product with invalid data:<\/p>\n We can see the errors on the screen, and our request is not sent.<\/p>\n One more thing. We are only showing the error messages next to the validated inputs. But, we can show the error summary as well by using the After this implementation, we can finally create a notification component for our Then, let\u2019s modify the razor file first:<\/p>\n This is a simple bootstrap code for showing a modal window. Now, we need to create these variables and methods in the class file:<\/p>\n So, in both methods, we give a value to each of our variables and additionally call the Now, let\u2019s add this component to the We can see the Finally, we have to modify the In here, we just create the Now, as soon as we create a new product, we are going to see a modal window with the success message:<\/p>\nHandling the POST action on the Web API\u2019s Side<\/h2>\n
public interface IProductRepository\r\n{\r\n Task<PagedList<Product>> GetProducts(ProductParameters productParameters);\r\n Task CreateProduct(Product product);\r\n}\r\n<\/pre>\npublic async Task CreateProduct(Product product)\r\n{\r\n _context.Add(product);\r\n await _context.SaveChangesAsync();\r\n}\r\n<\/pre>\nCreate<\/code> action in the ProductController<\/code>:<\/p>\n[HttpPost]\r\npublic async Task<IActionResult> CreateProduct([FromBody] Product product)\r\n{\r\n if (product == null)\r\n return BadRequest();\r\n \r\n \/\/model validation\u2026\r\n\r\n await _repo.CreateProduct(product);\r\n\r\n return Created(\"\", product);\r\n}\r\n<\/pre>\n![\"Create](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/46-Create-Postman-Request.png\")
<\/a><\/p>\nPreparing the POST Request on the Blazor WebAssembly Side<\/h2>\n
IProductHttpRepository<\/code> interface:<\/p>\npublic interface IProductHttpRepository\r\n{\r\n Task<PagingResponse<Product>> GetProducts(ProductParameters productParameters);\r\n Task CreateProduct(Product product);\r\n}\r\n<\/pre>\nProductHttpRepository<\/code> class:<\/p>\npublic async Task CreateProduct(Product product)\r\n{\r\n var content = JsonSerializer.Serialize(product);\r\n var bodyContent = new StringContent(content, Encoding.UTF8, \"application\/json\");\r\n\r\n var postResult = await _client.PostAsync(\"products\", bodyContent);\r\n var postContent = await postResult.Content.ReadAsStringAsync();\r\n\r\n if(!postResult.IsSuccessStatusCode)\r\n {\r\n throw new ApplicationException(postContent);\r\n }\r\n}\r\n<\/pre>\nStringContent<\/code> class. Then, we just use the PostAsync<\/code> method to send the POST request to the server-side application. Additionally, we extract the content from the response. If the response is unsuccessful, we just throw an exception with the postContent variable as a parameter.<\/p>\nCreating Blazor WebAssembly Forms<\/h2>\n
Pages<\/code> folder:<\/p>\n![\"Create](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/47-Create-product-component-structure.png\")
<\/a><\/p>\npublic partial class CreateProduct\r\n{\r\n private Product _product = new Product();\r\n\r\n private void Create()\r\n {\r\n \r\n }\r\n}<\/pre>\n_product<\/code> variable that we are going to use to bind our values from the form input fields. Also, we have a single Create<\/code> method to execute when we click the Submit<\/code> button on the form. We are going to leave it empty for now.<\/p>\nCreateProduct<\/code> razor file. If you are using .NET 6 and above, just use <\/strong>mb-3<\/code> class instead of the <\/strong>form-group<\/code> to keep everything in order<\/strong>:<\/p>\n@page \"\/createProduct\"\r\n\r\n<h2>Create Product Form<\/h2>\r\n\r\n<EditForm Model=\"_product\" OnSubmit=\"Create\" class=\"card card-body bg-light mt-5\">\r\n <div class=\"form-group row\">\r\n <label for=\"name\" class=\"col-md-2 col-form-label\">Name:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"name\" class=\"form-control\" @bind-Value=\"_product.Name\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"supplier\" class=\"col-md-2 col-form-label\">Supplier:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"supplier\" class=\"form-control\" @bind-Value=\"_product.Supplier\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"price\" class=\"col-md-2 col-form-label\">Price:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputNumber id=\"price\" class=\"form-control\" @bind-Value=\"_product.Price\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"image\" class=\"col-md-2 col-form-label\">Image:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"image\" class=\"form-control\" @bind-Value=\"_product.ImageUrl\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-right\">\r\n <button type=\"submit\" class=\"btn btn-success\">Create<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/EditForm>\r\n<\/pre>\n
@page<\/code> directive and then our form elements. We use the EditForm<\/code> component to create our form and this component accepts the Model<\/code> parameter and the OnSubmit<\/code> event callback. For the Model<\/code> parameter, we pass our _product<\/code> object, and for the OnSubmit<\/code> event emitter, we provide our Create<\/code> method. Then, we have a familiar code with bootstrap classes, InputText<\/code> and InputNumber<\/code> components. These components help us working with the forms by providing additional styles for valid and invalid controls. Furthermore, Blazor provides us with additional Input components for different input types (InputCheckBox, InputDate, InputSelect\u2026).<\/p>\nCalling the Repository Method and Testing the Creation Action<\/h3>\n
CreateProduct<\/code> class:<\/p>\npublic partial class CreateProduct\r\n{\r\n private Product _product = new Product();\r\n\r\n [Inject]\r\n public IProductHttpRepository ProductRepo { get; set; }\r\n\r\n private async Task Create()\r\n {\r\n await ProductRepo.CreateProduct(_product);\r\n }\r\n}\r\n<\/pre>\nCreateProduct<\/code> method in the Create<\/code> method.<\/p>\n![\"Create](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/48-Create-form-test.png\")
<\/a><\/p>\nBlazor WebAssembly Forms Validation<\/h2>\n
System.ComponentModel.Annotations<\/code> library in the Entities<\/code> project:<\/p>\n![\"Annotations](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/50-Annotations-package-installed.png\")
<\/a><\/p>\nPM> Install-Package System.ComponentModel.Annotations<\/code><\/p>\nProduct.cs<\/code> class:<\/p>\npublic class Product\r\n{\r\n public Guid Id { get; set; }\r\n [Required(ErrorMessage = \"Name is required field\")]\r\n public string Name { get; set; }\r\n [Required(ErrorMessage = \"Supplier is required field\")]\r\n public string Supplier { get; set; }\r\n [Range(1, double.MaxValue, ErrorMessage = \"Value for the Price can't be lower than 1\")]\r\n public double Price { get; set; }\r\n public string ImageUrl { get; set; }\r\n}\r\n<\/pre>\nName<\/code> and the Supplier<\/code> properties to be populated and we don\u2019t allow the price to be less than 1.<\/p>\nCreateProduct<\/code> razor file to add the validation components:<\/p>\n<EditForm Model=\"_product\" OnValidSubmit=\"Create\" class=\"card card-body bg-light mt-5\">\r\n <DataAnnotationsValidator \/>\r\n <div class=\"form-group row\">\r\n <label for=\"name\" class=\"col-md-2 col-form-label\">Name:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"name\" class=\"form-control\" @bind-Value=\"_product.Name\" \/>\r\n <ValidationMessage For=\"@(() => _product.Name)\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"supplier\" class=\"col-md-2 col-form-label\">Supplier:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"supplier\" class=\"form-control\" @bind-Value=\"_product.Supplier\" \/>\r\n <ValidationMessage For=\"@(() => _product.Supplier)\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"price\" class=\"col-md-2 col-form-label\">Price:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputNumber id=\"price\" class=\"form-control\" @bind-Value=\"_product.Price\" \/>\r\n <ValidationMessage For=\"@(() => _product.Price)\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group row\">\r\n <label for=\"image\" class=\"col-md-2 col-form-label\">Image:<\/label>\r\n <div class=\"col-md-10\">\r\n <InputText id=\"image\" class=\"form-control\" @bind-Value=\"_product.ImageUrl\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-right\">\r\n <button type=\"submit\" class=\"btn btn-success\">Create<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/EditForm>\r\n<\/pre>\n
OnSubmit<\/code> event emitter to the OnValidSubmit<\/code> event emitter. With this, our form will send the request \u2013 once we click the submit button \u2013 only if it’s valid. Then, we add the DataAnnotationsValidator<\/code> component to help our form understand the rules from the Product.cs<\/code> class. Finally, we use the ValidationMessage<\/code> component to show the error message for each input field.<\/p>\n![\"](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/51-Invalid-form.png\")
<\/a><\/p>\n<ValidationSummary \/><\/code> component. If you want to use it, just place it right below the <DataAnnotationsValidator \/><\/code> component.<\/p>\nUsing Bootstrap Modal for Notifications and @ref Directive<\/h2>\n
CreateProduct<\/code> component. To do that, we are going to create the SuccessNotification.razor<\/code> and .cs<\/code> files in the Shared<\/code> folder.<\/p>\n<div class=\"modal @_modalClass\" tabindex=\"-1\" role=\"dialog\" style=\"display:@_modalDisplay\">\r\n <div class=\"modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Success<\/h5>\r\n <button type=\"button\" class=\"close\" @onclick=\"Hide\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <p>Action completed successfully.<\/p>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-success\" data-dismiss=\"modal\" @onclick=\"Hide\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n@if (_showBackdrop)\r\n{\r\n <div class=\"modal-backdrop fade show\"><\/div>\r\n}\r\n<\/pre>\npublic partial class SuccessNotification\r\n{\r\n private string _modalDisplay;\r\n private string _modalClass;\r\n private bool _showBackdrop;\r\n\r\n [Inject]\r\n public NavigationManager Navigation { get; set; }\r\n\r\n public void Show()\r\n {\r\n _modalDisplay = \"block;\";\r\n _modalClass = \"show\";\r\n _showBackdrop = true;\r\n StateHasChanged();\r\n }\r\n\r\n private void Hide()\r\n {\r\n _modalDisplay = \"none;\";\r\n _modalClass = \"\";\r\n _showBackdrop = false;\r\n StateHasChanged();\r\n Navigation.NavigateTo(\"\/products\");\r\n }\r\n}<\/pre>\nStateHasChanged<\/code> method. This method notifies a component that the state has changed and forces it to re-render. Additionally, we have injected the NavigationManager<\/code> service and used it to navigate to the products page.<\/p>\nCreateProduct<\/code> component:<\/p>\n<SuccessNotification @ref=\"_notification\"\/><\/code><\/p>\n@ref<\/code> directive. This directive enables using the members from the child component inside the parent component. Because we want to show this notification inside the CreateProduct<\/code> component, we are going to use the _notification<\/code> variable to call the Show<\/code> method which resides in the SuccessNotification<\/code> component.<\/p>\nCreateProduct<\/code> class file:<\/p>\npublic partial class CreateProduct\r\n{\r\n private Product _product = new Product();\r\n private SuccessNotification _notification;\r\n\r\n [Inject]\r\n public IProductHttpRepository ProductRepo { get; set; }\r\n\r\n private async Task Create()\r\n {\r\n await ProductRepo.CreateProduct(_product);\r\n _notification.Show();\r\n }\r\n}\r\n<\/pre>\n_notification<\/code> variable of type SuccessNotification<\/code> and use it inside the Create<\/code> method to show the notification.<\/p>\n
![\"Success](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/52-modal-success.png\")
<\/a><\/p>\n