What Is Asp.Net Mvc Complete Guide

Step-by-Step Guide to Create an ASP.NET MVC Application

Step 1: Setting Up Your Environment

1. Install Visual Studio: If you haven't, download and install Visual Studio 2019 or later. Ensure you choose the "ASP.NET and web development" workload in the installer.
2. Install .NET Core SDK: The SDK should be installed automatically when you select the ASP.NET workload in Visual Studio.

Step 2: Creating a New Project

1. Open Visual Studio: Start Visual Studio and click on "Create a new project."
2. Choose Project Type: In the search box type "MVC", then select the "ASP.NET Core Web App (Model-View-Controller)" template. Click "Next."
3. Configure Your Project: Give your project a name (e.g., MyMvcApp), choose a location on your system, and click "Create."
4. Select Framework: In the new project configuration window, ensure the dropdowns are set to ".NET Core" and "ASP.NET Core 6.0 (or latest version available)," select "Web Application (Model-View-Controller)," and check "Enable Docker Support" if you're using Linux containers. Click "Create."

Step 3: Understanding the Default Structure

When you create a new MVC project, you’ll notice several folders and files inside:

• Controllers: Contains controllers which handle incoming browser requests.
• Views: Contains Razor view templates used to render HTML responses sent to the client.
• Models: Contains classes representing the data and business logic of your application.
• wwwroot: Contains static content files, like CSS, JavaScript, images, etc.
• appsettings.json: Configuration settings for your application.
• Program.cs: Entry point of the application (similar to Startup.cs in older versions).
• Startup.cs: Configure HTTP request pipeline and services.

Step 4: Adding a Model

Let's add a simple model representing a Product.

1. Create Models Folder: Right-click on your project, select "Add" > "New Folder," and name it Models.
2. Add Product Model: Right-click on the Models folder, select "Add" > "Class", name it Product.cs, then click "Add".
3. Define Product Properties:

namespace MyMvcApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Step 5: Creating a Controller

Let's create a controller to handle product-related requests.

1. Create Controllers Folder: If Controllers does not exist, right-click on your project, select "Add" > "New Folder," and name it Controllers.

2. Add Product Controller: Right-click on the Controllers folder, select "Add" > "Controller", then pick "MVC Controller - Empty". Name it ProductController. Click "Add".

3. Update the ProductController:

using Microsoft.AspNetCore.Mvc;
using MyMvcApp.Models;

namespace MyMvcApp.Controllers
{
    public class ProductController : Controller
    {
        public IActionResult Index()
        {
            // Sample Data
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "Laptop", Price = 800 },
                new Product { Id = 2, Name = "Smartphone", Price = 600 },
                new Product { Id = 3, Name = "Tablet", Price = 300 }
            };

            return View(products);
        }

        public IActionResult Details(int id)
        {
            var product = new Product 
            { 
                Id = id, 
                Name = "Sample Product", 
                Price = 100.00m 
            };

            return View(product);
        }
    }
}

Step 6: Creating Views

Now, let’s create Razor views for the actions in ProductController.

1. Add Views Directory: Inside the Views folder, add a new folder named Product.
2. Create Index View: Right-click on the Product folder, click "Add" > "Razor View...". Name it Index, select "List" as the template, choose Product as the model class, and leave other fields as default. Click "Add".

Index.cshtml will look like this:

@model IEnumerable<MyMvcApp.Models.Product>

@{
    ViewData["Title"] = "Product List";
}

<h1>Products</h1>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Details", "Details", new { id=item.Id })
            </td>
        </tr>
}
    </tbody>
</table>

3. Create Detail View: Similar to the previous step, add a new view file named Details. Select the "Empty" template and leave other fields as default. Click "Add".

Details.cshtml will look like this:

@model MyMvcApp.Models.Product

@{
    ViewData["Title"] = "Product Details";
}

<h1>@Model.Name Details</h1>

<div>
    <h4>Product</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Id)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Id)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Price)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Price)
        </dd>
    </dl>
</div>

Step 7: Run Your Application

To see your application in action:

1. Build Project: Save all the changes, then go to "Build" > "Build Solution."
2. Run Project: To run the project, click on "Start Debugging" or press F5.

Navigate to /Product in your browser, and you should see a list of sample products. Clicking on "Details" for any product should take you to the details page.

Step 8: Modify Routes (Optional)

If you want to modify the routing, open the Program.cs file and make changes under the app.MapControllerRoute method:

 app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Product}/{action=Index}/{id?}");

This will set Product/Index as the default route, so now when you start the application, it will navigate you straight to the list of products.

Conclusion

You've successfully created an ASP.NET MVC application with a simple Model, Controller, and Views. This example covers basic concepts but there is still much more to explore in ASP.NET MVC such as view models, dependency injection, routing, and many more complex topics related to authentication, authorization, middleware integration, etc.