How to update value at model from select list on partial

Question

IndexModel is my home page and I get some data from _statusService that I render at the partial _MyPartial The problem that I have, is that in that partial I have a select list and I want to get different values based on the item that is selected from form with id sel-options.

I am new to Razor Pages, but here is my code.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home";
}

<section class="hero-style-2">
    <div class="slider">
        ....
    </div>
</section>
<partial name="_MyPartial" model="@Model.StatusReport" />

Partial

@using Models.Entities;
@model StatusReport

@if (Model != null)
{
<div class="row">
  <div class="col-md">
    <label class="label-text" for="sel-options">Status</label>
  </div>
  <div class="col-md-2">
    <select id="sel-options" class="form-control lable-text">
      <option selected value="Do">Done</option>
      <option value="Done">Done</option>
      <option value="Canceled">Canceled</option>
    </select>
  </div>
</div>
<div>
... other things to be done with StatusReport ...
</div>
}

IndexModel.cs

namespace Demo.Pages;

public class IndexModel : PageModel
{
  [BindProperty]
  public StatusReport StatusReport { get; set; } = new();
  [BindProperty]
  public string status { get; set; } = "Do";
  private readonly IStatusService _statusService;
  public IndexModel(IStatusService statusService)
  {
    _statusService = statusService;
  }
  public async Task<IActionResult> OnGet()
  {
    StatusReport = await _statusService.GetItemsWithSatus(status);
    return Page();
  }
}

Answer 1

Here is a simple demo about how to get the different based on the option which you select in your partial view, Hope it can give you some help.

Model

public class StatusReport
    {
        public string Name { get; set; }
        public string PartialName { get; set; }
    }

PageModel

public class PartialIndexModel : PageModel
    {
        [BindProperty]
        public StatusReport StatusReport { get; set; } = new StatusReport()
        {
            Name = "TestAAA",
            PartialName = "PartialAAA"
        };

        [BindProperty]
        public string status { get; set; } = "Do";


        public IActionResult OnGet()
        {
            return Page();
        }

        public IActionResult OnPostAjax(string value)
        {
            switch (value)
            {
                case "Do":
                    status = "Do";
                    break;
                case "Done":
                    status = "Done";
                    break;
                case "Canceled":
                    status = "Canceled";
                    break;
            }
            return new JsonResult(status);
        }
    }

Partial View

@model StatusReport

@if (Model != null)
{
    <div class="row">
        <div class="col-md">
            <label class="label-text" for="sel-options">Status</label>
        </div>
        <div class="col-md-2">
            <select id="sel-options" class="form-control lable-text">
                <option selected value="Do">Done</option>
                <option value="Done">Done</option>
                <option value="Canceled">Canceled</option>
            </select>
        </div>
    </div>
    <div>
        <h2>@Model.PartialName</h2>
    </div>
}

Page

@page
@model Razor.Pages.PartialIndexModel
@Html.AntiForgeryToken()
@{
}

<h1>@Model.StatusReport.Name</h1>

<h1 id="result">@Model.status</h1>

<partial name="_MyPartial" model="@Model.StatusReport" />

@section Scripts{
    <script>
        $("#sel-options").change(function () {
            var value = $("#sel-options option:selected").val();
            var data = {
                "value": value
            };
            $.ajax({
                type: 'Post',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: '@Url.Page("PartialIndex","Ajax")',
                data: data,
                
                success: function (data) {
                    $("#result").html(data)
                }
            })
        })
    </script>
}

Demo

You can see Page get different values based on the item that is selected in Partial View.