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

[Ben Köster]

Hello!

I have got the exact same problem but coudn't get it to work even your tip (Model.Fruits.Items). My code looks like this:

<ejs-multiselect id="MitgliedFunktionen" name="MitgliedFunktionen" value="@selectListSelected.Items"
dataSource="@selectList.Items" mode="Box" allowFiltering="true" allowObjectBinding="true"  showClearButton="true" showSelectAll="true">
<e-multiselect-fields value="Value" text="Text"></e-multiselect-fields>
</ejs-multiselect>

The data is coming from here:

SelectList selectList = new(Model.element2.mitgliedFunktionen.Select(mf => new SelectListItem { Text = mf.Name, Value = mf.Id.ToString() }));
SelectList selectListPerson = new(Model.element1.MitgliedFunktionen.Select(mf => new SelectListItem { Text = mf.Name, Value = mf.Id.ToString() }));

The dropdown list is getting filled correctly and the selected values are correct as well. Only I can't remove them (once saved to database). Any idea?

Greetings

Ben

[UdhayaKumar Duraisamy]

When using a MultiSelect component within a form, you can use the ejs-for attribute instead of the value property to ensure proper value binding. Please refer to the code snippet below, along with the documentation link for additional guidance:

<ejs-multiselect id="MitgliedFunktionen" ejs-for="@selectListSelected.Items"

                 dataSource="@selectList.Items" mode="Box" allowFiltering="true" allowObjectBinding="true" showClearButton="true" showSelectAll="true">

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

</ejs-multiselect>

Documentation: Ejfor in ASP.NET CORE Multi Select Component

If you continue to experience issues or if there’s any misunderstanding about your requirements, please share additional details to help us assist you more effectively:

• A brief description of the problem
• A full-page code snippet that reproduces the issue. This will help us better understand how you’re integrating and handling the component in your project.
• Steps to replicate the issue
• A video or screen recording illustrating the issue

This information will help us identify the problem and provide a prompt solution.