为什么无法使用 razor 页面和 dotnet 6 更新局部视图的属性答案

【问题标题】：Why is not possible to update property on partial view using razor pages and dotnet 6为什么无法使用 razor 页面和 dotnet 6 更新局部视图的属性
【发布时间】：2023-01-25 03:04:04
【问题描述】：

为什么当OnGetAsync方法返回数据时我不能更新public List<string> Images属性？

我正在尝试在我的 _Carousel 部分渲染图像，但 public List<string> Images 属性仍然是一个空列表。我来自ReactJs，我仍在研究 dotNet razor 页面的工作原理。

razor 页面中是否有与 Reactjs 中的 useEffect 类似的功能？

namespace WebUI.Pages.Home.Item
{
    public class ItemModel : PageModel
    {
        [BindProperty]
        public List<string> Images { get; set; } = new();
        private readonly ILogger<ItemModel> _logger;
        // private item service ...
        public ItemModel(Logger<ItemModel> logger)
    {
      // Item service
      _logger = logger
    }

        public async Task<IActionResult> OnGetAsync([FromQuery] int id)
        {
            var result = await _itemService.getItemById(id);
            foreach (var item in result.ItemImages)
            {
                Images.Add(item.Url);
                // **Note that I can log item.Url here and it arrives correctly**
            }
            return new JsonResult(result);
        }
    }
}

partial _Carousel.cshtml, @Model.Images.Count() 仍然是 0，即使项目已经被获取，我可以看到它有 3 个图像的日志。

@model WebUI.Pages.Home.Item.ItemModel
@if (@Model.Images.Count() > 0)
{
  <div>URLs: @Model.Images.Count()</div>
}

<div class="col-xl-6">
  <div id="panel-1" class="panel">
    <div class="panel-container show">
      <div class="panel-content">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
          // render images from @Model.Images
          <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
@section Scripts { }

我还添加了 Item.cshtml，其中部分 _Carousel.cshtml 被调用以渲染图像。

@page
@using WebUI.Pages.Home.Item
@model WebUI.Pages.Home.Item.ItemModel

<div class="row">
  @Html.Partial("_Carousel", Model)
  <div class="card-group card-group-scroll"></div>
</div>

@section Scripts {
<script src="~/lib/axios/dist/axios.js"></script>
<script>
  $(document).ready(function () {
    var url = document.URL;
    var id = url.split("?")[1].split("=")[1];
    var data = {};
    axios.get(`@Url.Page("/Home/Item")?Id=${id.toString()}`)
      .then((response) => {
        item = response.data;
        var listItem = `
                        <div class="card" style="width: 18rem;" onClick=navigateToItem(${item.Id})>
                                <div class="card-body">
                                    <h5 class="card-title">${item.Name}</h5>
                                    <p class="card-text">${item.Description}</p>
                                </div>
                        </div>`;
        $('.card-group').append(listItem);
      }).catch(error => {
        console.log(error)
      });
  });
</script>
}

这样做的剃刀方式是什么？我应该指出，我是 razor pages 的新手。欢迎提出任何建议。

【问题讨论】：

标签： c# asp.net-mvc razor .net-6.0 razor-pages

【解决方案1】：

与 reactJs 相比，Razor Pages 的工作方式大不相同。您不需要为此使用 javascript。 OnGetAsync 不应返回 json。它应该返回页面。您的代码可能如下所示：

Item.cshtml.cs:

public class ItemModel : PageModel
{
    private readonly ILogger<ItemModel> _logger;
    // private item service ...

    public ItemModel(Logger<ItemModel> logger)
    {
        // Item service
        _logger = logger
    }

    [BindProperty]
    public Item Item { get; set; }

    public async Task<IActionResult> OnGetAsync(int id)
    {
        Item = await _itemService.getItemById(id);
        
        return Page();
    }
}

Item.cshtml: （使用部分标签助手更好）

@page
@using WebUI.Pages.Home.Item
@model WebUI.Pages.Home.Item.ItemModel

<div class="row">
  <partial name="_Carousel" model="@Model.Item.ItemImages" />
  <div class="card-group card-group-scroll">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">@Model.Item.Name</h5>
        <p class="card-text">@Model.Item.Description</p>
      </div>
    </div>
  </div>
</div>

_Carousel.cshtml:

@model List<string>

@if (Model.Count > 0)
{
  <div>URLs: @Model.Count</div>
}

...

【讨论】：