在 ASP.NET Core MVC 的 iframe 中显示局部视图

Question

I've been trying for some time to render a razor page in an IFrame in ASP.NET Core MVC 2.2.

I have my main page and some menus that should open specific pages in my IFrame.

The action that opens my main screen is this.

[HttpGet]
public IActionResult IndexAdm()
{
    try
    {
        return View();
    }
    catch (Exception ex)
    {
        throw new Exception(ex.Message);
    }
}

Here is the code that loads the partial view on my screen.

public PartialViewResult IframeAction(string sortBy)
{
    if (sortBy == null)
        return PartialView("../Company/ViewPartial");
    else
    {
        return PartialView(sortBy);
    }
}

The first time my page loads, everything works fine. The main page is loaded and the other page is loaded into my iframe, as shown in the image below.

What I want to get is what happens above, but when I click my menu button, the main page disappears and only my partial page is loaded in the browser, as you can see in the image below.

My menu item code is low.

<li>
    <a class="nav-link" href="#">
        <i class="fas fa-question"></i>
        @Html.ActionLink("FAQ", "IframeAction", "Company", new { sortBy = "../Company/ViewPartial" }, null)@*https://www.codeproject.com/Questions/1221703/How-do-I-update-an-iframe-using-ASP-NET-core*@
    </a>
</li>

My IFrame code is below.

<iframe id="IframeAdm" name="IFrameAdm" width="100%" height="85%" border="none" src="/Company/IframeAction"></iframe>

How can I make my partial page render inside my iframe without my main page disappearing?

Answer 1

The @Html.ActionLink will create an <a> tag which will work as a link to redirect to the mentioned page. Based on your use case, it looks like you may want to leverage aspnet core's layout feature and maybe partial views. You can check this link .

If you must however update an iframe, you will need to use javascript to update the src of the iFrame. Since you are using .net core 2.2, jquery will already be imported. You can use the following jquery

function navigate(path) {
    $("#IframeAdm").attr('src', path);
}

Now, in your menu items, you can do something like this:

<li>
    <a class="nav-link" href="#" onclick="navigate(@Url.Content("your/path/here"))">
        <i class="fas fa-question"></i>
    </a>
</li>