title: Use forms on multiple tabs in Net Core 3.1 MVC
body: <p>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.</p>
  <p>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.</p>
  <p>My code so far:</p>
  <p>basicprofile.cshtml</p>
  <pre><code>@page
  @model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel
  @{
  }
  &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot; role=&quot;tablist&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link active&quot; id=&quot;basicprofile-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#basicprofile&quot; aria-controls=&quot;basic&quot; aria-selected=&quot;true&quot;&gt;Account&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; id=&quot;extendedprofile-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#extendedprofile&quot; aria-controls=&quot;extended&quot; aria-selected=&quot;false&quot;&gt;Profile&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;tab-content p-3 border-right border-left&quot;&gt;
      &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;basicprofile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;basicprofile-tab&quot;&gt;
          
      &lt;/div&gt;
      &lt;div class=&quot;tab-pane fade&quot; id=&quot;extendedprofile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;extendedprofile-tab&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  @section scripts{
      &lt;script&gt;
          var basicprofileLoaded = false;
          var extendedprofileLoaded = false;
          console.log(&quot;active&quot;);
          $(function () {
              $('a[data-toggle=&quot;tab&quot;]').on('shown.bs.tab', function (e) {
                  switch ($(e.target).attr('aria-controls')) {
  
                      case &quot;basic&quot;:
                          if (!basicprofileLoaded) {
                              $('#basicprofile').load(&quot;@Url.Page(&quot;basicuserprofile&quot;, pageHandler:&quot;PartialForm&quot; )&quot;);
                              basicprofileLoaded = true;
                          }
                          break;
                      case &quot;extended&quot;:
                          if (!extendedprofileLoaded) {
                              console.log(&quot;inside switch/ IF extended part&quot;);
                              $('#extendedprofile').load('/account/extendedprofile')
                              ordersLoaded = true;
                          }
                          break;
                  }
              });
          });
      &lt;/script&gt;
  }
  </code></pre>
  <p>BasicUserProfile.cs</p>
  <pre><code>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&lt;IActionResult&gt; OnGetAsync()
          {
              Input.Password = &quot;test inpu&quot;;
              Input.LoginName = &quot;other input&quot;;
              return Page();
          }
  
          public async Task&lt;PartialViewResult&gt; OnGetPartialForm()
          {
              Input.LoginName = &quot;some name&quot;;    
              return Partial(&quot;_BasicProfilePartial&quot;, Input);
          }
      }
  }
  </code></pre>
  <p>I have several problems:</p>
  <ol>
  <li>My handlers OnGet() and OnGetPartialForm() are not fired. Break points don't get hit.</li>
  <li>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.</li>
  <li>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.</li>
  </ol>
  <p>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.</p>