Update: Removed JavaScript dependency from the Blazor CRUD App

Yesterday I posted how to create a CRUD App using Blazor and ASP.NET Core and got a good response from folks on Facebook and Twitter. This Blazor app is using JavaScript for showing/hiding the HTML elements on the page. David Masterson on twitter pointed out that it can be done in another neat way that too without JavaScript and I thought of sharing with you (with his permission) how to update the same CRUD blazor app with no dependency on JavaScript.

Let’s add another component named ToDoWithoutJS.cshtml to our blazor app with the following code. Previously, we were calling the JavaScript method on click on Edit, Update and Cancel button. This code makes use of the two-way data binding feature to set the display of HTML controls.

There is a variable defined SelectedID and its value is changed on the click of Edit, Update and Cancel button, which in turn triggers these functions to return the updated value for setting up the display property of HTML controls.

String ShowOnEditing(int _id)
{
    return (SelectedID == _id) ? "" : "none";
}

String HideOnEditing(int _id)
{
    return (SelectedID == _id) ? "none" : "";
}

It’s really implemented in a neat way and takes away all those lengthy JavaScript code. The updated source code is available at GitHub and David Masterson’s updated code is also available at GitHub. Feel free to play around with this app and share your knowledge about Blazor to the world.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then