HTML5 has an eventing mechanism that works for HTML elements. But, it cannot be used to add events to arbitrary objects, such as controls and collections.

To handle this, we defined an Event class. Any class may define events by declaring them as fields, and any class may add or remove event handlers using the event's addHandler and removeHandler methods.

You may also declare event handlers as options in the initialize method of any MVC control.

These event handlers take two parameters: sender and args. Sender is an object that raised the event, and args is an object that contains the event parameters.

Below are some input controls with the event handlers attached to them:

For more details on C1 MVC and HTML events, please refer to our blog on HTML and Wijmo Events.

// This file locates: "Scripts/Lesson/C1Mvc/Events.js".
c1.documentReady(function () {
    theComboBox = wijmo.Control.getControl('#theComboBox');
    theComboBox.selectedIndexChanged.addHandler(function (s, e) {
        alert('You selected a new item: ' + s.selectedValue);
    })
 
    var theDate = wijmo.Control.getControl('#theDate');
    theDate.valueChanged.addHandler(function (s, e) {
        alert('You selected a new date: ' + s.value)
    })
});

using LearnMvcClient.Models;
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: Events
        public ActionResult Events()
        {
            ViewBag.Countries = Countries.GetCountries();
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.Events_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.Events_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Events_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Events_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Events_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Events_Text5)
</p>
<p>
    @(Html.C1().ComboBox()
    .Id("theComboBox")
    .Bind((List<string>)ViewBag.Countries))
 
    @(Html.C1().InputDate().Id("theDate"))
</p>
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1Mvc.Events_Text6)
    </div>
</div>