Developing web applications using ASP.NET Core MVC
In this blog, we’ll learn web development using one of the most popular technologies: the ASP. NET Core MVC. It’s an open-source and lightweight framework from Microsoft, initially released on June 7, 2016. This framework uses the Model View Controller (MVC) pattern to build dynamic web applications that are integral to today’s digital landscape. MVC helps developers write clean and maintainable code by separating the logic into three main parts. These parts are called the model, view, and controller. This blog teaches us to create web applications using this pattern with the ASP. NET Core. The next section will explain why the ASP. NET Core is important for web development.
Why ASP.NET Core MVC#
The ASP.NET Core MVC is a mature and open-source framework used to build cross-platform web applications and APIs that can be executed on any platform, such as Windows, Linux, and macOS. This framework uses the latest web standards and provides a pattern-based way to build dynamic web applications. Because of this, it’s a highly testable framework and provides a rich set of features, such as model binding, model validation, strongly typed views, filters, dependency injection, Tag Helpers, and Web APIs. These features are briefly discussed in the following section.
Model binding#
Model binding converts the client request data into C# objects that a controller can handle. This means the controller doesn’t need to manually get the data from the client’s request and convert it into usable C# objects.
Model validation#
Model validation is the process of validating the user input that is submitted to the applications. These validations are performed on the client side as well as on the server side before the application processes it. In the ASP.NET Core MVC, model validation is provided with the help of data annotations used in model classes.
Dependency injection#
Dependency injection is the process in which control of object creation is inverted, and dependencies are provided from outside rather than having a class create its own dependencies. In the ASP.NET Core, built-in support for dependency injection helps developers inject needed services into controllers through the constructor. These services can also be injected into views, allowing developers to create dynamic views.
Filters#
Filters help developers to add or modify behavior in different stages of the request processing pipeline; e.g., they enable developers to execute pre or post-processing logic for action methods. They can be applied as an attribute to the action method or at the controller level. Filters help in many areas, such as exception handling, authorization, etc.
Tag helpers#
Tag Helpers help developers generate HTML tags through server-side code. There are many built-in tags for common tasks, such as creating forms, generating links, loading assets, etc. Tag Helpers provide developers with an HTML-friendly development experience for creating views in MVC.
Strongly typed views#
Strongly typed views help developers write error-free code in views by declaring the model data type that a view can expect. Strongly typed views also provide intellisence to developers while writing the code.
Web APIs#
The ASP.NET Core MVC allows developers to create restful services and web application development. A wide range of web, desktop, or mobile clients can consume these services.
This rich set of features, along with the MVC pattern, makes it a strong candidate for selecting it for modern cross-platform web application development. In the next section, we’ll learn about the MVC design pattern in the context of ASP.NET Core.
Overview of ASP.NET Core MVC#
The Model-View-Controller (MVC) is an architectural design pattern that helps to achieve separation of concern by dividing the application code into three main components: model, views, and controllers. This division helps with scaling the code complexity. The ASP.NET Core MVC uses this pattern to build dynamic web applications. Let’s learn more about each of these components.
Model#
The model contains the classes that represent the business domain objects. These objects define the data structure used to represent the application’s data. This layer also contains the application’s business logic, validation, and database interaction. The ASP.NET Core MVC represents these business objects as C# classes. Let’s consider an example of an e-commerce application in which there can be different business domain objects, such as product, category, customer, etc. Here, we’re presenting the product business object as the C# Product class:
public class Product{public int Id { get; set; }public string Name { get; set; }public decimal Price { get; set; }}
View#
Views are responsible for rendering the user interfaces to the end users. These interfaces contain the visual representation of data. In the ASP.NET Core MVC, views are typically created using razor pages that combine HTML with C# to create dynamic content. An example of a view below contains the C# code and HTML to display the product’s name and price to the user.
<html><body><p>@Model.Name<p><p>@Model.Price</p><body></html>
Controller#
The controller is the central component in the ASP.NET Core MVC that controls the flow of applications. It receives the user’s request and decides which view to return. It also manages the interaction between the view and the model to get the required data from a model that needs to be displayed in the view according to the received request. The controllers are represented by C# classes inherited from the Controller base class. An example of a ProductController is given as follows:
public class ProductController : Controller{public ViewResult Index(){Product p = new Product ( Id=1, Name=”Mobile”, Price=13.2};return View(p);}}
In the above code, the Index is the action method responsible for returning the index view and product data.
We’ve gone through the basic structure of the MVC application. Let’s learn about the process of creating a default ASP.NET Core MVC application in Visual Studio through the following slides:
In the first step, open the latest version of Visual Studio and click “Create a new Project,” shown in slide 1.
In the next step, search for the MVC template in the search bar, select the ASP.NET Core Web App (Model-View-Controller) template from the given options, and click the “Next” button as shown in slide 2.
Next, give a name to the project, select the project’s location, and click the “Next” button as shown in slide 3.
After that, keep the default options and click the “Create” button to create the default ASP.NET Core MVC web application, shown in slide 4.
In slide 5, the default project structure is shown, and we can see the “Controllers,” “Models,” and “Views” folder, among others. Moreover, note that a default controller named
HomeController.csis also created in the “Controllers” folder. In the “View” folder, we can see a folder named “Home.” In the folder, we have two razor files namedIndex.cshtmlandPrivacy.cshtml. This also implies that the folder’s name in the “Views” folder should match the controller name without the “Controller” word. So, if we haveProductController.csfile in the “Controllers” folder, then there should be a “Product” folder in the “Views” folder containing the views related to the product controller.In slide 6, we’ve shown the code of the
HomeController.cs, where we can see two action methods:IndexandPrivacy. These methods return the related views from the “Home” folder inside the “Views” folder. Please note the naming convention here. The view’s name should match the action method’s name. In our case, the action method names areIndexandPrivacy, and the view file names are alsoIndex.csthmlandPrivacy.cshtml, where `cshtml` is the extension of razor files.Slide 7 shows the default code of the
Index.cshtmlfile that shows a “Welcome” heading and the text “building Web apps with ASP.NET Core” in the paragraph tag and other code. This heading and paragraph will be shown in the browser once we run the application.To keep the consistent layout of a web application, the ASP.NET Core MVC application contains a layout page that defines the page’s layout, such as header, footer, and menu code. This layout page code will be merged with the calling page to make the final output of the page. In slide 8, we can see the default code of the layout page, where we can see the basic HTML code along with the header, footer, and navigation bar code. The layout page is placed in the
Sharedfolder as shown in the slide, and the page’s name is_Layout.csthml. Now, the question is where the calling page code will be merged. This is defined using theRenderBody()function, e.g., if the request is generated forIndex.cshtmlfile, then the code of theIndex.cshtmlfile will be merged in the place of theRenderBody()function. To run the project, click the play icon highlighted in slide 8.Slide 9 shows the output in the default browser. Here, we can see the “Welcome” heading and text in a paragraph from the
Index.cshtmlfile, and the rest of the contents (header, footer) come from the layout page.
This explains the complete process of creating and running the default ASP.NET Core MVC application.
Wrapping up and next steps#
The ASP.NET Core MVC is a rich framework for building dynamic web applications and has wide community support due to its open-source nature. We hope this blog has helped you understand the basics of the ASP.NET Core MVC application. To learn more about this technology, you may find the following courses and paths helpful:
ASP.NET Core MVC
In this course, you will learn how to create a modular, dynamic web application with ASP.NET Core MVC, Razor, and Razor tag-helpers. Furthermore, you will also learn how to localize that application in several languages, and finally how to publish it. You will cover many different aspects of ASP.NET development including: how to optimize user interfaces, validate user input, how to write clean and maintainable code with dependency injection and configuration data, and a whole lot more. By the end of this course, you will be able to build both a public website and a business application based on ASP.NET Core MVC, with advanced features such as caching, authentication, and authorizations, and while conforming to Microsoft best-practices.
Developing Applications with ASP.NET Core
This course is for you if you’re looking to start your journey in either full-stack MVC or backend development with ASP.NET Core. In the first half of the course, you’ll learn about the Model-View-Controller design pattern and how you can use it to organize and develop your web application. You’ll then dive into JSON web APIs which allow communication between your back-end ASP.NET application and front-end web/mobile application. In the latter half, you’ll learn about the repository pattern, how relationships work, and how to add authentication and authorization to your application. By the end of this course, you will have the confidence to develop your own applications in ASP.NET Core.
Become an ASP.NET Core Developer
ASP.NET Core is a free, cloud-based, and open-source framework from Microsoft. It is used for web development on the .NET platform. The advanced features of ASP.NET Core development are considered one of the finest options for web development for large enterprises. In this path, you'll learn the basic programming concepts of C# and how we can use the Model-View-Controller design pattern to organize and develop our web application. In the end, you'll learn to create a modular, dynamic web application with ASP.NET Core MVC, Razor, and Razor tag-helpers. By the end, you'll have job-ready skills to confidently use ASP.NET Core in your next project.
Free Resources
