ASP.NET MVC ListBox - Client-Side API - Client-Side Events

Event logger:


  • Alfreds FutterkisteALFKI
  • Antonio Moreno TaqueríaANATR
  • Around the HornAROUT
  • Berglunds snabbköpANTON
  • Berglunds snabbköpBERGS
  • Blauer See DelikatessenBLAUS
  • Blondesddsl père et filsBLONP
  • Bólido Comidas preparadasBOLID
  • Bon app'BONAP
  • Bottom-Dollar MarketsBOTTM
The ListBox control provides client-side events that allow you to detect when the end user performs a specific action with the control. The following client-side events are raised by the control:

  • SelectedIndexChanged - is raised when the selection is changed;
  • OnItemClick - is raised when an item is clicked (selection doesn't need to change);
  • OnFocus - is raised when the control receives the focus;
  • OnBlur - is raised when the control loses the focus;

To set up event handlers for these events you need to use the ClientSideEvents property of the ListBox.
View - Aspx

    <% Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
         TextMode = TextBoxMode.MultiLine
    }); %>
    
    <% Html.Obout(new ListBox("ListBox1")
    {
        ClientSideEvents = new ListBoxClientSideEvents() 
        {  
            OnSelectedIndexChanged = "ListBox1_SelectedIndexChanged",
            OnItemClick = "ListBox1_ItemClick",
            OnOpen = "ListBox1_Open",
            OnClose = "ListBox1_Close", 
            OnFocus = "ListBox1_Focus",  
            OnBlur = "ListBox1_Blur"
        }
    }); %>	   
    
    
View - Razor

    @Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
         TextMode = TextBoxMode.MultiLine
    })
    
    @Html.Obout(new ListBox("ListBox1")
    {
        ClientSideEvents = new ListBoxClientSideEvents() 
        {  
            OnSelectedIndexChanged = "ListBox1_SelectedIndexChanged",
            OnItemClick = "ListBox1_ItemClick",
            OnOpen = "ListBox1_Open",
            OnClose = "ListBox1_Close", 
            OnFocus = "ListBox1_Focus",  
            OnBlur = "ListBox1_Blur"
        }
    })
    
    
JavaScript

    function ListBox1_SelectedIndexChanged(sender, selectedIndex) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('SelectedIndexChanged was raised - new selected index: ' 
        + selectedIndex + currentLogs);
    }

    function ListBox1_ItemClick(sender, selectedIndex) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('ItemClick was raised - item with index ' + selectedIndex 
        + ' was clicked ' + currentLogs);
    }

    function ListBox1_Open(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Open was raised' + currentLogs);
    }

    function ListBox1_Close(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Close was raised' + currentLogs);
    }
    function ListBox1_Focus(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Focus was raised' + currentLogs);
    }
    function ListBox1_Blur(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Blur was raised' + currentLogs);
    }