AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 77476862
Accepted
David Thielen
David Thielen
Asked: 2023-11-14 05:03:44 +0800 CST2023-11-14 05:03:44 +0800 CST 2023-11-14 05:03:44 +0800 CST

如果值更改,是否需要重新实例化 EditContext?

  • 772

我有一个参数:

[Parameter]
public RateItemModel Value { get; set; } = default!;

我的剃须刀页面有:

<EditForm EditContext="EditContext" OnValidSubmit="HandleValidSubmitAsync" OnInvalidSubmit="HandleInvalidSubmitAsync" Context="editFormContext">

在初始化期间我执行以下操作:

EditContext = new EditContext(Value);

我是否需要重写OnParametersSetAsync()并在Value更改时重新实例化EditContext?

更新:

这是用例。我有一份注册卡清单。每张注册卡都可以让您点击参加或不参加。当用户点击时,卡片保持打开状态,但更改后的承诺必须写入数据库,并且卡片需要显示更改后的承诺值。

简单的解决方案是将新值写入 SignupCard.Commitment,但这是一个禁忌。所以...

  1. 用户的单击会更改 Model.Commitment 值并调用OnClick.
  2. OnClick 创建一个Signup对象,并将Commitment属性设置为新值。
  3. 组件EventCard调用ValueChanged将此Signup对象传递给父列表页面。
  4. 列表页有一个分配给DxListBox 属性的ListPage.Data数组。DxListBox.Values
  5. 它将此列表浅复制到临时列表变量。
  6. 更改后的注册将分配到list[index]该临时列表中,覆盖旧值。
  7. 数据也在数据库中更新。
  8. 该列表被分配给“ListPage.Data”
  9. 财产DxListBox.Values因此而改变。所以它现在更新SignupCard.Value列表中所有卡片的 。
  10. 开始这SignupCard一切的现在有了一个新的Value。
  11. 这现在应用于“ ignupCard.Model(应该不会改变任何内容)。
  12. 我相信我还需要使用EditContext这个新的Value.
blazor
  • 2 2 个回答
  • 28 Views

2 个回答

  • Voted
  1. MrC aka Shaun Curtis
    2023-11-14T05:59:43+08:002023-11-14T05:59:43+08:00

    是的你是。因为你没有重置上下文。如果将上下文设置为新对象,整个EditForm[包括编辑控件]将重建。

    但是,假设RateItemModel是一个类,即引用对象,您的问题会引发几个问题。

    1. 如何检测是否Value发生变化?引用更改是可以的,但是如果您在编辑上下文之外更改对象会怎样。您是否覆盖了数据类的相等比较器,然后检查了相等性OnParametersSet?

    2. 为什么会Value改变,父组件强制渲染级联事件?如果父渲染器那么您的编辑组件将因为Value是一个对象,所以它渲染它,因为它无法检测是否已Value更改。

    假设您可以检测到更改,您需要考虑两种情况:

    1. 当前的表单是干净的,如何告诉用户数据已更改且表单已重新加载?
    2. 当前的表格很脏。你们如何解决分歧?
    • 0
  2. Best Answer
    MrC aka Shaun Curtis
    2023-11-14T19:09:08+08:002023-11-14T19:09:08+08:00

    这是我根据您的描述构建的演示 MRE。我做了一些猜测来填补空白,并使用标准控件而不是昂贵的 DX 东西。

    它使用字典来跟踪数据对象。

    它可能为如何实现您想要做的事情提供了不同的见解。如果您编辑一个值然后转到其他地方,就会出现问题,但在我确定我的 MRE 非常接近您的用例之前,我不会展示如何解决该问题。

    我的数据对象:

    public class Country
    {
        public int Id { get; init; }  //Normally I would use a Guid, but you're probably using an int
        public string? Name { get; set; }
        public int Likes { get; set; }
        public DateTime LastEdit { get; set; } = DateTime.Now;  //dirty but quick way of tracking equality
    }
    
    // Demo Data provider
    public static class CountryProvider
    {
        private static List<Country> _countries = new()
            {
                new() {Id = 1, Name = "France", Likes= 1 },
                new() {Id = 2, Name = "UK", Likes= 0 },
                new() {Id = 3, Name = "Spain", Likes= 4 },
                new() {Id = 4, Name = "Portugal", Likes= 5 },
            };
    
        public static async Task<IEnumerable<Country>> GetCountries()
        {
            await Task.Delay(100);
            return _countries.AsEnumerable();
        }
    
        public static async Task SaveAsync(Country country)
        {
            // Do the save
            await Task.Delay(50);
        }
    }
    
    public record LikesData(int Id);
    

    卡片”

    <div class="card">
        <div class="card-header">@Value.Name</div>
        <div class="card-body">
            <div class="alert alert-primary p-2 m-2"> Likes: @_model.Likes</div>
            <EditForm EditContext="_editContext" OnValidSubmit="Submit">
                <div class="input-group mb-3">
                    <InputText class="form-control" @bind-Value="_model.Name" />
                    <button class="btn btn-success" type="submit">Update</button>
                </div>
            </EditForm>
            <div class="m-2 text-end">
                <button class="btn btn-primary" @onclick="UpdateLikes">Like</button>
            </div>
        </div>
    </div>
    
    @code {
        [Parameter] public Country Value { get; set; } = new();
        [Parameter] public EventCallback<Country> ValueChanged { get; set; }
        [Parameter] public EventCallback<LikesData> LikesChanged { get; set; }
    
        private EditContext? _editContext;
        private Country _model = new();
    
        // This is here so we have all our data sorted before any first render
        public override Task SetParametersAsync(ParameterView parameters)
        {
            parameters.SetParameterProperties(this);
    
            ArgumentNullException.ThrowIfNull(this.Value);
    
            // Timestamp used to track edit state.  You can use what mechanism you like
            // I use value objects for all my data simplifying equality checking
            // Country would be public record Country{};
            // and here i would create a CountryEditContext object for editing
            if (this.Value.LastEdit != _model.LastEdit)
            {
                _model = new()
                    {
                        Id = this.Value.Id,
                        Name = this.Value.Name,
                        Likes = this.Value.Likes,
                        LastEdit = this.Value.LastEdit,
                    };
                _editContext = new(_model);
            }
    
            return base.SetParametersAsync(ParameterView.Empty);
        }
    
        //Your return object may be more complex so I've used a value object rather than just an int
        private async Task UpdateLikes()
        {
            await this.LikesChanged.InvokeAsync(new(this.Value.Id));
        }
    
        // Form submit on validation.
        private async Task Submit()
        {
            _model.LastEdit = DateTime.Now;
            await this.ValueChanged.InvokeAsync(_model);
        }
    }
    

    和页面:

    <div class="row">
        @foreach(var country in _countries )
        {
            <div class="col-12 col-md-6 col-lg-4">
                <CountryCard @key="country.Value.Id"
                Value="country.Value" 
                ValueChanged="this.UpdateCountry" 
                LikesChanged="this.UpdateLikes" />
            </div>
        }
    </div>
    
    @code {
    
        // use a dictionary so we can separate out the index from the object and only replace the object on an update
        private Dictionary<int, Country> _countries = new();
    
        protected override async Task OnInitializedAsync()
        {
            var countries = await CountryProvider.GetCountries();
            // normally need to check here if you have a list here and do something if you don't
            foreach(var country in countries)
                _countries.Add(country.Id, country);
        }
    
        private async  Task UpdateCountry(Country country)
        {
            _countries[country.Id] = country;
            await CountryProvider.SaveAsync(country);
        }
    
        private void UpdateLikes(LikesData value)
        {
            _countries[value.Id].Likes++;
            _countries[value.Id].LastEdit = DateTime.Now;
        }
    }
    
    • 0

相关问题

  • 如何在 EditForm Blazor 组件内获取 SfListView 模板的正确上下文?

  • Blazor - 清除所有选择选项而不重新获取数据

  • 在 Blazor WASM 中操作 index.html

  • 在输入中输入值后,Blazor 与文本输入的绑定不起作用

  • 具有组件到组件数据传递的 Blazor 页面在加载时引发事件错误

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve