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();
  }
}

What will get different value based on the option you choose? In my opinion, When you select an option in partial view. It will send an ajax to backend with the value of option, Then return the result to the frontend and show the result in page. I'm not sure if it what you want. — Xinran Shen, Mar 24 '23 at 01:30

score 0 · Accepted Answer · answered Mar 24 '23 at 02:31

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.

Hi @Sachihiro, you need to refer to this [link](https://learn.microsoft.com/en-us/answers/questions/701086/ajax-post-request-with-razor-pages-and-full-calend) to solve 400 error. — Xinran Shen, Mar 24 '23 at 14:27
400 error issue is resolved, but I have exactly same code as your, except that I am calling `HomeIndexModel` instead of `PartialIndexModel`, and I have a console writeline in `OnPostAjax` but it looks like it never reaches to that endpoint. The only thing that I can think off is at `app.MapRazorPages()` is there anything that I should add here? — Sachihiro, Mar 24 '23 at 15:09
changed url line like this: `url: '@Url.Page("PartialIndex")?handler=Ajax',` and now it works. Any idea why? — Sachihiro, Mar 24 '23 at 15:14

How to update value at model from select list on partial

1 Answers1

Linked