मैं ब्लेज़र (सर्वरसाइड) में इनपुट टेक्स्ट के टेक्स्ट परिवर्तनों को कैप्चर करने का प्रयास करता हूं और फिर यह जांचने के लिए एसिंक विधि को कॉल करता हूं कि इनपुट सही कूपन कोड है या नहीं।

एचटीएमएल:

<EditForm Model="@Basket" OnValidSubmit="@CommitBasket">
    Gutscheincode
    <InputText class="coupon-input checkout-control pristine untouched" 
            @bind-Value="CouponCode"
            @onchange="CouponCodeChanged">
    </InputText>
    @CouponText
</EditForm>`

लेकिन कूपन कोड चेंज नहीं किया गया है - ऑनकेअप उपयोगी नहीं है क्योंकि उस स्थिति में टेक्स्ट वैल्यू नहीं बदला गया है ...

यहाँ सी # विधि है:

public async Task CouponCodeChanged(ChangeEventArgs args)
{
    using var client = ClientFactory.CreateClient();
    var result = await ApiCalls.GetCouponCodeData(client, AppState.BaseUrl, 2, CouponCode);
    CouponText = result== null ? "NOT FOUND" : $"exists:{result.Exists} amount:{result.Amount}";
}

क्या किसी के पास कोई संकेत या विचार है कि इसे एक निश्चित तरीके से कैसे हल किया जाए?

धन्यवाद!

4
baer999 28 नवम्बर 2019, 18:41
क्या आपका प्रश्न इससे संबंधित है? stackoverflow.com/questions/59079326/…
 – 
dani herrera
28 नवम्बर 2019, 19:06

4 जवाब

InputText घटक में onchange ईवेंट नहीं बल्कि ValueChanged है।
हालांकि, अगर आप इस इवेंट की सदस्यता लेना चाहते हैं तो आपको एक ValueExpression पास करना होगा और यह आसान नहीं है। इस ईवेंट की सदस्यता लेने के लिए मुझे सबसे आसान लगा InputText घटक को ओवरराइड करना।

CouponComponent.razor

@inherits InputText
<InputText class="coupon-input checkout-control pristine untouched" 
                   ValueExpression="ValueExpression" Value="@Value" ValueChanged="OnValueChanged" />
@code {
  [Parameter]
  public EventCallback<string> CouponValueChanged { get; set; }

  private async Task OnValueChanged(string value)
  {
     await ValueChanged.InvokeAsync(value);
     using var client = ClientFactory.CreateClient();
     var result = await ApiCalls.GetCouponCodeData(client, AppState.BaseUrl, 2, CouponCode);
     var coupon = result == null ? "NOT FOUND" : $"exists:{result.Exists} amount:{result.Amount}"
     await CouponValueChanged.InvokeAsync(coupon);
  }
}

उपयोग

<EditForm Model="@Basket" OnValidSubmit="@CommitBasket">
    Gutscheincode
    <CouponComponent @bind-Value="CouponCode"
        @CouponValueChanged="CouponCodeChanged">
    </InputText>
    @CouponText
</EditForm>

@code {
   private void CouponCodeChanged(string coupon)
   {
      CouponText = coupon;
      StateHasChanged();
   }
}
3
agua from mars 28 नवम्बर 2019, 19:13

यह मेरे लिए काम कर रहा है ...

@using System.Linq.Expressions 

   <p>@Coupon Text: @CouponText</p>



    <EditForm Model="@basket" OnValidSubmit="@CommitBasket">
        Gutscheincode

            <InputText class="coupon-input checkout-control pristine untouched" Value="@basket.CouponCode" ValueChanged="@CouponCodeChanged" ValueExpression="@(() => basket.CouponCode)" />

    </EditForm>

    @code {
        private Basket basket = new Basket();
        private string CouponText;

        private string _value { get; set; }
        [Parameter]
        public string Value
        {
            get { return _value; }
            set
            {
                if (_value != value)
                {
                    _value = value;
                    if (ValueChanged.HasDelegate)
                    {
                        ValueChanged.InvokeAsync(value);
                    }
                }


            }
        }

        [Parameter] public EventCallback<string> ValueChanged { get; set; }
        [Parameter] public Expression<Func<string>> ValueExpression { get; set; }


        private void CouponCodeChanged(string CouponCode)
        {
            basket.CouponCode = CouponCode;
            CouponText =  basket.CouponCode;
        }

        private void CommitBasket()
        { }

        public class Basket
        {
            public Basket() { }
            public string CouponCode { get; set; } = "12345";
            public string CouponName { get; set; } = "Coupon Name";

        }
    }

आप इसे KeyUp ईवेंट के साथ भी कर सकते हैं:

<InputText Id="CouponCode" Class="form-control" @bind-Value="@basket.CouponCode" @onkeyup='@(e => KeyUp(e, "CouponCode"))'></InputText>


@code {
    private EditContext EditContext;
    private Basket basket = new Basket();

     protected override void OnInitialized()
    {
        EditContext = new EditContext(basket);
        base.OnInitialized();
    }

    void KeyUp(KeyboardEventArgs e, string memberName)
    {
        var property = basket.GetType().GetProperty(memberName);
        var value = property.GetValue(basket);

        // Requires some tweaks to prevent unwanted stuff...
        property.SetValue(basket, value + e.Key);

        var id = EditContext.Field(memberName);


        EditContext.NotifyFieldChanged(id);
        property = basket.GetType().GetProperty(memberName);

        CouponText = property.GetValue(basket).ToString();

    }
}
3
enet 28 नवम्बर 2019, 22:34

ये कोशिश करें:

@onchange="(ChangeEventArgs _event) => CouponCodeChanged(_event.Value.ToString())"

अद्यतन विधि:

public async Task CouponCodeChanged(string coupon)
...
..., AppState.BaseUrl, 2, coupon);
...
1
Marius 29 नवम्बर 2019, 13:11

मैंने ब्लेज़र घटकों का एक सेट बनाया है। जिनमें से एक है डिबॉन्स्ड इनपुट्स के साथ कई इनपुट प्रकार और बहुत अधिक सुविधाएँ। Blazor.Components.Debounce.Input NuGet पर उपलब्ध है। .

आप इसे डेमो ऐप के साथ आज़मा सकते हैं।

नोट: वर्तमान में यह पूर्वावलोकन में है। अंतिम संस्करण .NET 5 के साथ आ रहा है। रिलीज

1
Major 24 सितंबर 2020, 11:57