Selected Items cannot be removed after postback

[Avinash]

Hi,

I have a Asp.NET 7 razor page with a multiselect control.

When I select 2 items from the dropdown, it shows as expected and I can click on the (x) to remove it from the selection.

Now when I click on the submit button, and the page refreshes, I can still see the 2 selected items but I can no longer click on the (x) to remove them from the selection.

When I select additional items from the drop down, I can remove those. 

I have attached a sample asp.net 7 project here.  

Please help.  Thanks, Avinash Tauro

Attachment: WebApplication1_f8f5c7c5.zip

[Sureshkumar P]

Hi Avinash,

After validating your shared sample code example, we suggest you change the SelectedFruits variable type a string array instead of an integer array because your field values are a string type.

Find the code example here:

[BindProperty]

    public string[] SelectedFruits { get; set; }

Regards,

Sureshkumar P

[Avinash]

Hi SureshKumar,

It works when we change the SelectedFruits as string[]. However this is not our requirement as Key field in our Fruit class is int so we need an int[].

With int[] also everything works except I cannot remove the selected  items by clicking on the x symbol after submitting the page.

Is there a way we can use int[] for selected fruits.

Thanks

Avinash Tauro

[Sureshkumar P]

Avinash, in your attached sample the multiselect component value field is string type which is the reason the component works as expected when setting the string array value.

Find the code example here:

[index.cshtml]

 

 <ejs-multiselect id="ScientistsInCharge"

                             dataSource="@Model.Fruits"

                             ejs-for="SelectedFruits"

                             placeholder="Select Fruits"

                             popupHeight="220px" allowFiltering="true">

                <e-multiselect-fields text="Text" value="Value"></e-multiselect-fields>

            </ejs-multiselect>

 

[index.cshtml.cs]

 

public class Item

{

    public int Key { get; set; }

    public string Value { get; set; }

}

 

 

 

[Avinash]

Hi,

Thanks for your reply. I changed this by using Text and Value fields everywhere correctly, where Value is int and Text is string.

However it still does not allow me to remove previously selected items after submitting the form and page refreshes.

Thanks

Avinash Tauro

Attachment: WebApplication1_7ed643e7.zip

[Sureshkumar P]

Avinash, based on your shared information with the sample, we suggest you assign the data source value as a list of Item instead of class type to resolve the issue.

Find the code changes here:

private readonly Item[] _items =

   {

        new() { Value = 1, Text = "Mango" },

        new() { Value = 2, Text = "Grapes" },

        new() { Value = 3, Text = "Papaya" },

        new() { Value = 4, Text = "Coconut" },

        new() { Value = 5, Text = "Avocado" },

        new() { Value = 6, Text = "Watermelon" }

    };

        [BindProperty]

        [Required(ErrorMessage = "Please enter the value")]

        public int[] SelectedFruits { get; set; }

 

        public Item[] Fruits { get; set; } = null!;

 

        public SelectList data { get; set; } = null;

 

        private readonly ILogger<IndexModel> _logger;

        [BindProperty]

        [Required(ErrorMessage = "Please enter the value")]

        public DateTime[] value { get; set; }

        public IndexModel(ILogger<IndexModel> logger)

        {

            _logger = logger;

        }

 

        public void OnGet()

        {

            LoadFruitsList();

        }

        private void LoadFruitsList()

        {

            data = new SelectList(_items, nameof(Item.Value), nameof(Item.Text));

            Fruits = (Item[])data.Items;

        }

        public async Task<IActionResult> OnPostAsync()

        {

            if (!ModelState.IsValid)

            {

                return Page();

            }

            LoadFruitsList();

            if (SelectedFruits != null) SelectedFruits = SelectedFruits;

            return Page();

 

        }

Find the modified sample in the attachment:

If you are still facing the issue, we would appreciate it if you could replicate the problem on the attached sample and provide us with detailed steps on how to do so. This will allow us to better understand the issue and provide a more accurate solution.

Attachment: RazorPageCoreApp_e5b18de5.zip

[Avinash]

Thanks, its working now.

I just needed to change dataSource="@Model.Fruits"  to dataSource="@Model.Fruits.Items"  in my original code.

[Shereen Shajahan]

Hi Avinash,

Thanks for the update. Please get back to us in future.

Regards,

Shereen