C# Razor pages Partial View Model is null on submit

Question

I am new to Razor pages and trying to create a page with a partial view. The partial view has a dropdownlist and a text input for Quantity field and a submit button. The Partial View renders correctly but when I click on the Submit button the Model passed to the Code behind has no value.

Here is the code I have

_PartialAddons.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
@model Public.Areas.Register.AddonListDto
<form method="post">
    @Html.HiddenFor(Model => Model.Quantity)
    <div style="padding:5px;">
        <b>NZD $45</b>
    </div>
    <div>
        <div style="padding:5px;">
            <select id="skuSelect" asp-for="SelectedSkus" asp-items="@(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
                <option>Please select one</option>
            </select>
        </div>

        <div style="padding:5px;">
            <input type="hidden" name="handler" value="Quantity" />
            <input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="@Model.Id">
        </div>
    </div>
    <div style="padding:5px;">
        <a class="btn green" asp-page-handler="AddToCart">Add to Cart</a>
    </div>
</form>

This is the Main Page

@foreach (var addons in Model.StoreAddonList)
                {
                    <div class="panel card panel-default" style="margin-top:10px;">
                        <div class="panel-heading card-header" role="tab">
                            <div class="panel-title">
                                <div class="accordion-toggle" role="button" aria-expanded="true">
                                    <div accordion-heading="" style="width:100%;">
                                        @addons.Title
                                        <i class="pull-right float-xs-right glyphicon glyphicon-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-collapse collapse in show" role="tabpanel" style="overflow: visible; height: auto; display: block;" aria-expanded="true" aria-hidden="false">
                            <div class="panel-body card-block card-body">
                                <div style="padding-top:10px;background-color:#ffffff;clear:both;">
                                    <div style="width:100%">
                                        <div style="float:left;width:20%;text-align:left;">
                                            Name
                                        </div>
                                        <div style="float:left;width:30%;padding-left:10px;">
                                            @addons.Description
                                        </div>
                                    </div>
                                    <div style="float:left;width:40%;padding-left:10px;">
                                        <div>
                                            @{
                                                await Html.RenderPartialAsync("_PartialAddons.cshtml", addons);
                                            }
                                        </div>
                                    </div>
                                    <div style="clear:both;">
                                        &nbsp;
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }

This is the Index.cshtml.cs to handle the submit

public ActionResult OnGetAddToCart(AddonListDto addOnList)
{
    var sass = Quantity;
    var tass = SelectedSkus;

    return null;
}

The AddonListDto is null on the OnGetAddToCart Method. Have been trying to get this working for the past two days. Any help would be greatly appriciated

Ryan Ryan · Accepted Answer · 2019-07-05T02:06:35

If you want to submit your data, you need to use OnPost instead of OnGet in razor pages and set the handler name in the <form> tag. For example:

handler:

public ActionResult OnPostAddToCart(AddonListDto addOnList)

partial view:

@model Public.Areas.Register.AddonListDto
<form method="post" asp-page-handler="AddToCart">
@Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
    <b>NZD $45</b>
</div>
<div>
    <div style="padding:5px;">
        <select id="skuSelect" asp-for="SelectedSkus" asp-items="@(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
            <option>Please select one</option>
        </select>
    </div>

    <div style="padding:5px;">
        <input type="hidden" name="handler" value="Quantity" />
        <input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="@Model.Id">
    </div>
</div>
<div style="padding:5px;">
   <input type="submit" value="Add To Cart" class="btn btn-primary" />
</div>
</form>

C# Razor pages Partial View Model is null on submit

1 Answers