c#asp.netasp.net-corerazor-pages
Model Binding RazorPage Form
So I am still relatively new to Asp.Net framework experimenting with Razor Pages. I am facing the issue with model binding. It seems to be not working as expected.
This is my razor page. On the "OnGet" action, I am dynamically building a form. Just for some context, the form will have about three kind of inputs, text input, date input, select and multi-select input. The QueryField class basically represents each input type. The Name attribute represents the name of the parameter, Required represents whether the field is required and etc...
namespace ReportViewer.Pages
{
public class QueryField
{
public string Name { get; set; }
public string Label { get; set; }
public string Type { get; set; }
public bool Required { get; set; }
public List<string> Values { get; set; }
}
public class ReportModel : PageModel
{
private readonly AlertService _alertService;
private readonly ApplicationDbContext _dbContext;
public Report Report {get; set;}
[BindProperty]
public List<QueryField> Fields { get; set; }
public ReportModel(AlertService alertService, ApplicationDbContext dbContext){
_alertService = alertService;
_dbContext = dbContext;
Fields = new List<QueryField>();
}
public void OnGet(string reportName)
{
var report = _dbContext.Report.FirstOrDefault(r=> r.Name == reportName);
if (report == null){
_alertService.AddAlert($"{reportName} is not a valid report. Please check your report name and try again", AlertType.Danger);
} else {
Report = report!;
var parameters = _dbContext.Parameter.Where( p=> p.ReportId == report.Id).ToList();
foreach (var parameter in parameters){
string FieldType;
if (parameter.ValidValues.Count() == 0){
if (parameter.ParameterType == "Integer"){
FieldType = "NumberInput";
} else if (parameter.ParameterType == "DateTime"){
FieldType = "DateInput";
} else {
FieldType = "TextInput";
}
} else {
if (parameter.MultiValue){
FieldType = "MultiSelectInput";
} else {
FieldType = "SelectInput";
}
}
QueryField field = new QueryField(){
Name = parameter.Name,
Label = parameter.Name,
Type = FieldType,
Required = parameter.Nullable,
Values = parameter.ValidValues,
};
Fields.Add(field);
}
}
}
public IActionResult OnPost(List<QueryField> formData)
{
if (!ModelState.IsValid){
return Page();
}
Console.WriteLine($"Fields: {formData.Count}");
return RedirectToPage("Report");
}
}
}
On the html template..
@page "/Reports/{reportName}"
@model ReportViewer.Pages.ReportModel
@{
ViewData["Title"] = "ReportQuery";
}
@if (Model.Report != null){
<form data-parsley-validate role="form" id="DUBulkStatementReportForm" method="post">
<p>
Please enter/select required detail(s)<br>
<em><small>Fields marked<span style="color: red">*</span> are required</small></em>
</p>
<div class="row">
<div class="col-md-12">
<h3>@Model.Report.Name Parameters</h3>
<hr class="inner-separator" />
</div>
<div class="col-md-6">
<div class="col-md-12">
@if (Model.Fields != null)
{
// --- render form fields here..
@foreach (var field in Model.Fields)
{
<div class="form-group">
@if (field.Type == "NumberInput")
{
<input class="form-control" type="number" name="@field.Name" />
}
else if (field.Type == "DateInput")
{
@if (field.Required)
{
<p class="required">@field.Label</p>
}
else
{
<p>@field.Label</p>
}
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" class="form-control dateP" name="@field.Name">
</div>
}
else if (field.Type == "TextInput")
{
@if (field.Required)
{
<label for="@field.Name" class="form-control required">@field.Label</label>
<input type="text" class="form-control" id="@field.Name" required name="@field.Name" />
}
else
{
<label for="@field.Name" class="form-control">@field.Label</label>
<input type="text" class="form-control" id="@field.Name" name="@field.Name" />
}
}
else if (field.Type == "MultiSelectInput")
{
@if (field.Required)
{
<p class="required">@field.Label</p>
<select class="select2" multiple="multiple" multiple name="@field.Name" required>
@foreach (var value in field.Values)
{
<option value="@value">@value</option>
}
</select>
}
else
{
<p>@field.Label</p>
<select class="select2" multiple="multiple" multiple name="@field.Name">
@foreach (var value in field.Values)
{
<option value="@value">@value</option>
}
</select>
}
}
else if (field.Type == "SelectInput")
{
@if (field.Required)
{
<p class="required">@field.Label</p>
<select name="@field.Name" class="select2" required>
@foreach (var value in field.Values)
{
<option value="@value">@value</option>
}
</select>
}
else
{
<p>@field.Label</p>
<select name="@field.Name" class="select2">
@foreach (var value in field.Values)
{
<option value="@value">@value</option>
}
</select>
}
}
</div>
}
}
</div>
<div class="col-md-12">
<div class="form-group">
<button id="PrintPDF" type="button" class="btn btn-info" style="display:inline">
<i class="fa fa-file-pdf-o"></i><b>Download PDF</b>
</button>
<button type="button" id="PrintEXCEL" class="btn btn-success" style="display:inline">
<i class="fa fa-file-excel-o"></i><b>Download EXCEL</b>
</button>
</div>
<!--Download PDF Confirmation Modal-->
<div class="modal fade" id="DownloadPDFReportModal" data-backdrop="static" data-keyboard="false"
tabindex="-1" role="dialog" style="margin: 0 auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-check-square-o success"></i> Download
{{report.name}} Confirmation</h4>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to continue downloading report?</strong></p>
<p>Click No if you would like to cancel. Click Yes to continue.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-success" data-dismiss="modal"
id="ConfirmDownloadPdf">Yes</button>
</div>
</div>
</div>
</div>
<!--End of PDF Confirmation Modal-->
<!--Download EXCEL Confirmation Modal-->
<div class="modal fade" id="DownloadEXCELReportModal" data-backdrop="static" data-keyboard="false"
tabindex="-1" role="dialog" style="margin: 0 auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-check-square-o success"></i> Download
{{report.name}} Confirmation</h4>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to continue downloading report?</strong></p>
<p>Click No if you would like to cancel. Click Yes to continue.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-success" data-dismiss="modal"
id="ConfirmDownloadExcel">Yes</button>
</div>
</div>
</div>
</div>
<!--End of EXCEL Confirmation Modal-->
<!--Download Wait Modal-->
<div class="modal fade" id="ReportDownloadWaitModal" data-backdrop="static" data-keyboard="false"
tabindex="-1" role="dialog" style="margin: 0 auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title text-success"><i class="fa fa-check-square-o success"></i>
Downloading File...</h4>
</div>
<div class="modal-body text-success" id="successMessage">
<p>Please wait while the file is being downloaded...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<!--End of Download Wait Modal-->
</div>
</div>
</div>
</form>
}
The form renders fine. The issue I am having is on the OnPost action handler. I would expect that if the binding works as expected, the Fields would be populated but that does not seem to be the case. In this case printing formData.Count gives me 0 indicating that
the perhaps the binding did not work. However, I can see the form data in the Request if I call Request.Form["field_name"]. I would prefer to go with the binding approach instead of parsing the data from the Request object.
I am not sure what I am missing or whether I am doing things the right way. Any help is appreciated.
Solution
You need to bind the name attribute like :name="formData[@i].Name" to bind the name value to OnPost(List formData) (QueryField Name).
You can try to remove @foreach (var field in Model.Fields) and add @for (var i = 0; i< Model.Fields.Count; i++ ) like:
@if (Model.Fields != null)
{
@for (var i = 0; i< Model.Fields.Count; i++ )
{
// --- render form fields here..
<div class="form-group">
@if (Model.Fields[@i].Type == "NumberInput")
{
<input class="form-control" type="text" name="formData[@i].Name" />
}
else if (Model.Fields[@i].Type == "DateInput")
{
@if (Model.Fields[@i].Required)
{
<p class="required">@Model.Fields[@i].Label</p>
}
else
{
<p>@Model.Fields[@i].Label</p>
}
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" class="form-control dateP" name="formData[@i].Name">
</div>
}
...
Remember change the field into Model.Fields[@i]. Then we can get the List<QueryField> formData like:
Note We will meet the ModelState.IsValid is false, because the other properties in QueryField is not pass to the Post method.