Building Simple Web Applications Using ASP.NET MVC
Background Information on Model-View-Controller (MVC)
MVC, also known as Model View Controller, is a pattern in software design that is commonly used to develop user interfaces, data models, and controlling logic. It creates a clear separation between the software’s business logic and what is shown to its users. With this emphasis on separation, it gives developers a much easier time dividing development teams as well as making maintenance much easier since problems can commonly arise from one of each end:
- The Model: Problem with data structure.
- The View: If something is not displaying properly.
- The Controller: Data not being updated/modified properly.
Model
The model dictates
what data is stored, usually consists of classes/objects each with their own
properties. There two ways to setup a database using patterns, Data Access
Object (DAO) and Object Relational Mapper (ORM). DAO is the more traditional
approach of database access, tables are created manually by writing and using
SQL statements giving the developer more visibility on what’s going on in the
database. ORM on the other hand is much more automated in a way that the
computer is in charge of generating tables based on classes defined by the
developer in their application. ORMs are much more easier and quicker to set up
(good for smaller and simpler applications) but DAOs allow for more flexibility
in management due to it’s use of SQL statements, which is why companies
nowadays prefer it over ORMs.
In ASP.NET, the data is usually stored in the database using the ORM setup. After a model and controller is created, the table has to be created in the database first using what’s called migrations. By using the command:
add-migration “initialsetup”
the computer automatically generates a migration that is in charge of creating a table for that model in the database. Migrations are basically what this framework uses to update its database.
View
The view is probably the simplest part of this system, it’s basically just straight up html, what the users of the application will be seeing and interacting with. As explained already in my previous blog post, ASP.NET uses the Razor syntax for their front-end pages.
For an
application that aims to display a list of students, a table could consist of a
Student’s firstname, lastname, and possibly their Gpa. By using the C# foreach
function in the cshtml pages, a list of students can easily be printed out by
looping.
Controller
When working with ASP.NET in Visual Studio, a controller with views and basic functionalities can easily be created that references a specific type of model.
When adding
more functionalities to the web app such as a search function, all that needs
to be done is create a new method in the controller with the proper method
call. The controller uses C# language so for deleting entries in the database,
the proper syntax would be:
_context.Student.Remove(student);
Where _context references the dbContext (handled by
the Entity ORM framework for .NET applications), Student is the Model reference, and student is the object to be removed from the
database.
Making the Computer do all the Work
Upon
starting a new project in Visual Studio using the ASP.NET Core Web App
(Model-View-Controller) template, the developer is automatically given the
basic components/structure and some starter pages to begin with. When the application
is started, the basic template with a home, privacy, register, and login pages
are included.
At this
point the developer has to start thinking about what kind of application they
are trying to build or what data they are trying to display. For this blogpost,
my goal is to show you how to display a simple list of objects onto the dashboard
the easy way.
First step is to create a new Model, in this case I will be creating a model for Movie objects. By right-clicking on the models folder, hovering over add… and selecting ‘class’ from the dropdown, a window pops up giving me more options as well as the ability to give it a name. Once created, a new C# file will be added in the models folder.
Inside the new
file created, each movie object must be given attributes as well as a
constructor. In this case each movie will have an id, tile, age rating, as well
as a star rating. By typing out prop followed by hitting Tab2x I can easily create a new attribute
automatically with a getter and setter. As for the constructor, I can type out ctor then hit Tab2x and a blank
constructor will automatically be created for me.
Next up is
to create a controller that deals with processing requests made to this model. By
right-clicking on the Controllers folder, I can hover over add and then select Controller
from the menu and a window pops out giving me different options on how the
controller should be made; empty, with read/write actions, or with views using
Entity Framework. I will be choosing to create a controller using the Entity Framework
as it already pre-populates all the basic code I will be needing for my Movie
application.
Once
selected, I am then led into another screen where I can select which model
class to reference for this controller. I will be choosing the Movie model
since this will be what the application will be displaying.
After the
new controller is created using the Entity framework, different views are
created for the Movie objects; create, details, delete, edit, as well as the
index.cshtml files each of which the user will be able to view and interact
with. But before anyone can fully interact with these new additions, I have to
go on the Package Manager Console and type out the add-migration command as shown earlier in this
blog. By adding the migration, I am making a way for the model to create a new
table in the local database.
After adding
the migration, the database must then be updated to create that new table of
Movies. This time, the command required will be update-database. Once the database has been updated,
users can now navigate to the new page by adding /Movies to the URL.
This isn’t
very user-friendly now, is it? Nobody would know this page existed unless they
made it or if they were told about it. To make this user friendly, adding it to
the navbar would make it more visible to users.
The navbar
items/code are all located in the shared folder within the views folder. The
file we are looking for will be in the _Layout.cshtml and all we need to do is
add a new list item within the navbar div. The asp-controller element should be
referencing the MoviesController (Controller handles the routing for the pages) and the display text should be saying Movies.
After adding
that minor html code, here’s what the navbar looks like:
With some Movie
objects created and added into the database, here is what the list looks like
(each button is fully functioning and updates the database properly):
Conclusion
Working with
ASP.NET Core in Visual Studio feels a little bit of a cheat way to code a web
application. There are for sure more ways to go about creating ASP.NET web
applications but this is by far the easiest and quickest way to start a small
application. Without the options shown throughout this blogpost, creating a
simple web app would for sure be a difficult task. I have learned most of the
basic knowledge required to work with ASP.NET but I still have a long way to go
before actually developing something complex from scratch, without the help of
the existing options.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms: MDN. MDN Web Docs Glossary: Definitions of Web-related terms | MDN. (n.d.). Retrieved July 29, 2022, from https://developer.mozilla.org/en-US/docs/Glossary/MVC
Comments
Post a Comment