DEV Community

Sardar Mudassar Ali Khan
Sardar Mudassar Ali Khan

Posted on

2

ListBox in asp net mvc

In ASP.NET MVC, there is no specific "ListBox" control like in traditional ASP.NET Web Forms. However, you can achieve similar functionality using HTML and Razor syntax within your views.

To create a ListBox-like control in ASP.NET MVC, you can use the <select> HTML element with the multiple attribute set to allow multiple selections. Here's an example of how you can create a ListBox in an ASP.NET MVC view:

@{
    // Define a list of items
    var items = new List<SelectListItem>
    {
        new SelectListItem { Value = "1", Text = "Item 1" },
        new SelectListItem { Value = "2", Text = "Item 2" },
        new SelectListItem { Value = "3", Text = "Item 3" }
    };

    // Retrieve selected values
    var selectedValues = new[] { "2", "3" }; // Example selected values
}

@Html.ListBox("selectedItems", items, new { @multiple = "multiple", @class = "form-control" })
Enter fullscreen mode Exit fullscreen mode

In this example, we define a list of SelectListItem objects representing the items in the ListBox. We also define an array of selected values for pre-selecting some items.

The Html.ListBox helper method is used to render the <select> element. The first parameter is the name of the ListBox control (selectedItems in this case). The second parameter is the list of SelectListItem objects, and the third parameter is an anonymous object used to specify additional attributes for the <select> element.

The @multiple = "multiple" attribute allows multiple selections in the ListBox. The @class = "form-control" attribute is optional and can be used to apply CSS classes for styling purposes.

When the form is submitted, the selected values from the ListBox will be bound to a corresponding property in your model or controller action method. For example, you can have a property named SelectedItems in your model or method parameter to capture the selected values.

Note: This is just a basic example, and you can customize it further based on your specific requirements.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
jimerman profile image
jimerman • Edited

While I do really love Razor, I have totally fallen in love with SyncFusion, and I highly recommend it. SyncFusion makes a ton of controls that you can integrate into your website - pretty much any web development technology, including Blazor, ASP.NET, ASP.NET MVC, and more - and they are highly configurable and customizable. We have done some pretty advanced things with them on our website, codaea.io. For example, here's a simple code snippet where we use an SfListbox control in a razor component page:

                <SfListBox CssClass="e-template-listbox" TValue="string[]" @bind-Value="@SelectedNetworks" DataSource="@AllNetworks" TItem="NetworkModel">
                    <ListBoxFieldSettings Text="Network"></ListBoxFieldSettings>
                    <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true"></ListBoxSelectionSettings>
                    <ListBoxTemplates TItem="NetworkModel">
                        <ItemTemplate>
                            <div class="list-wrapper">
                                <span class="e-avatar e-avatar-xlarge e-avatar-circle"><img src="/images/@((context as NetworkModel).IconFile)" /></span>
                                <span class="text">@((context as NetworkModel).DisplayName)</span>
                            </div>
                        </ItemTemplate>
                    </ListBoxTemplates>
                </SfListBox>
Enter fullscreen mode Exit fullscreen mode

In this example, we give it a custom CSS class for styling/appearance, the page code generates the list using a custom class NetworkModel into a page variable AllNetworks - and voila. The rest is styling and appearance.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more