Now that we got used to nested loops and the way to use them to draw figures on the console, we can get into something even more interesting: we can see how loops can be used to draw in a Web environment. We will make a web application that visualizes a number rating (a number from 0 to 100) with stars. This kind of visualization is common in e-commerce sites, reviews of products, event rating, rating of apps, and others.
Don't worry if you don't understand all of the code, how exactly it is written and how the project works. It is normal, now we are learning to write code and we are a long way from the web development technologies. If you are struggling to write your project by following the steps, watch the video from the beginning of the chapter or ask in the SoftUni forum: https://softuni.bg/forum.
Watch a video lesson to learn how to build ASP.NET MVC Web app to draw ratings by given number: https://youtu.be/ErnapuBJvZQ.
Your task now is to create an ASP.NET MVC Web Application for visualizing a rating (a number from 0 to 100). 1 to 10 stars should be drawn (with halves). The stars should be generated with a
Create a new ASP.NET MVC web app with C# in Visual Studio. Add a new project from [Solution Explorer] -> [Add] -> [New Project…]. Give it a meaningful name, for example "WebApp-Ratings".
Choose the type of the app to be MVC.
Open and edit the file
Views/Home/Index.cshtml. Delete everything and insert the following code:
This code creates a web form
<form> with a field
"rating" for inputting a number in the range [0 … 100] and a button [Draw] to send data from the form to the server. The action that will process the data is called
/Home/DrawRatings, which means method
DrawRatings in controller
Home, which is in the file
HomeController.cs. After the form the contents of
ViewBag.Stars are printed. The code that will be inside will be dynamically generated by the HTML controller with a series of stars.
Add a method
DrawRatings in the controller
HomeController. Open the file
Controllers/HomeController.cs and add the following code:
The above code takes the number
rating, makes some calculations to find the number of full stars, the number of empty stars and the number of half-full stars, after which it generates an HTML code, which orders a few pictures of stars one after the other so that it can make the rating picture from them. The ready HTML code is stored in
ViewBag.Stars to visualize the view
Index.cshtml. Additionally, the sent rating is kept (as a number) in
ViewBag.Rating, so that it can be put in the field for rating in the view. In order to ease your work, you can help yourself with the picture of Visual Studio below:
Create a new images folder in the project, using [Solution Explorer]:
Now add the pictures with the stars (they are a part of the files with this project and can be downloaded here). Copy them from Windows Explorer and paste them in the images folder in [Solution Explorer] in Visual Studio.
Start the project with [Ctrl+F5] and enjoy:
If you have a problem with the example project above, you can ask for help in the SoftUni discussion forum: https://forum.softuni.org.