Partial razor page won't render in ASP .NET Core - asp.net-core

Question

I've got a master page/template page/whatever you wanna call it with the site navigation and header and I want to swap out the body of the page with different partial views.
In the code behind file for the master page I have:
public void OnGet(string screenSelect = "Welcome")
{
ScreenSelect = screenSelect;
}
In the cshtml file I have:
#switch (Model.ScreenSelect)
{
case "Page1":
<div>
#await Html.PartialAsync("_Page1", Model.Page1Model)
</div>
break;
case "Page2":
<div>
#await Html.PartialAsync("_Page2", Model.Page2Model)
</div>
break;
case "Page3":
<div>
#await Html.PartialAsync("_Page3", Model.Page3Model)
</div>
break;
case "Page4":
<div>
#await Html.PartialAsync("_Page4", Model.Page4Model)
</div>
break;
case "Page5":
<div>
#await Html.PartialAsync("_Page5", Model.Page5Model)
</div>
break;
}
And for javascript I have:
function navigateTo(pageName)
{
console.log('in navigateTo');
$.ajax({
type: "GET",
url: "MasterPage?screenSelect=" + pageName,
content: "application/json; charset=utf-8",
success: function (response)
{
console.log('in success');
},
error: function (xhr, textStatus, errorThrown)
{
console.log('in error');
}
});
}
I can confirm that the navigateTo function is firing and the OnGet is being hit with the correct parameter. I've set breakpoints on the #awaits and can confirm that the correct #await Html.PartialAsync is also being hit. But the page just doesn't update.

Answer 1

Since you are using JQuery Ajax to update the partial content, after calling the action method successful, it will return the result to the Ajax success function. So, if you want to update the partial view content in the master page, you should do that in the Ajax's Success function.
Please refer the following code:
MasterPage.cshtml.cs:
public class MasterPageModel : PageModel
{
[BindProperty]
public string ScreenSelect { get; set; }
[BindProperty]
public string Page1Model { get; set; }
[BindProperty]
public string Page2Model { get; set; }
[BindProperty]
public string Page3Model { get; set; }
public void OnGet(string screenSelect = "Welcome")
{
ScreenSelect = screenSelect;
}
//create a handler to load partial view.
public IActionResult OnGetLoadPartial(string screenSelect)
{
var returnmodel = "";
//initial data source.
Page1Model = "this is Page1 Page";
Page2Model = "This is Page2 Page";
Page3Model = "This is Page3 Page";
switch (screenSelect)
{
case "Page1":
returnmodel = Page1Model;
return Partial("_Page1", returnmodel);
case "Page2":
returnmodel = Page2Model;
return Partial("_Page1", returnmodel);
case "Page3":
returnmodel = Page3Model;
return Partial("_Page1", returnmodel);
default:
returnmodel = "<div><h2> Master Page </h2></div>";
return Content(returnmodel);
};
}
}
MasterPage.cshtml
#page
#model RazorSample.Pages.MasterPageModel
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Master Page</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div id="container">
#switch (Model.ScreenSelect)
{
case "Page1":
<div>
#await Html.PartialAsync("_Page1", Model.Page1Model)
</div>
break;
case "Page2":
<div>
#await Html.PartialAsync("_Page2", Model.Page2Model)
</div>
break;
case "Page3":
<div>
#await Html.PartialAsync("_Page3", Model.Page3Model)
</div>
break;
default:
<div>
<h2>Master Page</h2>
</div>
break;
}
</div>
#section Scripts{
<script>
function navigateTo(pageName) {
console.log('in navigateTo');
event.preventDefault(); //prevent the default event.
$.ajax({
type: "Get",
url: "MasterPage?handler=LoadPartial&screenSelect=" + pageName,
success: function (response) {
console.log('in success');
$("#container").html("");// clear the container
$("#container").html(response); //load the partial view.
},
error: function (xhr, textStatus, errorThrown) {
console.log('in error');
}
});
}
</script>
}
Code in the partial view:
#model string
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
<h2>#Model</h2>
Then, the result like this: