Pizza WebApp Using ASP.net (Razor Pages, SQL Database, Entity Framework)
10 min readJun 17, 2022
Way to Create WebApp
- First of all Open Visual Studio 2022 and create a New Project by choosing “ASP.NET Core Web App” which contains Razor Pages content.
- And after that name your App as you wanted, for my case I named it “RazorPizzaria” and in the additional information page choose the framework as “.NET 6.0 (Long term)” and click CREATE. Once the Project is created we will see all the necessary files inside our project folder.
- Now we will start creating our Project-
- Now we will create 2 folders inside the Pages folder, which are “Checkout” and “Forms” respectively and a Razor page called “Pizza.cshtml”. Inside Checkout folder we will create 2 Razor pages named “Checkout” and “ThankYou” and inside the Forms folder, create a Razor page named “CustomPizza.cshtml”. And the folder structure will look like this,
- Now we will add a nav-link in our main file i.e., “_Layout.cshtml” and in the fig we can see that asp-page refer to “/Pizza” which redirect this link to the Razor page named Pizza.cshtml whic is present in the Pages folder (It works like this).
- Make sure that all your static file kept inside wwwroot folder i.e., css, js as well as all the images related to your project.
- So for the home page, we will do some designing and set some own style in (“wwwroot/css/site.css”)
- Likewise we will create some own styling which we will be adding in our project later on and after that we start creating our home page and the “index.cshtml” file under the Pages folder will look like this,
- And the web-app will look like this
- Now for the “Pizzas” page we have to make the Pizza.cshtml file look like this,
- For next we need Model itself, in-order to get all the data’s that are required to make the pizzas and calculate the pricing. So for this, we have to create a folder named “Model” inside our main project folder. And inside that Model folder, we have to create a class file named “PizzasModel.cs”. And this file contains all the properties which we are going to be need in the future making of project. So the file looks like this (Note-You can add anything you want as per the figure).
- And we have to make sure that we have fixed a baseprice to 2.
- Now lets go head and use our Custom View Model where we’re going to setup this pizza, therefore I’m going to go over to my “CustomPizza.cshtml.cs” file.
- Here in this file as we are fetching the properties from the PizzasModel.cs file we need a property called “[BindProperty]” which is used to bind the associated property of the model file, So now we’re going to bind the PizzasModel to our CustomPizza View Model so to speak.
- But before that we have to fill our CustomPizza.cshtml file.
- Here in the above fig., Pizza.{propertyName} will give the properties that are present in the PizzaModel for e.g., TomatoSauce, Cheese and so on. And the Pizza. will fetch the properties from CustomPizza.cshtml.cs where its getting the instances from PizzaModel. In-short we can say that, Pizza.PizzaName will fetch the value of the user which enters the value. And the webApp will looks like this,
- Here after the form is created, it is actually worthless as this form does nothing, so in-order to make the form works we have to write some code,
- The “OnPost()” there is to catch and use anything submitted with the post method for example as post method is present in the form (“CustomPizza.cshtml” file). IActionResult is the return method for OnPost() as we can return a response or error as well from this return type.
- We still faced an standing error on OnPost() that is because of return value error so that’s why we will be using a response that will be of type “RedirectToPage”. It helps us to where we want to redirect this page to when the form been submitted.
- After doing all this, now our form submit easily and after the submission the redirect page will be as shown below,
- Now as the CustomPizza page created we have to create the “Checkout.cshtml.cs” file.
- In this file, we use “[BindProperties(SupportsGet = true)]” as we are binding multiple properties and especially “SupportsGet = true” is used in-order to support “get” method.
- Now inside the OnGet(), we have to check if pizza name is null or white space and if true then set the default value and the same thing for our image.
- After that we have to do something that we can display on the checkout i.e., in the “Checkout.cshtml” file.
- Now we have to customize this page based on the properties from our model and more specifically what we get from our view model here. So in-order to fetch those properties we will use for e.g., @Model.PizzaPrice. Making changes in the above required places and now the data is actually reflected in the Checkout page.
- But how can we fetch the images we want, so for that we have to add some cs code using the add notation i.e., @ as shown below
- In this file we use `asp-append-version=”true”` , this make sure that the user doesn’t have to refresh the page when we make changes and it is automatically manage.
- And then after the Checkout is done we redirect to the ThankYou page and it seems like this,
- Now lets make a mock database and sending the data we need over asp root.
- Inside of Pizza.cshtml file, we add some code in-order to make the mock database or we can say that a fake database. But before that in the Pizza.cshtml.cs file, inside the view model we will add a public list of pizza model and call it fakePizzaDb for e.g.,
- It looks like this after making the list.
- So after doing this in Pizza.cshtml, we have to add some code and it helps in traversing all properties, map through it and throw the value as shown below,
- Now the web-page looks like this,
- And the confirmation page will looks like this after using the customizing the pizza page,
- As we did all these by keeping mock database in account, So its time to make use of real database. So we are using sql database as so in-order to track the records of Pizza ordered. So that we can save the order in a very very simple way.
Adding an SQL Database
- First of all, We need to create a class inside the Models folder named “PizzaOrder.cs” and set some values in there
- It contains the properties which are going to be in need during the database formation.
- Next we have to create another folder inside our project folder called “Data”. And inside it we have to create a class called “ApplicationDBContext”, after creating this class we have to install some NUGET packages.
- Then we have to install some packages which are, “Microsoft.EntityFrameworkCore”, “Microsoft.EntityFrameworkCore.SqlServer” and “Microsoft.EntityFrameworkCore.Tools”
- In-order to bring our database into life we have to create prop and constructor(ctor) in the “ApplicationDBContext.cs” file and the code looks like this,
- The code present in line no. 8 is called “prop” and the one in 9 is called “ctor”.
- So, the options in this code will define the connection string so that we can say please create or connect to this database. Our new database will have one table with all the PizzaOrders right now.
- Now we have to add the connection strings in our “appsettings.json” file
- We have to find out, what our connectionString is, so in-order to achieve that first we have to go to upper navbar and then “View/SQL-Server-Object-Explorer” and by default when we install Visual Studio on our computer we will also have an sql server installed in it. So by clicking on the SQL Server, we can easily see our connection string (as an Default-Connection) and set your database name as you fit and we are good to go.
- So in-order to connect it first of all we have to go to the “Program.cs” file where we will now add our database the ApplicationDBContext and configure it in that way that it will connect to the ConnectionString that we have just created.
- These codes helps in connecting the main program with our ConnectionString which helps in try to use the sql server and connect to the default connection so it will try to connect to the “DefaultConnection” one database through the route provided.
- We are nearly completing our database setup, so now we need to call 2 comments in-order to make everything run (in-short we have to create migration for our project). So for that Go to “Tools/Nuget Package Manager/Package Manager Console”.
- In that console write the following commands, “add-migration addedPizzaOrder” and leave it for sometime for succeed the build we made. Now a migration folder is created and it contains all the information related to our database as an up and down function.
- Now this one is open migration, we did not yet run it, we don’t have a database, we don’t have a PizzaOrder table right now. So lets jump to our final step i.e., by running the update command on Package Manager Console which is “update-database”, it helps in to run all open migration.
- Now we can see that in our SQL Server we can see our PizzaApp database.
- Finally we have to do some work that when a user order some pizza it must reflect on our database so for this we will go to “Checkout.cshtml.cs” and write some code for this,
- Here we did use Dependency Injection for the above in-order to config the database. We have to create a “constructor”. Here we have our context and this context is our database.
- Now we to create a new model and save it into our database and it will be
- Like this we can save our order in the database.
- Now that our database works good, we will add an extra page called “Orders” where we can locate all our orders(values of database) that user ordered where we can read the persistent data.
- So for this add a Razor page under the Pages folder and after that go to the _Layout.cshtml which is the main file of our project and add a nav-link just below the Pizza one and named it Orders and set the asp-page as “/Orders”.
- Now open the View-Model file “Orders.cshtml.cs” and set the code
- Now set the View file of order one i.e., “Orders.cshtml” we add the GUI as
- By doing these, Now we can create data and can read data.
- So our Project is ready to go.
All the images you will get from here,
Thank You