How to Configuring Default Page in ASP.NET Core?. The Complete ASP.NET Core Developer Course 2022 [Videos].
By admin / 19-Apr-2022 / in Blog, ASP.NET Core / 734 Comments / 16 Likes / Share This Post
In this Video, I am going to discuss Configuring Default Page in ASP.NET Core Application. Please watch our previous Video where we discussed How to Configure Static Files Middleware in ASP.NET Core application to serve the static files such as Image, CSS, JavaScript, etc.
How to Configure Default Page in ASP.NET Core:
As we are going to discuss everything from scratch, let us create a new ASP.NET Core Application with an Empty template. With the empty template by default, the webroot folder i.e. wwwroot folder will not be available. So, let us add the wwwroot folder to the project root directory. To do so, right-click on the project and then select add => new folder option from the context menu and then provide the folder name as wwwroot.
Adding one HTML Page:
Let us add one HTMP page with the name index within the wwwroot folder. To do so, right-click on the wwwroot folder and then select add => new item which will open add new item window. From the new item window, select the HTML template, provide the name as “index.html” and then click on the Add button as shown in the below image.
Once you add the HTML Page within the wwwroot folder, your project folder structure should be shown like below.
Now, open the index.html file which is present inside the wwwroot folder and then copy and paste the following code in it.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<title></title>
</head>
<body>
<h2> This is Index HTML File</h2>
</body>
</html>
Modifying the Configure Method of the Startup class:
In order to server the static files in asp.net core applications, we need to use the UseStaticFiles middleware in the request processing pipeline. Let us modify the Configure method as shown below to use the UseStaticFiles middleware.
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//Adding Static Files Middleware to serve the static files
app.UseStaticFiles();
app.Run(async (context) =>
{
await context.Response.WriteAsync(“Request handled and response generated”);
});
}
}
Now run the application and navigate to the URL: http://localhost:<portnumber>/index.html and you will see the output as expected that is coming from the static Index.HTML file as shown below.
Now, if you remove index.html from the URL or navigate to the base URL, then the request is going to be handled by the terminating middleware which is registered using the Run method. That the default request is going to be server by the Run method as shown below.
But what we want is, when we navigate to the base URL as shown above, we want our index.html page to serve the request. That is, we need to set the index.html page as our default page.
Setting the Default Page in ASP.NET Core Application:
Most of the web applications have a default page such as index.htm(l) or default.htm(l) as their startup page as it is easy to remember. This is the web page that is going to be displayed when a user visits the root URL of that application. For example, if you have a page with the name index.html and you want that page to be your default page so that whenever any user visits your root URL, then that page is going to be displayed.
In order to serve the index.html page which is present inside the wwwroot folder as the default page of your application, you need to add another middleware i.e. UseDefaultFiles() middleware into the request processing pipeline.
So, modify the Configure() method of the Startup class as shown below to use the UseDefaultFiles() middleware which will set the default page for your application.
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//Setting the Default Files
app.UseDefaultFiles();
//Adding Static Files Middleware to serve the static files
app.UseStaticFiles();
app.Run(async (context) =>
{
await context.Response.WriteAsync(“Request handled by the terminating middleware”);
});
}
}
With the above changes in place, now run the application and you should the output as expected as shown below. That index.html page serves as your default page.
Note: You need to add the UseDefaultFiles() middleware before the UseStaticFiles() middleware in order to serve the default file. The point that you need to remember is the UseDefaultFiles() middleware is just a URL rewriter and it never serves the static files. The job of this middleware is to simply rewrite the incoming URL to the default file which will then be served by the Static Files Middleware.
How to set Custom HTML Page as the Default Page?
The UseDefaultFiles() middleware will search the wwwroot folder for the following files.
- index.htm
- index.html
- default.htm
- default.html
This is the default behavior. But if you want then you can also change this default behavior. For Example, let us add another HTML page into the project wwwroot folder with the name MyCustomPage1.html. Once you add the MyCustomPage1.html file then the wwwroot folder contains two HTML files as shown in the below image.
Now, open the MyCustomPage1.html file and then copy and paste the following code in it.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<title></title>
</head>
<body>
<h2> This is MyCustomPage1 HTML File</h2>
</body>
</html>
Setting MyCustomPage1.html as Default Page:
Now, we want the MyCustomPage1.html page to be our default page instead of the index.html page. To do, you need to modify the Configure() method of the Startup class as follows. Here, we are creating an instance of DefaultFilesOptions class and adding the default file name as MyCustomPage1.html and then passing this object to the UseDefaultFiles middleware.
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//Specify the MyCustomPage1.html as the default page
DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
defaultFilesOptions.DefaultFileNames.Clear();
defaultFilesOptions.DefaultFileNames.Add(“MyCustomPage1.html”);
//Setting the Default Files
app.UseDefaultFiles(defaultFilesOptions);
//Adding Static Files Middleware to serve the static files
app.UseStaticFiles();
app.Run(async (context) =>
{
await context.Response.WriteAsync(“Request handled by the terminating middleware”);
});
}
}
Now run the application and you will see the output as expected that is coming from the MyCustomPage1.html file as shown below. If you still see the output from the index.html page then it may be due to cache so just try to reload the page. If still, you are not getting the data from the MyCustomPage1.html file then just restart the visual studio.
What is the use of the UseFileServer() Middleware component?
The UseFileServer() middleware components combines the functionality of UseStaticFiles, UseDefaultFiles and UseDirectoryBrowser middleware. We alwatchy discussed the UseStaticFiles and UseDefaultFiles middleware. The DirectoryBrowser middleware as the name says enables the directory browsing which allows the users to see the files which are stored in a specific directory. In our example, we can replace the UseStaticFiles() and UseDefaultFiles() middlewares with the UseFileServer() Middleware as shown below.
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// Use UseFileServer instead of UseDefaultFiles & UseStaticFiles
FileServerOptions fileServerOptions = new FileServerOptions();
fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear();
fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add(“MyCustomPage1.html”);
app.UseFileServer(fileServerOptions);
app.Run(async (context) =>
{
await context.Response.WriteAsync(“Request handled by the terminating middleware”);
});
}
}
Now run the application and you will see the output as expected.
COMMENTS (734 COMMENTS)
SUBMIT YOUR COMMENT
SEND COMMENT
RELATED POSTS
What is ASP.NET Core?
ASP.NET Core is the new version of the ASP.NET web framework mainly targeted to run on .NET Core platform.
What is ASP.NET Core Framework?
ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With ASP.NET Core, you can: Build web apps and services, Internet of Things (IoT) apps, and mobile backends. Use your favorite development tools on Windows, macOS, and Linux.
How to Setup ASP.NET Core Environment ?
ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With ASP.NET Core, you can: Build web apps and services, Internet of Things (IoT) apps, and mobile backends. Use your favorite development tools on Windows, macOS, and Linux.
