(C# ASP.NET Core) Practice Exercises and Questions on Modularity

Exercises on Modularity

1. [print name, razor components] Write a razor component that has a function called "GetName" that returns your name as a string. The razor component displays your name by calling this function. Embed this component in your index.cshtml razor page to display your name.

2. [count chars in a string, razor components] Write a razor component that takes two parameters - HostName and CharToCount. The first parameter is the name of a website - like microsoft - without the prefix "https://" and the suffix ".com", and the second parameter is a character, such as 'A'. Your razor component will send a hit to https://{HostName}.com and download the page as a string, and count the number of {CharToCount} in that string and display the characters counted. Use this razor component in a razor page that has a form that accepts HostName and CharToCount as inputs from the user. When the user submits the form, these inputs should be passed to the razor component to display the number of characters found. Hint: use an HttpClient request in "OnInitializedAsync" to download the string and count the chars. You might want to review the tutorial L02 - Razor Components where makeSquare function has been discussed along with passing parameters.

3. [general purpose table component] Write a razor component called Table.razor that accepts three parameters - a string array String[] for its heading row, a String[][] array for the remaining rows to display the data, and a third parameter for css class to be applied to the table. So this is a flexible table that can be re-used in any project. Use this component in a razor page to render a table of three columns - ID, Name and Phone. The data can be of, say, two records. Also pass a css class as a parameter so that the table gets a pleasant look.

4. [click event in a razor component] A razor component can handle and process a click event if it is written as a blazor component. Refer the attached blog link and the linked video to see the basic steps needed for this integration. After that write a component that displays a new quote, each time its button is clicked. Use a String array to hold a few quotations so that a user can click and cycle through them.