Easily Change the Directory Content Based on User Login in Blazor
Tags: blazor, webdev, csharp, dotnet
Published: 2021-08-02 13:44:13

---
title: Easily Change the Directory Content Based on User Login in Blazor
published: true
date: 2021-07-19 11:00:28 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/change-the-directory-content-based-on-user-login-in-blaor.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Easily-Change-the-Blazor-File-Manager-Content-for-Different-Users-672x372.png
---

Managing the files and folders of different users in a single file system is one of the most common use cases in an organization. But still, we need to maintain the privacy of the files, though they are in a single file system. In this blog, we will discuss changing the directories and files based on the user login in a Blazor application. We are going to use Syncfusion Blazor File Manager control to achieve this.

Syncfusion [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Link to Blazor File Manager") is a graphical user interface component for managing the file system. It allows users to perform common file operations like accessing, editing, and sorting files or folders. This component also provides easy navigation through folders to select a file or folder in the file system.

Let’s get started.

## Initialize the Blazor File Manager

First things first, let’s initialize the Blazor File Manager component.

**Note:** Refer to the [Getting Started with Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/getting-started/ "Link to Getting started with Blazor FileManager component") documentation to render the File Manager in your application.

1. Add the Blazor File Manager component with local service in the **razor** file, as shown in the following code example.
```html
@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/Mail/FileOperations"
                             DownloadUrl="/api/Mail/Download"
                             UploadUrl="/api/Mail/Upload"
                             GetImageUrl="/api/Mail/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>
```
2. Then, create a controller named **MailController** and add the following code in the **MailController.cs** file.
```csharp
public class MailController: Controller
{
    public PhysicalFileProvider operation;
    public string basePath;
    string root = "wwwroot\\Files";

    [Obsolete]
    public MailController(IHostingEnvironment hostingEnvironment)
    {
        this.basePath = hostingEnvironment.ContentRootPath;
        this.operation = new PhysicalFileProvider();
        this.operation.RootFolder(this.basePath + "\\" + this.root);
    }

    // Processing the File Manager operations.
    [Route("FileOperations")]
    public object FileOperations([FromBody] FileManagerDirectoryContent args)
    {
        switch (args.Action)
        {
            // Add your custom action here.
            case "read":
                // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
                return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
        ...
        }
        return null;
    }
}
```
3. Now, add the root path to display the folders and files in the Blazor File Manager component. Here, we have showcased the folder and files from the wwwroot\\Files.

Then, the component will be rendered like in the following screenshot. We have displayed three different users’ details in the **Files** folder.

![Blazor File Manager Displaying the User Details in the Files Folder](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-File-Manager-Displaying-the-User-details-in-the-Files-Folder.png)<figcaption>Blazor File Manager Displaying the User Details in the Files Folder</figcaption>

## Add Entity Framework

We are going to use Entity Framework to handle logged-in user details. Follow these steps to configure Entity Framework in the application:

1. Create a DBContext class named **UserContext** to connect to the Microsoft SQL Server database.Refer to the following code example.
```csharp
using Microsoft.EntityFrameworkCore;
using Demo.Data;

namespace Demo.Shared.DataAccess
{
    public class UserContext : DbContext
    {
        public virtual DbSet<UserDetails> User { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                // To make the sample runnable, replace your local file path for the MDF file here. 
                optionsBuilder.UseSqlServer(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename='D:\Demo\Shared\App_Data\NORTHWND.MDF';Integrated Security=True;Connect Timeout=30");
            }
        }
    }
}
```
2. Now, create a class named **UserDataAccessLayer** , which acts as the data access layer for retrieving the records from the database table. Also, add the methods **GetUser ** and  **UpdateUser** in the **UserDataAccessLayer.cs** file to handle the read and update operations, respectively.Refer to the following code example.
```csharp
using Microsoft.EntityFrameworkCore;
using Demo.Data;

namespace Demo.Shared.DataAccess
{
    public class UserDataAccessLayer
    {
        UserContext db = new UserContext();

        // Returns the User data from the database.
        public DbSet<UserDetails> GetUser()
        {
            try
            {
                return db.User;
            }
            catch
            {
                throw;
            }
        }

        // Update the existing data in the database.
        public void UpdateUser(UserDetails name)
        {
            try
            {
                db.Entry(name).State = EntityState.Modified;
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }
}
```
3. We already created the controller class **MailController** to handle the file operations. Now, we are going to add methods to handle the data from the Entity Framework in this controller.Refer to the following code example.
```csharp
// Get user ID from a data source.
[HttpGet("{id}")]
public object GetIndex()
{
    // Get the DataSource from Database.
    var data = db.GetUser().ToList();
    int UserId;
    var count = data.Count;
    if (count > 0)
    {
        UserId = (data[data.Count - 1].UserId);
    }
    else
    {
        UserId = 1;
    }
    return UserId;
}

// Get username from data source.
public object GetName()
{
    // Get the DataSource from Database.
    var data = db.GetUser().ToList();
    string name;
    var count = data.Count;
    if (count > 0)
    {
        name = (data[data.Count - 1].Name);
    }
    else
    {
        name = "User 1";
    }
    return name;
}

// Update user details into data source.
[Route("SetUser")]
public object SetUser([FromBody] User args)
{
    UserDetails CurrentUser = new UserDetails();
    CurrentUser.Id = 1;
    CurrentUser.UserId = args.UserId;
    CurrentUser.Name = args.Name;
    db.UpdateUser(CurrentUser);
    return null;
}
```

## Add logged in page

Let’s use the  [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list "Link to Blazor Dropdown List") component to switch the user login. To do so, add the list of user details as the data source for the Dropdown List component.

Refer to the following code.

```html
@using Syncfusion.Blazor.DropDowns

<span>Signed in: </span>
<SfDropDownList TValue="string" TItem="User" Placeholder="Select a User" DataSource="@LocalData" Width="200px" @bind-Value="@DropVal">
    <DropDownListFieldSettings Value="UserId" Text="Name"></DropDownListFieldSettings>
    <DropDownListEvents TValue="string" TItem="User" ValueChange="OnSelected"></DropDownListEvents>
</SfDropDownList>

@code {

    public string DropVal;
    List<User> LocalData = new List<User> {
        new User() { UserId = 1, Name = "User 1" },
        new User() { UserId = 2, Name = "User 2" },
        new User() { UserId = 3, Name = "User 3" },
        };
    protected override async Task OnInitializedAsync()
    {
        // To get the signed item from the database.
        var id = await Http.GetJsonAsync<int>("api/Mail/index");
        this.DropVal = id.ToString();
    }
}
```

## Update the Blazor File Manager based on logged in details

For initial rendering, get the logged-in user’s details from the data source and set the root folder using the **RootFolder** method in the controller.

```csharp
var rootPath = this.root + "\\" + GetName();
this.operation.RootFolder(this.basePath + "\\" + this.root);
```

Then, add the change event in the Blazor Dropdown List component to handle the dynamic user login.

Refer to the following code example.

```csharp
private async Task OnSelected(ChangeEventArgs<string, User> args)
{
    if (args.IsInteracted)
    {
        string stringPayload = await Task.Run(() => JsonSerializer.Serialize(args.ItemData));
        HttpContent httpContent = new StringContent(stringPayload, Encoding.UTF8, "application/json");
        await Http.PutJsonAsync("api/Mail/SetUser", args.ItemData);
        uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
    }
}
```

## Output

The following code example is the combined code in the Razor page.

```js
@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.DropDowns
@using System.Text;
@using System.Text.Json;
@using Demo.Data;

@inject HttpClient Http
@inject NavigationManager uriHelper;

<span>Signed in: </span>
<SfDropDownList TValue="string" TItem="User" Placeholder="Select a User" DataSource="@LocalData" Width="200px" @bind-Value="@DropVal">
    <DropDownListFieldSettings Value="UserId" Text="Name"></DropDownListFieldSettings>
    <DropDownListEvents TValue="string" TItem="User" ValueChange="OnSelected"></DropDownListEvents>
</SfDropDownList>
<div style="margin: 20px 0">
    <SfFileManager TValue="FileManagerDirectoryContent">
        <FileManagerAjaxSettings Url="/api/Mail/FileOperations"
                                 DownloadUrl="/api/Mail/Download"
                                 UploadUrl="/api/Mail/Upload"
                                 GetImageUrl="/api/Mail/GetImage">
        </FileManagerAjaxSettings>
    </SfFileManager>
</div>

@code {

    public string DropVal;
    List<User> LocalData = new List<User> {
        new User() { UserId = 1, Name = "User 1" },
        new User() { UserId = 2, Name = "User 2" },
        new User() { UserId = 3, Name = "User 3" },
        };
    protected override async Task OnInitializedAsync()
    {
        // To get the signed item from the database.
        var id = await Http.GetJsonAsync<int>("api/Mail/index");
        this.DropVal = id.ToString();
    }
    private async Task OnSelected(ChangeEventArgs<string, User> args)
    {
        if (args.IsInteracted)
        {
            string stringPayload = await Task.Run(() => JsonSerializer.Serialize(args.ItemData));
            HttpContent httpContent = new StringContent(stringPayload, Encoding.UTF8, "application/json");
            await Http.PutJsonAsync("api/Mail/SetUser", args.ItemData);
            uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
        }
    }
}
```

Next is the combined code for the controller page.

```csharp
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
//File Manager's base functions are available in the below namespace.
using Syncfusion.EJ2.FileManager.Base;
//File Manager's operations are available in the below namespace.
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Http.Features;
using Newtonsoft.Json;
using Demo.Shared.DataAccess;
using Demo.Data;

namespace Demo.Server.Controllers
{
    [Route("api/[controller]")]
    [EnableCors("AllowAllOrigins")]
    public class MailController : Controller
    {
        public PhysicalFileProvider operation;
        UserDataAccessLayer db = new UserDataAccessLayer();
        public string basePath;
        string root = "wwwroot\\Files";

        [Obsolete]
        public MailController(IHostingEnvironment hostingEnvironment)
        {
            this.basePath = hostingEnvironment.ContentRootPath;
            this.operation = new PhysicalFileProvider();
        }

        // Processing the File Manager operations.
        [Route("FileOperations")]
        public object FileOperations([FromBody] FileManagerDirectoryContent args)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            switch (args.Action)
            {
                // Add your custom action here.
                case "read":
                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
                case "delete":
                    // Path - Current path of the folder to be deleted; Names - Name of the files to be deleted.
                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
                case "copy":
                    // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that are confirmed for renaming; TargetData - Data of the copied file
                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "move":
                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that are confirmed for renaming; TargetData - Data of the moved file
                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "details":
                    // Path - Current path where details of file/folder are requested; Name - Names of the requested folders.
                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
                case "create":
                    // Path - Current path where the folder is to be created; Name - Name of the new folder.
                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
                case "search":
                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive.
                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
                case "rename":
                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name.
                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
            }
            return null;
        }
        // Uploads the file(s) into a specified path.
        [Route("Upload")]
        public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            FileManagerResponse uploadResponse;
            uploadResponse = operation.Upload(path, uploadFiles, action, null);
            if (uploadResponse.Error != null)
            {
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
            }
            return Content("");
        }

        // Downloads the selected file(s) and folder(s).
        [Route("Download")]
        public IActionResult Download(string downloadInput)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
            return operation.Download(args.Path, args.Names, args.Data);
        }

        // Gets the image(s) from the given path.
        [Route("GetImage")]
        public IActionResult GetImage(FileManagerDirectoryContent args)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            return this.operation.GetImage(args.Path, args.Id, false, null, null);
        }

        // Get user ID from data source.
        [HttpGet("{id}")]
        public object GetIndex()
        {
            // Get the DataSource from Database.
            var data = db.GetUser().ToList();
            int UserId;
            var count = data.Count;
            if (count > 0)
            {
                UserId = (data[data.Count - 1].UserId);
            }
            else
            {
                UserId = 1;
            }
            return UserId;
        }

        // Get the username from data source.
        public object GetName()
        {
            // Get the DataSource from Database
            var data = db.GetUser().ToList();
            string name;
            var count = data.Count;
            if (count > 0)
            {
                name = (data[data.Count - 1].Name);
            }
            else
            {
                name = "User 1";
            }
            return name;
        }

        // Update user details in data source.
        [Route("SetUser")]
        public object SetUser([FromBody] User args)
        {
            UserDetails CurrentUser = new UserDetails();
            CurrentUser.Id = 1;
            CurrentUser.UserId = args.UserId;
            CurrentUser.Name = args.Name;
            db.UpdateUser(CurrentUser);
            return null;
        }
    }
}
```

Finally, compile and run this codes. Then, the Blazor File Manager will display the files and folders based on the user login like the following .gif image.

![Blazor File Manager Displaying Files Based on the User Login](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-File-Manager-Displaying-Files-Based-on-the-User-Login.gif)<figcaption>Blazor File Manager Displaying Files Based on the User Login</figcaption>

## GitHub Repository

For more information, refer to the code example in [Dynamically Display Directory Content (Files and Folders) Based on User Login in the Blazor File Manager](https://github.com/SyncfusionExamples/Blazor-File-Manager-Dynamic-Content-Loading "Link to Dynamically Display Directory Content (Files and Folders) Based on User Login in the Blazor File Manager demo on GitHub").

## Summary

Thanks for reading! In this blog, we have seen how to easily change the directory content based on user login using the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Link to Blazor File Manager"). This component is completely customizable and has flexible usage from the application’s point of view. Check out the Blazor File Manager’s [demos](https://blazor.syncfusion.com/demos/file-manager/overview?theme=bootstrap4 "Link to Blazor File Manager demos on web") and [documentation](https://blazor.syncfusion.com/documentation/file-manager/getting-started/ "Link to Blazor File Manager documentation") for detailed explanations to proceed further. Let’s easily manage our files with the user-friendly features in our Blazor File Manager!

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"), or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/ "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [bUnit for Blazor and How to Integrate it in Azure Pipeline](https://dev.to/sureshmohan/bunit-for-blazor-and-how-to-integrate-it-in-azure-pipeline-pjk-temp-slug-2526719 "Link to bUnit for Blazor and How to Integrate it in Azure Pipeline blog")
- [Creating a Master-Detail View Is Easier with Blazor DataGrid](https://dev.to/syncfusion/creating-a-master-detail-view-is-easier-with-blazor-datagrid-ff0 "Link to Creating a Master-Detail View Is Easier with Blazor DataGrid blog")
- [How to Preview Images in Syncfusion Blazor File Upload Component](https://dev.to/syncfusion/how-to-preview-images-in-syncfusion-blazor-file-upload-component-3ohn "Link to How to Preview Images in Syncfusion Blazor File Upload Component blog")
- [How to Synchronize Google Calendar with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-synchronize-google-calendar-with-syncfusion-blazor-scheduler-2c6j-temp-slug-7714852 "Link to How to Synchronize Google Calendar with Syncfusion Blazor Scheduler blog")