How can I "inject" pages into my existing page using buttons to select the page

I am new to Razor pages and hope there is a simple answer.

Using this sketch as an example:

     Name        |   Page Chooser
                 |-----------------
     Chooser     |   Page Content
                 |

In a Razor page, I want to click on a name in the "Name Chooser" section, and have the "Page Content" populate based on the ID of that selection. Then, if the user clicks a button in the "Page Chooser" section, have the "Page Content" section update using the same ID chosen in the name choose, but with the new page's controls.

In web forms, I would probably use nested Master Pages for this where the main page is the site navigation, header, and footer and the nested master page would have the Name Chooser and the Page Chooser. The child pages would be the "Page Content" section.

How would this be accomplished using Razor?

Is there a faster way of doing this? I really need to only render out the "Page Content" section and not everything else.

Note: The "Page Content" could be inputs, tables, forms, etc.

Solution

I found the answer. First, I used nested layouts to get the layout I wanted. Then, I put in a <div> to hold the place the page will inject.

<button id="btnTest" class="btn">Test</button>
<div id="content">This shows the area that will change</div>

Then, in JavaScript:

$('#btnTest').click(function () { $('#content').load('/Test');});

It works with Razor pages which is what I wanted. I can now replace the single test button with a button bar or something similar and just add more jQuery to change the loaded file in JavaScript.