Use forms on multiple tabs in Net Core 3.1 MVC - tabs

Question

In my Net Core 3.1 MVC project I wish to create two tabs on one page, with on each tab a form for editing data. What is the best approach to do this? Preferably with lazy loading, so that form data gets loaded when a tab is active.
I have tried with Pages and PartialViews but this didn't work properly, and now I am wondering if there is a straightforward way of achieving this in Net Core MVC.
My code so far:
basicprofile.cshtml
#page
#model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel
#{
}
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="basicprofile-tab" data-toggle="tab" href="#basicprofile" aria-controls="basic" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="extendedprofile-tab" data-toggle="tab" href="#extendedprofile" aria-controls="extended" aria-selected="false">Profile</a>
</li>
</ul>
<div class="tab-content p-3 border-right border-left">
<div class="tab-pane fade show active" id="basicprofile" role="tabpanel" aria-labelledby="basicprofile-tab">
</div>
<div class="tab-pane fade" id="extendedprofile" role="tabpanel" aria-labelledby="extendedprofile-tab"></div>
</div>
#section scripts{
<script>
var basicprofileLoaded = false;
var extendedprofileLoaded = false;
console.log("active");
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).attr('aria-controls')) {
case "basic":
if (!basicprofileLoaded) {
$('#basicprofile').load("#Url.Page("basicuserprofile", pageHandler:"PartialForm" )");
basicprofileLoaded = true;
}
break;
case "extended":
if (!extendedprofileLoaded) {
console.log("inside switch/ IF extended part");
$('#extendedprofile').load('/account/extendedprofile')
ordersLoaded = true;
}
break;
}
});
});
</script>
}
BasicUserProfile.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using VideoGallery.Presentation.Services;
namespace VideoGallery.Presentation.Pages.Account
{
public class BasicUserProfile : PageModel
{
[BindProperty]
public InputModel Input { get; set; }
public class InputModel
{
public string LoginName { get; set; }
public string Password { get; set; }
}
// both methods don't even get called, even when the page renders with an empty form.
public async Task<IActionResult> OnGetAsync()
{
Input.Password = "test inpu";
Input.LoginName = "other input";
return Page();
}
public async Task<PartialViewResult> OnGetPartialForm()
{
Input.LoginName = "some name";
return Partial("_BasicProfilePartial", Input);
}
}
}
I have several problems:
My handlers OnGet() and OnGetPartialForm() are not fired. Break points don't get hit.
On loading of BasicUserProfile page, the basic tab should be active, showing the form on this first tab. It has the active class, but the data isn't loaded.
The BasicProfile tab loads the whole Page object, after I click the basic tab (when I am on the extended-tab, for example). It loads the whole page, although none of the backend breakpoints are hit.
What I would like to do:
On loading the initial page, the form data for the first tab (active on loading) should be loaded, with or without data. Then if the user changes to the second tab, that form data should be loaded and displayed under the 2nd tab. Obviously, later, I want to process the data with a post request.

Answer 1

My handlers OnGet() and OnGetPartialForm() are not fired. Break points don't get hit.
That is because you use #model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel , which is not a PageModel.
Change to:
#page
#model VideoGallery.Presentation.Pages.Account.BasicUserProfile
<input asp-for="Input.Password" />
<input asp-for="Input.LoginName" />
$('#basicprofile').load("#Url.Page("basicuserprofile", pageHandler:"PartialForm" )");
Be sure the url is rendered successfully. You can press F12 and click Sources panel to check the js source in browser. In your scenario, it seems to be:$('#basicprofile').load("#Url.Page("/Account/basicuserprofile", pageHandler:"PartialForm" )");.
[BindProperty]
public InputModel Input { get; set; }
You need remember to initialize the InputModel, otherwise it will get error when hit Input.Password = "test inpu";:
[BindProperty]
public InputModel Input { get; set; } = new InputModel();