How to RenderPage when clicked on a link

Question

So I have a div, in which I have an a element. I want the other div to Render another page (RenderPage) as soon as the a element in the other div is clicked.

<div id="Left" style="width:29.49%; height:100%; border-style:solid; border-color:darkgray;">
    <h1 id="Pages"> Articles </h1><br />
    <a OnClick="LoadUE()">UE</a>
    &nbsp;&nbsp;<a></a>
    <script>
        function LoadUnity() {

        }
        function LoadUE() {
            document.getElementById("Body").innerHTML = @{RenderPage("Bottom.cshtml")};
        }
    </script>
</div>
<div id="Body" style="width:69.49%; height:100%;">

</div>

Answer 1

The RenderPage method only works on the server when the page is first executed. If you want to load partials in ASP.NET Web Pages (which is what you are using) from client script, you should remove the leading underscore from the file name and then create an AJAX request to load it. Here's an example that uses Fetch:

@section scripts{
    <script>
        function loadUE() {
            fetch('/bottom')
                .then((response) => {
                    return response.text();
                })
                .then((result) => {
                    document.getElementById('body').innerHTML = result;
                });
        });
    </script>
}

As a side note, the ASP.NET Web Pages framework is pretty much dead. If you are just learning and have a choice, you should use Razor Pages instead: https://www.learnrazorpages.com/