Razor Pages Model Binding in Partial View after post form - ajax

Question

I trying to achieve to following: let's say I have a Create VM form. This is all very standard with stuff:
Model
[BindProperty]
public NewVM NewVM { get; set; }
NewVM Model (part of):
public string Name { get; set; }
public int SelectedTemplateId { get; set; }
public List<Templates> Templates { get; set; }
Template Model (part of):
public int Id{ get; set; }
public string Name { get; set; }
Form (part of)
<form method="post">
<div class="form-group row">
<label for="vmname" class="col-sm-4 col-form-label col-form-label-sm">Virtual Machine Name</label>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm">
</div>
</div>
</form>
A part of the Create VM form is selecting a template. This is dependent of the Cluster selected. This a presented as a dropdown box
<div class="form-group row">
<label class="col-sm-4 col-form-label col-form-label-sm">Cluster</label>
<div class="col-sm-8">
#Html.DropDownListFor(x => Model.ClusterId, new SelectList(Model.Clusters, "Id", "Name"), "Please select", htmlAttributes: new { #class = "form-control form-control-sm", id = "clusters" })
#Html.ValidationMessageFor(x => x.Tenant.ClusterId, "", new { #class = "text-danger" })
</div>
</div>
So far so good. When a cluster is selected the following Ajax call is made to retrieve the templates available for that cluster:
Javascript:
$(function () {
$("#clusters").change(function () {
var host = $(this).val();
$.ajax({
type: "POST",
url: "/VM/AddVmDC2?handler=GetTemplates",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: { "host": host },
success: function (response) {
$("#templatebody").html(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
Backend
public async Task<IActionResult> OnPostGetTemplates(int clusterid)
{
_apilocation = _config["apiurl"];
var templates = await helper.QueryApi(_apilocation, "/api/inventory/template?clusterid=" + clusterid);
NewVM.Templates = JsonConvert.DeserializeObject<List<Templates>>(templates);
return Partial("_Templates", Tenant);
}
Partial View
#model NewVM
#Html.DropDownListFor(x => x.SelectedTemplateId , new SelectList(Model.Templates, "Id", "Name"), "Please select", htmlAttributes: new { #class = "form-control form-control-sm", id = "templates" })
#Html.ValidationMessageFor(x => x.SelectedTemplateId , "", new { #class = "text-danger" })
Partial view is called in Form
<div class="form-group row">
<label class="col-sm-4 col-form-label col-form-label-sm">Templates</label>
<div class="col-sm-8" id="templatebody">
#{
<partial name="_Templates" for="NewVM"/>
}
</div>
</div>
The problem is that when I post the form SelectedTemplateId is always null. What am I doing wrong here. Can someone help me explain why SelectedTemplateId is always null.
Thanks !

Answer 1

You ajax data is
data: { "host": host },
and your handler is
public async Task<IActionResult> OnPostGetTemplates(int clusterid)
you need to change int clusterid to int host,so that you can get the data in ajax.
And if your SelectedTemplateId is still null,can you share your Tenant structure,and check the SelectedTemplateId in it.