How to create a UrlHelperExtension in ASP.NET Core 3 ? How to Enable automatic setting navbar links to active class in bootstrap when the respective page is accessed or shown

25. April 2020

How to create a UrlHelperExtension in ASP.NET Core 3 ? How to Enable automatic setting navbar links to active class in bootstrap when the respective page is accessed or shown

This following example of creating a HelperExtension method is needed for the problem of making navbar links <li> be active when on the respective page . eg: In the following screenshot you can see the bootstrap navbar with some links .

Now we have to make some functionality so that when we are on the Services page then services Link is highlighted with white font-color. In bootstrap this is done by simply adding active class in <li> like this

 

Now to make it automatically done in asp.net core we will use @Url Helper Extension method .

For that create a Folder Helpers and add one class named as UrlHelperExtensions.cs. Add the code below in this file

using Microsoft.CodeAnalysis.CSharp.Syntax;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Routing;

namespace Clanstech.Helpers
{
    
    public static class UrlHelperExtensions
    {
        public static string MakeActive(this IUrlHelper urlHelper,string controller)
        {
            string result = "active";

            string controllerName = urlHelper.ActionContext.RouteData.Values["controller"].ToString();

            if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
            {
                result = null;
            }

            return result;
        }
    }
}

Now Add a reference of this class in your _ViewImports.cshtml or You can directly add this in your _Layout.cshtml top of page like this

 

 

Now open the _Layout.cshtml and add the newly created extension helper of Url like this

<li class="nav-item @Url.MakeActive("Home")">
    <a class="nav-link" asp-action="Index" asp-controller="Home" asp-area="Admin">Home <span class='sr-only'>(current)</span></a>
</li>
<li class="nav-item @Url.MakeActive("Services")">
    <a class="nav-link" asp-action="Index" asp-controller="Services" asp-area="Admin">Services </a>
</li>
<li class="nav-item @Url.MakeActive("Pricing")">
     <a class="nav-link" href="#">Pricing </a>
</li>

 

 

 

 

ASP.NET MVC Core , ,

Adding logging to file in ASP.NET MVC Core using Serilog

24. April 2020

Open the Project.csproj file and add the following code

<PackageReference Include="Serilog.Extensions.Logging.File" Version="1.0.1"/>

Or you can open up the nuget Package Manager Console and write this command and press enter 

Install-Package Serilog.Extensions.Logging.File

 Or you can open the Powershell in goto the directory of your project and run this command 

dotnet add package Serilog.Extensions.Logging.File

This will automatically add the dependencies

 

Now open the Startup.cs file add the following code

loggerFactory.AddFile("Logs/myapp-{Date}.txt");

And do remember to add the IloggerFactory loggerFactory parameter in Configure method parameters list . Line mentioning the file path is where the file will be created for logging.

 

 

Add the following code to your controller

public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {

            _logger.LogInformation("Message displayed : " + $"HomePage visited at {DateTime.UtcNow.ToLongDateString()} , {DateTime.UtcNow.ToLongTimeString()}");
            return View();
        }
}

Now you run the application and whenever you browse to the Index method of Home controller the log file will be appended .

Now check Logs Folder which contains the file with Date suffixed

 

 

ASP.NET MVC Core, Logging, Serilog , ,

How to Get the Base URL in ASP.NET MVC Core View , ASP.NET MVC Core get website link in View

21. April 2020

Get the Absolute URI from ASP.NET MVC Content or Action.

How to Get the Base URL in ASP.NET MVC Core View ?

ASP.NET MVC Core get website link in View .

 

Answer to above questions when i was trying to find what i actually wanted is below .

@Url.Action(<action>,<controller>,null,Context.Request.Scheme)

You can replace the <action> and <controller> with your values in double quotes if you want to get the exact link of a action method .

It will generate a link like - http://www.clanstech.com/Home/Services

Or you can also ignore <action>, <controller> altogether to get just the base url , website link , domain link on which you are hosting your website application .

Like this @Url.Action(null,null,null,Context.Request.Scheme)

It will generate a link like - http://www.clanstech.com/

ASP.NET MVC, ASP.NET MVC Core, C# , , , , ,

Porting HTML5 Template to ASP.NET MVC Core View

20. April 2020

Whenever porting a HTML template to ASP.NET MVC Core view we have to keep in mind that the path for resources like image , css , scripts should always be coded with '/' before the folder name . For Example -

If you have a template named Clanstech with folder structure as  mentioned in below image.

With code in about.html will be like

<link rel="stylesheet" href="assets/css/aos.css">

In order to use the above css file in ASP.NET MVC Core project with the following structure

We will have to use the following code

<link rel="stylesheet" href="/assets/css/aos.css">

If we dint add '/' before assets folder then it will not load the css file if the user is on suppose /localhost:876/Home/About action/page/view.

To get more idea how file path works , below is the correct usage as shown on this link also https://www.w3schools.com/html/html_filepaths.asp

 


HTML File Paths

<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder

ASP.NET MVC Core, HTML5 , ,