locked
selectlist in form 2 not populating after submitting data in form1 RRS feed

  • Question

  • User-190697402 posted

    Hi,

    My selectlist in second form is not populating,after submitting data in form 1.

    Its prepopulating all the values before submitting the Form 1 data.

    Im using a tab structure. How can i navigate to the second tab after form 1 submit button.

    Friday, November 13, 2020 2:44 AM

All replies

  • User475983607 posted

    Hi,

    My selectlist in second form is not populating,after submitting data in form 1.

    Its prepopulating all the values before submitting the Form 1 data.

    Im using a tab structure. How can i navigate to the second tab after form 1 submit button.

    I explained the problems with your design in your other thread.  You ignored the advice.  Basically you still need to a lot more code, JavaScript and C#, to manage the UI.    

    Friday, November 13, 2020 4:09 AM
  • User-190697402 posted

    Hi Mgebhard,

    In the previous thread you told me that i can use pagehandlers also.Hope you remember that.

    and im using pagehandlers for submitting the data.

    Please check this thread also.

    https://forums.asp.net/t/2171767.aspx?Muti+Step+input+forms+in+a+single+page+with+Tabs+View+Razor+Page

    I followed what the Moderator and Jerry Cai has mentioned.

    I explained the problems with your design in your other thread.  You ignored the advice.  Basically you still need to a lot more code, JavaScript and C#, to manage the UI.    

    Could you please elaborate where im going wrong in my design with an example. So that it would be easy to understand.

    It was an urgent requirement .I started coding in Razor Pages without any background in ASP.NET core . That why struggling to fix issues.

    Thanks for the understanding.

    Friday, November 13, 2020 4:19 AM
  • User475983607 posted

    teenajohn1989

    In the previous thread you told me that i can use pagehandlers also.Hope you remember that.

    You misunderstand.  I said you can use page handlers but you had a lot more code to write and had to make a decision one which direction to go. I guess you ignored that part.  I specifically mentioned the tabs!!!

    teenajohn1989

    Please check this thread also.

    https://forums.asp.net/t/2171767.aspx?Muti+Step+input+forms+in+a+single+page+with+Tabs+View+Razor+Page

    I followed what the Moderator and Jerry Cai has mentioned.

    That's only a hack that fixes a specific problem in a poor design. 

    teenajohn1989

    Could you please elaborate where im going wrong in my design with an example. So that it would be easy to understand.

    It was an urgent requirement .I started coding in Razor Pages without any background in ASP.NET core . That why struggling to fix issues.

    I did and it is in your previous post.   Basically, you have a lot more code to design and write.

    Edit: Your current design approach requires writing code to not only save user inputs in a database but also fetch the data and populate the forms on every post.  Bootstrap tabs are a client side library so you'll also need to design/write a little JavaScript application to programmatically select a tab.  For example, if there is an error and you need to open a particular tab.

    If you go with AJAX/fetch then the UI caches user inputs but you have to write a larger JavaScript application, than above, to manage the UI.  

    Lastly, you can create a separate Razor Page for each form rather than a partial.  This approach is, by far, much easier to design.  

    There are other variations like loading partial content which also has its pros and cons.

    Friday, November 13, 2020 12:13 PM
  • User-190697402 posted

    Hi Mgebhard,

    Thanks for the clarification.

    Correct me if i am wrong, Insted of using partial view i can i use pagemodels ryt?.So my tab structure will be

    <!-- Tabstrip -->
        <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li role="presentation" class="nav-item active">
                <a href="StaffDetails.cshtml" role="tab" class="nav-link" data-toggle="tab">Staff Details</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#Biodata" class="nav-link" role="tab" data-toggle="tab">Biodata</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#EduQualification" class="nav-link" role="tab" data-toggle="tab">Educational Qualification</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#Assets" class="nav-link" role="tab" data-toggle="tab">Assets</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#Others" class="nav-link" role="tab" data-toggle="tab">Others</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="#AttachForms" class="nav-link" role="tab" data-toggle="tab">Attachment Of Forms</a>
            </li>
    
        </ul>
        <!-- Tab panes -->

    will it be like this?

    And tab content will be each page model class

    am i correct?

    Monday, November 16, 2020 1:10 AM
  • User475983607 posted

    teenajohn1989

    And tab content will be each page model class

    am i correct?

    If you decide to go with Razor Pages then you'll have 6 Razor Pages.  One Razor Page for each HTML form.   You'll use the tab style only not the data-toggle because you must do an HTTP get to the other Razor Pages.  The tabs should be a partial as that's what partials are for - reusable HTML blocks.   The href will look like... 

    <a href="StaffDetails" class="nav-link">Staff Details</a>

    If you want a desktop application feel Bootstrap tabs provides then design a JavaScript application with AJAX (or fetch) with JSON.  I would call Web API endpoints but you can call page handlers too.  

    IMHO, you do not fully understand Razor Pages and Bootstrap.  You made a few incorrect assumptions that caused you to go down the wrong path.

    Monday, November 16, 2020 9:07 PM
  • User-190697402 posted

    Hi

    If you want a desktop application feel Bootstrap tabs provides then design a JavaScript application with AJAX (or fetch) with JSON.  I would call Web API endpoints but you can call page handlers too.  

    Could you please give me an example.Still im not clear about what you are saying.

    Even if i search in google also,they are suggesting the Partial View and Pagehandlers concept,i have never seen implementing multiple tabs with the concept you were talking about.

    So it would be great if you could provide me sample code.That would help me to understand how it works.

    Tuesday, November 17, 2020 12:45 AM
  • User475983607 posted

    Even if i search in google also,they are suggesting the Partial View and Pagehandlers concept,i have never seen implementing multiple tabs with the concept you were talking about.

    I find your last two statements very hard to accept.   I think what's happening is you've made up your mind how this problem should be solved without a solid understanding of Razor Pages, Bootstrap, or JavaScript.  You expect the framework to behave as you made up in your mind when in fact the framework behaves much differently.  You tried to hack a path rather than embracing the tools.

    To answer your question and to build a simple template for server rendering, I followed the Bootstrap Nav/Tab documentation and standard Razor Pages constructs.   The partial contains the navigation and active tab logic.  The partial is shared by every Razor Page that uses the nav.  The Razor Pages informs the partial which tab is active by passing a model.  This is pretty standard stuff.  No magic.   

     Partial

    <div>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "StaffDetails" ? "active" : "")" 
                   href="/StaffDetails">StaffDetails</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "BioData" ? "active" : "")"
                   href="/Biodata">Biodata</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "EduQualification" ? "active" : "")" 
                   href="/EduQualification">EduQualification</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "Assets" ? "active" : "")" 
                   href="/Assets">Assets</a>
            </li>
        </ul>
    </div>
    namespace RazorDemo.Pages.Shared
    {
        public class BootstrapTabsModel : PageModel
        {
            public void OnGet()
            {
            }
    
            public string SelectedTab { get; set; } = "StaffDetails";
        }
    }

    Sample Razor Pages

    @page
    @model RazorDemo.Pages.BiodataModel
    @{
    }
    
    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "BioData" }); }
    
    <h1>BioData</h1>
    @page
    @model RazorDemo.Pages.StaffDetailsModel
    @{
    }
    
    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "StaffDetails" }); }
    
    <h1>Staff details</h1>

    Applying a Razor Pages (server side) solution is one approach to solve this basic user input programming problem.   Typically, server side rendering is easier to design.  Plus it is much easier to handle one user input form at a time.  This is true regardless of the framework you decide to implement.  For example, if you build a client side app, the client application will interact with one end point (URL) using one model not 6 models like your original design. 

    Tuesday, November 17, 2020 1:24 PM
  • User-190697402 posted

    Hi Mgebhard,

    Thank you so much for the explanation.

    I tried to follow your logic.But for me the tabs are not working as intended.

    When i click on the StaffDetails tab, its navigating to StaffDetails page, even though i have written the coding, the form fields are not displaying.

    What i have did is ,

    Index.cshtml 

    @page
    @model Contractor_HRMS.Pages.Staff.Onboarding.IndexModel
    @{
        ViewData["Title"] = "Staff Onboarding";
        Layout = "~/Pages/Shared/_Layout.cshtml";
    }
    
    <h4>STAFF ONBOARDING</h4>
    <hr />
    
    <div>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "StaffDetails" ? "active" : "")"
                   href="/StaffDetails">StaffDetails</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "BioData" ? "active" : "")"
                   href="/Biodata">Biodata</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "EduQualification" ? "active" : "")"
                   href="/EduQualification">EduQualification</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "Assets" ? "active" : "")"
                   href="/Assets">Assets</a>
            </li>
        </ul>
    </div>
    

    Index.cshtml.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace Contractor_HRMS.Pages.Staff.Onboarding
    {
        public class IndexModel : PageModel
        {
            public void OnGet()
            {
            }
    
            public string SelectedTab { get; set; } = "StaffDetails";
        }
    }
    

    The partial contains the navigation and active tab logic.  The partial is shared by every Razor Page that uses the nav. 

    Im quite confused here. Can you please explain me the 'partial' .Does it mean a partial view?

    StaffDetails.cshtml

    @page
    @model Contractor_HRMS.Pages.Staff.Onboarding.StaffDetailsModel
    @{
    }
    
    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "StaffDetails" }); }
    
    <h1>Staff details</h1>
    
    <br />
    <form method="post" asp-page-handler="InsertStaffDetails">
        <div class="row">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="col-6">
                <!-- Type Of Employee -->
                <div class="form-group">
                    <label asp-for="StaffDetails.TypeOfEmployee" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.TypeOfEmployee" asp-items="Model.ShowTypeOfEmployee" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.TypeOfEmployee" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employment Type -->
                <div class="form-group">
                    <label asp-for="StaffDetails.EmploymentType" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.EmploymentType" asp-items="Model.ShowEmploymentType" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.EmploymentType" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employee Id -->
                <div class="form-group">
                    <label asp-for="StaffDetails.EmpID" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.EmpID" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.EmpID" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Global Id -->
                <div class="form-group">
                    <label asp-for="StaffDetails.GlobalId" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.GlobalId" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.GlobalId" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employee First Name(Preferred) -->
                <div class="form-group">
                    <label asp-for="StaffDetails.PreferredEmpFname" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.PreferredEmpFname" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.PreferredEmpFname" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employee Last Name(Preferred) -->
                <div class="form-group">
                    <label asp-for="StaffDetails.PreferredEmpLname" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.PreferredEmpLname" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.PreferredEmpLname" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Location -->
                <div class="form-group">
                    <label asp-for="StaffDetails.Location" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.Location" asp-items="Model.ContractorLocation" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.Location" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Department -->
                <div class="form-group">
                    <label asp-for="StaffDetails.Department" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.Department" asp-items="Model.DeptName" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.Department" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Section -->
                <div class="form-group">
                    <label asp-for="StaffDetails.Section" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.Section" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.Section" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Job-Title -->
                <div class="form-group">
                    <label asp-for="StaffDetails.JobTitle" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.JobTitle" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.JobTitle" class="text-danger" style="margin-left:210px;"></span>
                </div>
            </div>
            <div class="col-6">
                <!-- Cost-Center -->
                <div class="form-group">
                    <label asp-for="StaffDetails.CostCentre" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.CostCentre" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.CostCentre" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employment-Category -->
                <div class="form-group">
                    <label asp-for="StaffDetails.EmploymentCategory" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.EmploymentCategory" asp-items="Model.EmpCategories" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.EmploymentCategory" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Contractor/Agency Name -->
                <div class="form-group">
                    <label asp-for="StaffDetails.ContractorAgencyName" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.ContractorAgencyName" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.ContractorAgencyName" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Start Date -->
                <div class="form-group">
                    <label asp-for="StaffDetails.Startdate" class="control-label-staff"></label>
                    <input asp-format="{0:dd/MM/yyyy}" asp-for="StaffDetails.Startdate" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.Startdate" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Supervisor Name -->
                <div class="form-group">
                    <label asp-for="StaffDetails.SupervisorName" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.SupervisorName" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.SupervisorName" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Supervisor Email -->
                <div class="form-group">
                    <label asp-for="StaffDetails.SupervisorEmail" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.SupervisorEmail" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.SupervisorEmail" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Compensation -->
                <div class="form-group">
                    <label asp-for="StaffDetails.Compensation" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.Compensation" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.Compensation" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Employment Status -->
                <div class="form-group">
                    <label asp-for="StaffDetails.EmploymentStatus" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.EmploymentStatus" asp-items="Model.EmpStatus" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.EmploymentStatus" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Regular/Temporary -->
                <div class="form-group">
                    <label asp-for="StaffDetails.RegularTemp" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.RegularTemp" asp-items="Model.RegularOrTemporary" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.RegularTemp" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Incentive Plan -->
                <div class="form-group">
                    <label asp-for="StaffDetails.IncentivePlan" class="control-label-staff"></label>
                    <select asp-for="StaffDetails.IncentivePlan" asp-items="Model.IncentivePlans" class="form-control-staff">
                        <option value="">Please Select</option>
                    </select><br />
                    <span asp-validation-for="StaffDetails.IncentivePlan" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <!-- Target Incentive -->
                <div class="form-group">
                    <label asp-for="StaffDetails.TargetIncentive" class="control-label-staff"></label>
                    <input asp-for="StaffDetails.TargetIncentive" class="form-control-staff" /><br />
                    <span asp-validation-for="StaffDetails.IncentivePlan" class="text-danger" style="margin-left:210px;"></span>
                </div>
    
                <div class="form-group" style="display:none;">
                    <label asp-for="StaffDetails.LastModifiedBy" class="control-label"></label>
                    <input asp-for="StaffDetails.LastModifiedBy" class="form-control" value="jteena" />
                    <span asp-validation-for="StaffDetails.LastModifiedBy" class="text-danger"></span>
                </div>
                <div class="form-group" style="display:none;">
                    <label asp-for="StaffDetails.LastModifiedTimestamp" class="control-label"></label>
                    <input asp-for="StaffDetails.LastModifiedTimestamp" class="form-control" value="@DateTime.Now" />
                    <span asp-validation-for="StaffDetails.LastModifiedTimestamp" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div style="float:right">
            <input type='submit' class='btn btn-success' value='Save' />
        </div>
    </form>
    

    StaffDetails.cshtml.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Contractor_HRMS.Data;
    using Contractor_HRMS.Models;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using Microsoft.AspNetCore.Mvc.Rendering;
    
    namespace Contractor_HRMS.Pages.Staff.Onboarding
    {
        public class StaffDetailsModel : PageModel
        {
            private readonly IWebHostEnvironment _env;
            private readonly ApplicationDbContext _context;
    
            public StaffDetailsModel(IWebHostEnvironment env, ApplicationDbContext applicationDbContext)
            {
                _env = env;
                _context = applicationDbContext;
            }
    
            [BindProperty]
            public StaffDetails StaffDetails { get; set; }
    
            //---Type Of Employee ---//
            public SelectList ShowTypeOfEmployee { get; set; }
    
            //---Employment Type ----//        
            public SelectList ShowEmploymentType { get; set; }
    
            //---Location ----------//        
            public SelectList ContractorLocation { get; set; }
    
            //--- Department -------//        
            public SelectList DeptName { get; set; }
    
            //-------Employment Category --------//        
            public SelectList EmpCategories { get; set; }
    
            //---------Employment Status ---------//        
            public SelectList EmpStatus { get; set; }
    
            //------------Regular/Temporary ----------//       
            public SelectList RegularOrTemporary { get; set; }
    
            // ------------Incentive Plan ----------------//        
            public SelectList IncentivePlans { get; set; }
            public void OnGet()
            {
                ShowTypeOfEmployee = new SelectList(_context.TypeOfEmployees, "TypeOfEmployee", "TypeOfEmployee");
                ShowEmploymentType = new SelectList(_context.EmploymentTypes, "EmploymentType", "EmploymentType");
                ContractorLocation = new SelectList(_context.Location.OrderBy(e => e.location), "location", "location");
                DeptName = new SelectList(_context.Department.OrderBy(e => e.DeptName), "DeptName", "DeptName");
                EmpCategories = new SelectList(_context.EmploymentCategory.OrderBy(e => e.EmpCategories), "EmpCategories", "EmpCategories");
                EmpStatus = new SelectList(_context.EmploymentStatus.OrderBy(e => e.EmpStatus), "EmpStatus", "EmpStatus");
                RegularOrTemporary = new SelectList(_context.RegTemp.OrderBy(e => e.RegularOrTemporary), "RegularOrTemporary", "RegularOrTemporary");
                IncentivePlans = new SelectList(_context.IncentivePlan, "IncentivePlans", "IncentivePlans");
            }
        }
    }
    

    Wednesday, November 18, 2020 1:55 AM
  • User475983607 posted

    teenajohn1989

    Im quite confused here. Can you please explain me the 'partial' .Does it mean a partial view?

    Come on now.   You are building a Razor Page application.  It is a Partial Razor Page and it contains the navigation for each page as stated in my last post.  Perhaps you are confused because the partial is used as intended; a shared block of HTML.

    Wednesday, November 18, 2020 12:15 PM
  • User-190697402 posted

    Hi mgebhard,

    Correct me if i am wrong,partials wont have a model.ryt?

    then where i have to paste this code snippet.

    public string SelectedTab { get; set; } = "StaffDetails";

    is it inside each pagemodel class?

    and one more doubt

    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "BioData" }); }

    is this partial view name?if so ,it should start with underscore .ryt?

    Partial

    <div>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "StaffDetails" ? "active" : "")" 
                   href="/StaffDetails">StaffDetails</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "BioData" ? "active" : "")"
                   href="/Biodata">Biodata</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "EduQualification" ? "active" : "")" 
                   href="/EduQualification">EduQualification</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(Model.SelectedTab == "Assets" ? "active" : "")" 
                   href="/Assets">Assets</a>
            </li>
        </ul>
    </div>
    namespace RazorDemo.Pages.Shared
    {
        public class BootstrapTabsModel : PageModel
        {
            public void OnGet()
            {
            }
    
            public string SelectedTab { get; set; } = "StaffDetails";
        }
    }

    Sample Razor Pages

    @page
    @model RazorDemo.Pages.BiodataModel
    @{
    }
    
    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "BioData" }); }
    
    <h1>BioData</h1>

    Thursday, November 19, 2020 12:54 AM
  • User475983607 posted

    Correct me if i am wrong,partials wont have a model.ryt?

    No. Partials can have models.  Your original code passes the main Razor's Page's model to every partial.

    then where i have to paste this code snippet.

    public string SelectedTab { get; set; } = "StaffDetails";

    is it inside each pagemodel class?

    No.  That snippet of code is a property in the partial's code file.  

    and one more doubt

    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "BioData" }); }

    is this partial view name?if so ,it should start with underscore .ryt?

    There is no rule that a partial must start with an underscore.  

    Thursday, November 19, 2020 1:12 AM
  • User-190697402 posted

    Hi Mgebhard,

    Im getting this error,

    InvalidOperationException: The model item passed into the ViewDataDictionary is of type '<>f__AnonymousType0`1[System.String]', but this ViewDataDictionary instance requires a model item of type 'Contractor_HRMS.Pages.Staff.Onboarding.StaffOnboardingModel'.

    As you said earlier, my partial view for navigation will have model .

    My Partial View name is StaffOnboarding.cshtml .Could you please tell me where im going wrong here.

    Thanks

    Thursday, November 19, 2020 3:03 AM
  • User475983607 posted

    As you said earlier, my partial view for navigation will have model .

    No  You made yet another assumption.  As I've explained many time over several threads, each Razor Pages has the model and forms.  

    My Partial View name is StaffOnboarding.cshtml .Could you please tell me where im going wrong here.

    You are unable to follow simple instructions.  You should have only Razor Pages no Partials.

    Thursday, November 19, 2020 11:47 AM
  • User-190697402 posted

    Hi Mgebhard,

    You are unable to follow simple instructions.  You should have only Razor Pages no Partials.

    Sorry to say that, im not able to follow what you are saying. But i'm able to follow others instructions as you can see some solved threads in my profile. 

    If you could give me a proper example it would be helpful. As i said earlier i dont have prior experience in this.

    What does this line means? Seriously im confused..

    No. Partials can have models.  Your original code passes the main Razor's Page's model to every partial.

    Currently this is my folder

    As you can see i have not used any partials in that.

    Can i check from where you are referring the Bootstraptabs which is highlighted below. Is that the file in which you have written the navigation part?If so i have done the same.But im getting that error.

    @{ await Html.RenderPartialAsync("BootstrapTabs", new { SelectedTab = "BioData" }); }

    Thanks for your understanding.

    Thursday, November 19, 2020 1:05 PM