Dropdowns blank when rendered as partial view - .net-core

Question

I am attempting to load a modal create form via the method OnGetCertificationPartial. The form is loading, however the dropdowns are blank.
The dropdowns are not blank when loading the /Create page via the OnGet method
How can I get the dropdowns to populate when loaded as a partial via OnGetCertificationPartial method?
Create.cshtml.cs
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using EmployeeCertification.Models.Scaffold;
namespace EmployeeCertification.Pages.CertificationRuleCertifications
{
public class CreateModel : PageModel
{
private readonly EmployeeCertification.Models.Scaffold.EmployeeCertificationDBContext _context;
public CreateModel(EmployeeCertification.Models.Scaffold.EmployeeCertificationDBContext context)
{
_context = context;
}
public IActionResult OnGet(string ruleName)
{
ViewData["CertificationId"] = new SelectList(_context.Certifications, "CertificationId", "CertificationName");
ViewData["CertificationRuleId"] = new SelectList(_context.CertificationRules.Where(i => i.RuleName == ruleName), "CertificationRuleId", "RuleName");
return Page();
}
[BindProperty]
public CertificationRuleCertification CertificationRuleCertification { get; set; }
public PartialViewResult OnGetCertificationPartial()
{
ViewData["CertificationId"] = new SelectList(_context.Certifications, "CertificationId", "CertificationName");
ViewData["CertificationRuleId"] = new SelectList(_context.CertificationRules, "CertificationRuleId", "RuleName");
return Partial("/Pages/Shared/_CertificationRuleCertification.cshtml");
}
// To protect from overposting attacks, see https://aka.ms/RazorPagesCRUD
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.CertificationRuleCertifications.Add(CertificationRuleCertification);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
}
Details.cshtml (the screen the user clicks on to trigger the modal)
#page
#model EmployeeCertification.Pages.CertificationRules.DetailsModel
#{
ViewData["Title"] = "Details";
}
<h1>Details</h1>
<div>
<h4>CertificationRule</h4>
<hr />
<dl class="row">
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.CertificationRule.RuleName)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.CertificationRule.RuleName)
</dd>
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.CertificationRule.AppliesToAllEmployees)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.CertificationRule.AppliesToAllEmployees)
</dd>
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.CertificationRule.Active)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.CertificationRule.Active.ActiveName)
</dd>
</dl>
</div>
<div>
<a asp-page="./Edit" asp-route-id="#Model.CertificationRule.CertificationRuleId">Edit</a> |
<a asp-page="./Index">Back to List</a>
</div>
<div>
<button class="btn btn-sm btn-dark details" data-id="#Model.CertificationRule.CertificationRuleId" data-toggle="modal" data-target="#details-modal">Details</button>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="details-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Product Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
#section scripts{
<script>
$(function () {
$('button.details').on('click', function () {
$('.modal-body').load('/certificationrulecertifications/create?handler=CertificationPartial');
});
})
</script>
}
_CertificationRuleCertification.cshtml (routed to via OnGetCertificationPartial)
#model EmployeeCertification.Pages.CertificationRuleCertifications.CreateModel
<h1>Add</h1>
<h4>Certification</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CertificationRuleCertification.CertificationRuleId" class="control-label"></label>
<select asp-for="CertificationRuleCertification.CertificationRuleId" class="form-control" asp-items="ViewBag.CertificationRuleId"></select>
</div>
<div class="form-group">
<label asp-for="CertificationRuleCertification.CertificationId" class="control-label"></label>
<select asp-for="CertificationRuleCertification.CertificationId" class="form-control" asp-items="ViewBag.CertificationId"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
Create.cshtml (routed to via OnGet)
#page
#model EmployeeCertification.Pages.CertificationRuleCertifications.CreateModel
<h4>CertificationRuleCertification</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CertificationRuleCertification.CertificationRuleId" class="control-label"></label>
<select asp-for="CertificationRuleCertification.CertificationRuleId" class ="form-control" asp-items="ViewBag.CertificationRuleId"></select>
</div>
<div class="form-group">
<label asp-for="CertificationRuleCertification.CertificationId" class="control-label"></label>
<select asp-for="CertificationRuleCertification.CertificationId" class ="form-control" asp-items="ViewBag.CertificationId"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

IMHO you have a bug. SelectList constructor needs an IEnumerable list as a parameter, but you use IQueryable. And create model too. You can try this
CertificationRuleCertification= new CertificationRuleCertification();
ViewData["CertificationId"] = new SelectList(_context.Certifications.ToList(), "CertificationId", "CertificationName");
ViewData["CertificationRuleId"] = new SelectList(_context.CertificationRules.ToList(), "CertificationRuleId", "RuleName");
Since you are using Razor, the code that I am suggesting should be placed not in Create page code, but in a code behind the partial page. Use OnGet or OnGetAsync for this code.
But much better variant is to use a model to keep select lists. Just add two more properties CertificationIdList and CertificationRuleIdList to the existing model.