OBOUT - ASP.NET MVC ComboBox - Initial Text on Client-Side

ASP.NET MVC ComboBox - Initial Text on Client-Side

Set Initial Text

The items of the ComboBox can be loaded on-demand (via AJAX requests). The advantage of using this approach is that the items are loaded only when the end user types something into the input field. Thus, the page will load very fast because no item is loaded on page load.

In order to enable the on demand loading feature, set the EnableLoadOnDemand property to true. You also need to specify an action method that will be used to load the items on demand, using the OnLoadingItems property. This action method will load all the items that match the text typed in the input field.

If you need to initially load the items that match a specific text, you need to use a ComboBoxItem that has its Text and Value properties set to the initial text that you want to search for. Also, the elected property of this ComboBoxItem needs to be set to true.

For this sample we used a JavaScript function to add a new item to the list and select it.
Then, when the user will focus the ComboBox, the items starting with "E" will be loaded.

View - Aspx

 
    <% Html.Obout(new ComboBox("ComboBox1") 
    {                
        EnableLoadOnDemand = true,
        OnLoadingItems = "ComboBox/LoadingItems"
    }); %>
    
    <% Html.Obout(new OboutButton("OboutButton1")
    {
        OnClientClick = "setInitialText(); return false;"
    }); %>

View - Razor

 
    @Html.Obout(new ComboBox("ComboBox1") 
    {                
        EnableLoadOnDemand = true,
        OnLoadingItems = "ComboBox/LoadingItems"
    })
    
    @Html.Obout(new OboutButton("OboutButton1")
    {
        OnClientClick = "setInitialText(); return false;"
    })

JavaScript

 
    function setInitialText() {
        ComboBox1.options.clear();
        ComboBox1.options.add("E");
        ComboBox1._tryHidingEmptyText();
        ComboBox1.selectedIndex(0);
        ComboBox1._itemsLoadedOnOpen = false;
    }

Controller

 
    public JsonResult LoadingItems(ComboBoxLoadingItemsEventArgs args)
    {
        ComboBoxItemList items = GetFilteredCustomers(args.Text, 0);
            
        JsonResult result = new JsonResult
        {
            Data = new {
                Items = items
            },
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };

        return result;
    }

"Obout Team, I am the Development Manager for the inkubook tem at Author Solutions. I wanted to personally take the time to thank the Obout team for the absolute top notch support we have been provided. Your support has exceeded anything we have received from your competitors. When given a choice of tools, I will have no hesitation in selecting the Obout tool over any tool provided by a competitor. "

Jim Daugherty

Development Manager, inkubook

Random testimonial All testimonials