ASP.NET MVC (Model-View-Controller) is a popular framework for building robust, scalable, and maintainable web applications. It provides a powerful set of tools and features that enable developers to create dynamic and interactive websites. In this article, we will walk you through the process of creating an ASP.NET MVC application from scratch. Let’s get started!
Blog Topic
What is ASP.NET MVC?
ASP.NET MVC is an open-source web development framework from Microsoft that provides a Model View Controller architecture. This free web framework is designed to build websites and web applications on .NET Framework using HTML, CSS, and JavaScript.
Before we start please make sure to have this following application installed on your machine.
- Visual Studio » Download and install the latest version of Visual Studio, which includes the necessary templates and libraries for ASP.NET MVC development.
- .NET Framework » Ensure that you have the required version of the .NET Framework installed.
I. Create ASP.NET MVC Project
1. Open Visual Studio and select “Create a new project.”
2. In the project template selection window, choose “ASP.NET Web Application.”
3. Provide a name for your project and choose a location to save it. Click “Create” to generate the project structure.
4. Now, we have two options to start a project we can use the MVC template, or we can start from an empty project. We will use the empty MVC template then click the “Create” button.
5. This is how your project solution will look like. See the image below.
II. Understanding the Project Structure
MVC is an architectural pattern known as Model-View-Controller. This architecture separates your application into three logical components.
- Models – Contains classes representing the data model and business logic of your application.
- Views – Contains the HTML templates and user interface elements for rendering the application’s output.
- Controllers – Contains classes that handle user requests, process data, and interact with models and views.
III. Creating Models
1. Right-click on the “Models” folder in your project and select “Add” > “Class.”
2. Define your model classes, including properties and methods that represent your application’s data. In this case, I’ll create an Authors class.
3. Then I’ll create Name and Address for the model properties.
IV. Creating Controllers
Now, that we are done setting properties lets add the Controller class. Follow the steps below.
1. Right-clicking on the “Controllers” folder then select “Add” » “Controller.”
2. Choose the appropriate template for your controller, such as “Empty,” “MVC Controller – Empty”.
3. Assign name to your controller class then click the “Add” button.
4. This will create a new controller with a default Index method.
V. Creating Views
1. Now, all we need to do is to create a View. We will create a view for this index method. To do that, right-click on the Index method from HomeController.cs.
2. Choose a template for your view such as “Empty,” “List,” “Details,” etc. In my case, I’ll choose List for this demo and select the Authors on the Model class.
3. This action will create an Index.cshtml file under “Views” » “Home” folder. Open the index.cshtml and modify the html design as required for your application.
4. Leverage the Razor syntax (default view engine) to dynamically render data from the models within your views. This is the default view generated.
@model IEnumerable<MVCWebApp.Models.Authors>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</table>
VI. Configuring Routes
Routing is a crucial aspect of ASP.NET MVC. It determines how URLs are mapped to controllers and actions.
1. Open the “RouteConfig.cs” file located in the “App_Start” folder.
2. Define custom routes using the MapRoute method, specifying the URL pattern and controller/action to be invoked. Which, by default it is set to Home/Index. The full URL now should be in this format “https://localhost:{port}/Home/Index”
VII. Running and Testing the Application
Now, It’s time to test our application. To be able to see a sample display of list of Authors on our View, use the code snippet below and replace the code on your HomeController.cs.
public ActionResult Index()
{
var authors = new List<Authors>() {
new Authors{ Name = "Author 1", Address="missing st."},
new Authors{ Name = "Author 2", Address="missing st."},
new Authors{ Name = "Author 3", Address="missing st."},
};
return View(authors);
}If you use an empty template of MVC, make sure that the following library are installed.
- Bootstrap 3.3.7
- JQuery 1.10.2
- Modernizr 2.6.2
If not, you can download it using NuGet Package Manager.
You may also visit this blog post to guide you on installing NuGet package.
Now, you are ready to test your first ASP.NET web application.
1. Press F5 or click the “Run” button in Visual Studio to start the application.
2. Verify that your application launches in the browser, and you are able to see the list of dummy authors that we added on index action inside HomeController.cs.
3. You can also Use breakpoints and debugging tools to identify and resolve any issues.
If you follow along with this tutorial you should be able to see this on your browser.
If you observe, we have three hyperlink function on the view, “Edit”, “Details” and Delete. You can continue this project by creating their functionality, we only covered display list function on this tutorial.
Detailed ASP.NET MVC folder structure.
Source Code
If you encounter an error on your source code and you already did your best in debugging and still no result, you may download the source code used from GitHub @coderbugzz.
Summary
Creating an ASP.NET MVC application allows you to build powerful, flexible, and scalable web applications. By following the steps outlined in this guide, you can get started on your ASP.NET MVC journey. Remember to continuously enhance your knowledge by exploring additional features, frameworks, and best practices to build high-quality applications. Hopefully, you have learn something on this tutorial. Keep coding!