Posting form with page handler partial pages .net core

Question

I have a requirement like call the partial page(_DataDiffs.cshtml) which is having asp-page-handler="UpdateData" button. when i call from DataCorrectionpage(@await Html.PartialAsync("_DataDiffs", Model) data rendered fine. when i click on handler="UpdateData button data is not posting to OnPostUpdateData() method.

Please help on this. Thanks in advance Eswar

@model Handlers.DataCorrectionModel

<div>   
        @if (@Model.DataDiffs?.Count > 0)
        {
            foreach (var diff in @Model?.DataDiffs)
            {

                <div>
                    <input name="@diff.Id" type="checkbox" value="12" />12
                </div>

                <div>
                    <input name="@diff.Replace" type="checkbox" value="true" />true
                </div>
                <div>
                    <input name="@diff.Correct" type="checkbox" value="Correct" />Correct
                </div>
                foreach (var item in diff.Updates)
                {
                    <div>
                        <input name="@item.Update" type="checkbox" value="12" />12
                    </div>
                    <div>
                        <input name="@item.Update2" type="checkbox" value="true" />true
                    </div>
                    <div>
                        <input name="@item.Update3" type="checkbox" value="update3" />update3
                    </div>
                }
            }
        }
        <input type="submit" value="Update Order" name="btnRead" asp-page-handler="UpdateData" class="btn btn-primary" />
        <br />  
</div>  


    <div class="row">
        <form method="post">       
            @await Html.PartialAsync("_DataDiffs", Model)
        </form>
    </div>
    <div></div>

public DataCorrectionModel()
    {
        DataDiffs = new List<DataDiffs>()
        {
            new DataDiffs
            {
                Id=12,
                Correct="str",
                Replace = true,
                Updates = new List<Updates>()
                {
                    new Updates
                    {
                        Update=12,
                        Update2 =true,
                        Update3 = "update3"
                    }`enter code here`
                }
            }
        };
    }

    [BindProperty]
    public List<DataDiffs> DataDiffs { get; set; }
    public void OnGet()
    {

    }
    public void OnPost()
    {
    //my other posts
    }
    public void OnPostUpdateData()
    {         
        var diff = DataDiffs;
    }

public class DataDiffs
{
    public int Id { get; set; }
    public bool Replace { get; set; }
    public string Correct { get; set; }
    public List<Updates> Updates { get; set; }
}

public class Updates
{`enter code here`
    public int Update { get; set; }
    public bool Update2 { get; set; }
    public string Update3 { get; set; }
}

when i call partial page from my main page data rendered fine but when click on updateData button (page handler buttton) data not posted to code behind page. Tried both bindpropery and receiving as parameter both didn't work for me. Please help — Eswar reddy

LouraQ LouraQ · Accepted Answer · 2020-03-13T07:20:14

You need to add a DataDiffs type parameter to the OnPostUpdateData method to receive the object data passed by the view.

And if you want to pass DataDiffs to the code behind, you need to add hidden controls on the basis of your code to store the content of each field.

Change your _DataDiffs.cshtml like this：

@{
   var i = 0;
}
<div>
    @if (@Model.DataDiffs?.Count > 0)
    {
        foreach (var diff in @Model?.DataDiffs)
        {

            <div>
                <input name="@diff.Id" type="checkbox" value="12" />12
                <input name="Id" type="hidden" value="@diff.Id" asp-for="@diff.Id" />
            </div>

            <div>
                <input name="@diff.Replace" type="checkbox" value="true" />true
                <input name="Replace" type="hidden" value="@diff.Replace" asp-for="@diff.Replace" />
            </div>
            <div>
                <input name="@diff.Correct" type="checkbox" value="Correct" />Correct
                <input name="Correct" type="hidden" value="@diff.Correct" asp-for="@diff.Correct" />
            </div>
            foreach (var item in diff.Updates)
            {
                <div>
                    <input name="@item.Update" type="checkbox" value="12" />12
                    <input name="Updates[@i].Update" type="hidden" value="@item.Update" asp-for="@item.Update" />
                </div>
                <div>
                    <input name="@item.Update2" type="checkbox" value="true" />true
                    <input name="Updates[@i].Update2" type="hidden" value="@item.Update2" asp-for="@item.Update2" />
                </div>
                <div>
                    <input name="@item.Update3" type="checkbox" value="update3" />update3
                    <input name="Updates[@i].Update3" type="hidden" value="@item.Update3" asp-for="@item.Update3" />
                </div>
                i++;
            }
        }
    }
    <input type="submit" value="Update Order" name="btnRead" asp-page-handler="UpdateData" class="btn btn-primary" />
    <br />
</div>

OnPostUpdateData method:

  public void OnPostUpdateData(DataDiffs dataDiffs)
    {
         var diff = dataDiffs;
    }

Here is the result of my code debug:

Posting form with page handler partial pages .net core

1 Answers