Creating an ASP.NET Web Applicaton for Beginners

In this tutorial, we will cover the basics of creating a simple web application using ASP.NET Core. You will learn how to set up your development environment, create a basic web application, and understand essential concepts.

Table of Contents:

1. Prerequisites
2. Setting up Your Development Environment
3. Creating a New ASP.NET Web Application
4. Understanding the Project Structure
5. Creating a Basic Web Page
6. Adding Styling with CSS
7. Building a Dynamic Page with C#
8. Conclusion

1. Prerequisites

Before you begin, make sure you have the following prerequisites installed:

• .NET SDK for your platform
• A code editor like Visual Studio Code or Visual Studio
• Basic knowledge of C# programming is helpful but not required.

2. Setting up Your Development Environment

Setting up your development environment for ASP.NET Core is a crucial first step. Here's a more detailed guide:

a. Install .NET SDK: Begin by installing the .NET SDK, which is necessary for building and running ASP.NET Core applications. You can download the .NET SDK from the official Microsoft website. Make sure you choose the appropriate SDK for your operating system (Windows, macOS, or Linux).

Download .NET SDK

• Windows: Follow the installation instructions for Windows. The installer will guide you through the process, and you should have .NET Core installed when it's finished.

• macOS: On macOS, you can install the .NET SDK using Homebrew. Open a terminal and run the following command:

brew install --cask dotnet

brew install --cask dotnet

b. Choose a Code Editor: You can use various code editors to develop ASP.NET Core applications. Two popular choices are Visual Studio Code and Visual Studio.

• Visual Studio Code (VS Code): Download Visual Studio Code

• Visual Studio: Download Visual Studio

Both are excellent code editors with extensions and tools available for ASP.NET Core development. Choose the one that suits your preferences.

c. Verify Installation: After the installation of the .NET SDK and your chosen code editor, verify that everything is correctly set up. Open a command prompt or terminal and run the following command:

dotnet --version

dotnet --version

This command should display the installed .NET SDK version, confirming that it's installed correctly. Additionally, ensure that your code editor is working as expected.

With these steps completed, your development environment is ready for creating ASP.NET Core web applications. You are now set to proceed with building your first web application as outlined in the subsequent steps.

3. Creating a New ASP.NET Web Application

Let's walk through the process of creating a new ASP.NET web application step by step.

a. Open a Terminal or Command Prompt: To get started, open your terminal or command prompt. You can do this by searching for "Terminal" (macOS) or "Command Prompt" (Windows) in your computer's search bar.

b. Navigate to Your Desired Project Directory: Use the cd command to navigate to the directory where you want to create your ASP.NET web application. For example, to navigate to your desktop, you can use:

cd ~/Desktop

cd ~/Desktop

c. Create a New ASP.NET Web Application Project: Use the dotnet new web command to create a new ASP.NET web application. This command generates a basic project structure and sets up the necessary files for your web app. You can specify the project name with the -n flag. In this example, we'll name our project "TestingflyWebApp":

dotnet new web -n TestingflyWebApp

dotnet new web -n TestingflyWebApp

d. Navigate to the Project Folder: Use the cd command again to navigate into the newly created project folder:

cd TestingflyWebApp

cd TestingflyWebApp

e. Restore Project Dependencies: After creating the project, run dotnet restore to restore project dependencies. This command fetches the necessary libraries and packages for your project, ensuring that your project is ready for development:

dotnet restore

dotnet restore

At this point, you've successfully created a new ASP.NET web application project named "TestingflyWebApp." You are now ready to start building your web application with the new project name.

Feel free to explore the project structure and configuration files using your code editor (e.g., Visual Studio Code or Visual Studio) and start developing your web application under the "TestingflyWebApp" project name.

This will create a new web application project named "MyWebApp."

4. Understanding the Project Structure

Before you start building your ASP.NET web application, it's important to understand the project structure. ASP.NET Core organizes your code into a specific directory structure to help maintain and scale your application effectively. Here's an overview of the key components in the project structure:

• TestingflyWebApp.csproj: This is the project file that defines the project's dependencies. It's an XML file that specifies the libraries, frameworks, and tools used in your project.

• Program.cs: This is the entry point of your application. It contains the Main method, which sets up the web host and starts your application.

• Startup.cs: The Startup class is where you configure your application's services and middleware. It's the heart of your application's configuration. You can define how your app responds to HTTP requests, configure services, and set up routing in this file.

• wwwroot: The wwwroot folder is where you place static files that your web application serves directly to clients, such as CSS, JavaScript, images, and other assets. Files in this folder can be accessed by clients via URLs.

• Pages: The Pages folder is where you'll create Razor Pages. Razor Pages are a feature of ASP.NET Core that makes it easy to create dynamic web pages with both HTML and C# code. The Index page that you'll be working with is one example.

Now, let's take a closer look at the "Pages" folder, where you'll create your web pages:

• Pages/Index.cshtml: This is a Razor Page that corresponds to the root URL of your web application (e.g., /). You can think of it as the homepage of your web app.

• Pages/_ViewStart.cshtml: This file contains common code that should be applied to all pages in the Pages folder. It can be used for layout definitions, among other things.

• Pages/Shared: This folder can contain shared Razor Page components, such as layouts and partial views, that can be reused across multiple pages.

Understanding these key components of your project structure will help you navigate your ASP.NET web application and make informed decisions about where to place your code and assets as you build and expand your project.

5. Creating a Basic Web Page

In this step, you will create a basic web page for your ASP.NET web application using Razor Pages. Razor Pages are a feature in ASP.NET Core that allows you to combine HTML and C# code to create dynamic web pages.

a. Creating a Razor Page: Inside the "Pages" folder of your project (i.e., "TestingflyWebApp/Pages"), create a new Razor Page file named Index.cshtml. You can use your code editor to create this file. The "Index" page is typically associated with the root URL of your web application, so it will serve as the homepage of your web app.

b. Adding HTML Content: Open the Index.cshtml file in your code editor. You'll see a combination of HTML and C# code. Here's an explanation of the key components in this file:

• @page: This directive specifies that this Razor Page is associated with the root URL of your web application. It's an essential part of defining the page's URL routing.

• @model: The @model directive is used to specify the model type for the page. In this case, it's left empty, meaning there's no specific model associated with the page. Models are typically used for passing data to the page.

• The HTML structure: Within the <html>, <head>, and <body> elements, you can add your HTML content. You can customize the title and content to match your web application's purpose.

• Your Index.cshtml file might look like this:

@page
@model
 
<!DOCTYPE html>
<html>
<head>
    <title>My First ASP.NET Web App</title>
</head>
<body>
    <h1>Hello, ASP.NET!</h1>
</body>
</html>

@page
@model
 
<!DOCTYPE html>
<html>
<head>
    <title>My First ASP.NET Web App</title>
</head>
<body>
    <h1>Hello, ASP.NET!</h1>
</body>
</html>

c. Testing Your Web Page: To view your web page locally, open a terminal/command prompt in your project directory (i.e., "TestingflyWebApp") and run the following command:

dotnet run

dotnet run

• After the application starts, you can access your web page in a web browser at https://localhost:5001 or http://localhost:5000. You'll see your "Hello, ASP.NET!" message displayed on the page.

By following these steps, you've successfully created a basic web page using Razor Pages in your ASP.NET web application. You can continue to enhance your web pages and add more features as you become more familiar with ASP.NET Core development.

Open a terminal in your project directory and run:

dotnet run

dotnet run

You can access your web application at https://localhost:5001 or http://localhost:5000.

6. Adding Styling with CSS

In this step, you will learn how to enhance the visual appeal of your web page by adding a Cascading Style Sheet (CSS) to style the HTML elements.

a. Creating a CSS File:

• Inside the "wwwroot" folder of your project (i.e., "TestingflyWebApp/wwwroot"), create a new folder named "css." This folder is used to organize your CSS files.

• Inside the "css" folder, create a CSS file named styles.css. You can use your code editor to create this file.

b. Adding CSS Styles:

• Open the styles.css file in your code editor. Here, you can define CSS styles to customize the appearance of HTML elements on your web page.

• As an example, you can style the <h1> element to change its text color to blue. Add the following CSS rule to the styles.css file:

/* styles.css */
h1 {
    color: blue;
}

/* styles.css */
h1 {
    color: blue;
}

This CSS rule sets the text color of all <h1> elements on your web page to blue.

c. Linking the CSS File:

• To apply the CSS styles to your web page, you need to link the styles.css file to your Razor Page. Open your Index.cshtml file located in the "Pages" folder (i.e., "TestingflyWebApp/Pages").

• Within the <head> section of your Index.cshtml file, add a <link> element to link the CSS stylesheet. Place this line before the closing </head> tag:

<link rel="stylesheet" href="/css/styles.css">

<link rel="stylesheet" href="/css/styles.css">

This <link> element tells the browser to load the styles.css file from the "css" folder in your "wwwroot" directory.

d. Testing the Styled Web Page:

• To see the changes, run your ASP.NET web application by opening a terminal/command prompt in your project directory and running:

dotnet run

dotnet run

• Access your web page in a web browser at https://localhost:5001 or http://localhost:5000. You'll notice that the text color of the <h1> element on your page has changed to blue, as specified in your CSS.

By following these steps, you've successfully added styling to your web page using CSS in your ASP.NET web application. You can continue to create more sophisticated styles and layouts to improve the visual design of your web pages as your project evolves.

7. Building a Dynamic Page with C#

In this step, you will create a dynamic web page by adding C# code to your Razor Page. This code will allow you to pass data from the server-side (C#) to the client-side (HTML).

a. Configuring the Razor Page:

• Open your Index.cshtml file located in the "Pages" folder (i.e., "TestingflyWebApp/Pages").

• At the top of the file, you'll notice the following lines:

@page
@model

@page
@model

• These lines declare the page with the @page directive and define the model type with the @model directive. In this case, the @model directive is left empty, indicating that there's no specific model associated with the page.

b. Updating the HTML Content:

• Inside your HTML structure (between <html> and <body>), you can use Razor syntax to integrate C# code into your HTML. This allows you to dynamically generate content.

• To display a dynamic message on your page, add the following line within the <h1> element:

<h1>@Model.Message</h1>

<h1>@Model.Message</h1>

This line indicates that the content inside the <h1> element should be replaced with the value of the Message property in the model.

c. Creating the Model:

• In the "Pages" folder, you have a corresponding C# code-behind file named Index.cshtml.cs. Open this file.

• Inside the IndexModel class, you'll notice the following code:

using Microsoft.AspNetCore.Mvc.RazorPages;
 
namespace TestingflyWebApp.Pages
{
    public class IndexModel : PageModel
    {
        public string Message { get; set; }
 
        public void OnGet()
        {
            Message = "Hello from C#!";
        }
    }
}

using Microsoft.AspNetCore.Mvc.RazorPages;
 
namespace TestingflyWebApp.Pages
{
    public class IndexModel : PageModel
    {
        public string Message { get; set; }
 
        public void OnGet()
        {
            Message = "Hello from C#!";
        }
    }
}

• The IndexModel class is associated with your Index.cshtml Razor Page. It contains a Message property and an OnGet method.

d. Passing Data from C# to HTML:

• The OnGet method is executed when the page loads. It sets the Message property to "Hello from C#!". This value will be displayed on your web page dynamically.

e. Testing the Dynamic Page:

• To view your dynamic page, run your ASP.NET web application by opening a terminal/command prompt in your project directory and running:

dotnet run

dotnet run

• Access your web page in a web browser at https://localhost:5001 or http://localhost:5000. You'll see the dynamic message "Hello from C#!" displayed within the <h1> element.

By following these steps, you've successfully created a dynamic web page using C# code in your ASP.NET web application. This demonstrates how you can pass data from the server-side (C#) to the client-side (HTML) and create interactive content on your web page. You can continue to build more dynamic features and logic as you develop your web application.

8. Conclusion

Congratulations! You've created your first ASP.NET web application. You've learned how to set up your development environment, create web pages, add styles with CSS, and make your page dynamic with C#. Continue exploring ASP.NET Core to build more advanced web applications.

Happy coding!