CODEWITHSUNDEEP
c#.net-corerazor-pages
gmmo
gmmo

Reputation: 2801

Razor pages not binding property on POST even with [BindProperty(SupportsGet = true)]

I am a beginner on Razor pages and I am trying to do some very basic data binding. Yet, I don't get it why .netcore does not bind my property.

I was looking at this thread, but did not help:

ASP.NET Core Razor pages - not binding on POST Request

here are my properties:

    [BindProperty(SupportsGet = true)]
    public int width { get; set; }

    [BindProperty(SupportsGet = true)]
    public int height { get; set; }

my onPost and onGet

    public IActionResult OnGet(string type)
    {
        minLength = BarcodeConstants.BarCodeMinLength;
        width = 256;
        height = 256;
        other stuff...


    public IActionResult OnPost(string type)
    {
        minLength = BarcodeConstants.BarCodeMinLength;

        Debug.WriteLine("Image width = " + width);
        Debug.WriteLine("Image height = " + width);
        other stuff...

here is my cshtml. Not sure if these two are messing it up.

    <form method="post" asp-page="QRBarCode">
        <input type="text" placeholder="Input value" name="inputVal" value="@Model.inputVal" />
        <input type="submit" value="Generate QR Barcode" />
    </form>

    <qrcode content="@Model.inputVal"
            type="@Model.titleType"
            alt="QR Code"
            width="@Model.width"
            height="@Model.height" />

    <form method="post" class="mt-3" enctype="multipart/form-data" asp-page-handler="OnPost">
        <div class="form-group row">
            <div class="col-sm-10" style="max-width: 12rem;">
                <input asp-for="@Model.width" class="form-control" placeholder="Image @Model.width" />
            </div>
        </div>

        <div class="form-group row">
            <div class="col-sm-10" style="max-width: 12rem;">
                <input asp-for="@Model.height" class="form-control" placeholder="Image @Model.height" />
            </div>
        </div>
    </form>

but when I input a value in the width/height field different than 0, it always comes out onPost as zero, see the logs

'iisexpress.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\3.1.5\System.Security.Principal.Windows.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
Image width = 0
Image height = 0

What am I doing wrong? Seems so basic. I appreciate any help.

thank you.

Upvotes: 2

Views: 3170

Answers (1)

Mike Brind
Mike Brind

Reputation: 30065

You have two forms. Your second form is never submitted, so the values in it are never posted. If you want the width and height to be posted along with the inputVal, you should include the width and height inputs in the first form.

<form method="post" asp-page="QRBarCode">
    <input type="text" placeholder="Input value" name="inputVal" value="@Model.inputVal" />
    <qrcode content="@Model.inputVal"
        type="@Model.titleType"
        alt="QR Code"
        width="@Model.width"
        height="@Model.height" />
    <div class="form-group row">
        <div class="col-sm-10" style="max-width: 12rem;">
            <input asp-for="@Model.width" class="form-control" placeholder="Image @Model.width" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10" style="max-width: 12rem;">
            <input asp-for="@Model.height" class="form-control" placeholder="Image @Model.height" />
        </div>
    </div>
<input type="submit" value="Generate QR Barcode" />
</form>

Other issues:

  • You don't need to specify a value for asp-page unless you are posting the form to a different page to the one that it is in.

  • You don't need to specify a value for asp-page-handler unless you are using a named handler method

  • The enctype value of "multipart/form-data" is only necessary if you are uploading a form

  • You shouldn't set SupportsGet to true unless you intend to accept values being passed in a GET request.

Upvotes: 3

Related Questions