Adaptive Cards日期选择器Update按钮按需禁用的实现可行性问询

Absolutely! You can absolutely implement this logic to disable the Update button until the user modifies the default birth date value. Here's a step-by-step solution tailored to your existing C# Adaptive Cards code:

We'll use Adaptive Cards' built-in OnChange event and SetPropertyAction to toggle the Update button's enabled state based on whether the date picker's value differs from the default. This requires no extra client-side code and works directly with your current setup.

Step 1: Disable the Update Button by Default #

First, set the Update button to be disabled initially, and add an ID so we can reference it later:

var action = new AdaptiveSubmitAction() {
    Id = "updateButton", // Add an ID to target the button in later actions
    Title = "Update",
    Data = dataObj,
    IsEnabled = false // Disable the button on card load
};

Step 2: Add OnChange Logic to the Date Picker #

Modify your AdaptiveDateInput to include an OnChange action that checks if the selected date differs from the default givenDob. If it does, the action will enable the Update button:

var inputDate = new AdaptiveDateInput() {
    Id = "date",
    Placeholder = "Please enter the date",
    Value = $"{givenDob}",
    Max = $"{maxDate}",
    Min = $"{minDate}",
    OnChange = new AdaptiveActionSet()
    {
        Actions = new List<AdaptiveAction>()
        {
            new AdaptiveSetPropertyAction()
            {
                TargetElement = "updateButton",
                Property = "isEnabled",
                // Adaptive Cards expression: Enable button only if date != default value
                Value = $"= ${inputDate.Id} != '{givenDob}'"
            }
        }
    }
};

Step 3: Full Modified Code #

Here's your complete updated method with the logic fully implemented:

public static Attachment DatePickerAttachment(string givenDob, string maxDate, string minDate) { 
    var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 2)); 
    card.Body.Add(new AdaptiveTextBlock() { 
        Text = $"Please enter the date", 
        Wrap = true, 
        Size = AdaptiveTextSize.Default, 
        Spacing = AdaptiveSpacing.Medium 
    }); 
    var inputDate = new AdaptiveDateInput() { 
        Id = "date", 
        Placeholder = "Please enter the date", 
        Value = $"{givenDob}", 
        Max = $"{maxDate}", 
        Min = $"{minDate}",
        OnChange = new AdaptiveActionSet()
        {
            Actions = new List<AdaptiveAction>()
            {
                new AdaptiveSetPropertyAction()
                {
                    TargetElement = "updateButton",
                    Property = "isEnabled",
                    Value = $"= ${inputDate.Id} != '{givenDob}'"
                }
            }
        }
    }; 
    card.Body.Add(inputDate); 
    var dataObj = new SimpleObjClass() { value = "go on with the process" }; 
    var action = new AdaptiveSubmitAction() { 
        Id = "updateButton",
        Title = "Update", 
        Data = dataObj, 
        IsEnabled = false
    }; 
    card.Actions.Add(action); 
    var dataObj2 = new SimpleObjClass() { value = "kill the process" }; 
    var action1 = new AdaptiveSubmitAction() { 
        Title = "Cancel", 
        Data = dataObj2, 
    }; 
    card.Actions.Add(action1); 
    var attachment = new Attachment { 
        ContentType = AdaptiveCard.ContentType, 
        Content = JsonConvert.DeserializeObject(JsonConvert.SerializeObject(card)), 
    }; 
    return attachment; 
}

How This Works #

• When the card loads, the Update button stays disabled because the date picker's value matches the default givenDob.
• As soon as the user selects a date different from givenDob, the OnChange event triggers the SetPropertyAction, which sets the button's isEnabled property to true.
• If the user reverts back to the original givenDob date, the button will automatically disable again.

Key Notes #

• Ensure your givenDob uses the ISO 8601 date format (YYYY-MM-DD) — this is the standard format AdaptiveDateInput uses for its Value property.
• This solution leverages Adaptive Cards 1.2 features (OnChange and SetPropertyAction), which you're already targeting with your AdaptiveSchemaVersion(1, 2), so no version upgrades are needed.

内容的提问来源于stack exchange，提问作者Lalithaditya Kota