How to View and Edit the word (.docx) File in Same view in ASP .NET MVC

Question

I want to open the .docx Word file in the view (.cshtml) where I want to see the word file and able to edit it.

Folder structure: I'm working on the Jobseeker module and the .docx File uploaded by the Admin and that file present in the Admins Docs Folder.

I'm creating a view in the Jobseeker module.

I installed the Syncfusion.DocIO.Base NuGet package to open and edit the Word file and I compare the "TemplateName" that I fetch from the database and pass the .docx file path to my view through the ViewBag.

I'm able to see the view, but in that view, I just able to see a border box inside nothing else.

Controller code:

[HttpGet]
public async Task<actionresult> GetSelectedTemplate(int TempId)
{
    JobSeeker objJ = new JobSeeker();
    BALJobSeeker objBAL = new BALJobSeeker();

    List<jobseeker> jobSeekers = new List<jobseeker>();
    objJ.TemplateId = TempId;

    SqlDataReader dr = await objBAL.TemplateNameDetails(objJ);

    if (await dr.ReadAsync())
    {
        string templateName = dr["TemplateName"].ToString();

        if (templateName == "Resume_Template_1")
        {
            string documentPath = string.Empty;

            // Assuming you have logic to determine the document path based on TempId
            documentPath = Server.MapPath("~/Content/Admin/Docs/Resume_Template_1.docx");

            if (!System.IO.File.Exists(documentPath))
            {
                return HttpNotFound();
            }

            ViewBag.DocumentPath = documentPath;
        }
        else
        {
            return HttpNotFound();
        }
    }

    return View();
}

View (where I want to see the Word file):

@{
   Layout = null;
}
<title>Edit Word Document
#container {
    width: 100%;
    height: 600px;
}

var ele = document.getElementById('container');
var editor = new ej.documenteditor.DocumentEditor({ isReadOnly: false });
editor.appendTo(ele);
editor.open("@Html.Raw(ViewBag.DocumentPath)");