How to Access Values from web.config in Frontend of C# ASP.NET

What happened

In the final stages of a C# MVC project, we encountered an IIS path issue during recent testing. To address this, we configured a value in the backend’s web.config and aimed to utilize it on the frontend.

While using ViewBag in each Controller’s Action is a feasible solution, it could lead to code redundancy due to the extensive use of this parameter. Hence, we are in search of a more streamlined approach.

Solution

After contemplating for a while, we decided to use a global JS variable to store the parameter since it possesses a constant nature and will be heavily utilized in the frontend.

To achieve this, we need to create a class in the backend to assist in retrieving the data.

Here, we’ve created a C# file that defines a simple parameter, VirtualPath, along with the method to retrieve its value from the web.config file.

using System;
using System.Configuration;

namespace Project_test
{
    public class SettingUtil
    {
        public static string VirtualPath
        {
            get
            {
                return ConfigurationManager.AppSettings["virtualPath"];
            }
        }
    }
}

The next step is to proceed with the frontend configuration.

    @using Project_test

    @model Project_test.SettingUtil

<script>
    if (window.virtualPath === undefined) {
        window.virtualPath = "@SettingUtil.VirtualPath";
    }
</script>

In the frontend, we’ll be using Razor syntax, a markup language for embedding C# code, typically employed in frontend view files.

Firstly, import the namespace into the current view. The following line, @model Project_test.SettingUtil, specifies the model type for the Razor view.

On the JavaScript side, to prevent performance degradation, we’ve included an undefined check to avoid redundant operations.

Due to the nature of setting a global variable, it’s advisable to include this configuration on the entry page. This ensures that the values from the backend can be utilized throughout the entire operation.

Warning:

This approach involves using the @model directive in the Razor view, which could lead to limitations when defining models in controller actions. When using this technique, be aware that the @model directive at the top of your view binds the view to a specific model type, restricting the ability to define models in controller actions associated with the same view.

To mitigate this limitation, it is advisable to employ this configuration on a single page where the global variable is set (window.XXX). Avoid implementing this approach across multiple pages if you intend to define models dynamically in different controller actions.

Ensure that the decision to use a global JS variable aligns with the structure and requirements of your project, keeping in mind potential constraints introduced by the @model directive in Razor views.

Conclusion

C# MVC feels quite different from the C# ASP.NET Web Form projects I’ve worked on before.

Maybe it’s because the Web Form projects I dealt with previously are quite outdated, and I often found myself dealing with UpdatePanels all the time, which can get a bit monotonous, haha!

🧡You can support me by sharing my posts or clicking some ads, Thanks a lot

✅If you got any problem about this post, please feel free to ask me ~

Some Random notes