MVC and HTML Events

C1 MVC events do not replace HTML events. For example, mouse and keyboard events must be detected and handled using regular HTML handlers attached to the control's hostElement.

Control class of MVC makes HTML event easier to use by providing addEventListener and removeEventListener methods that automatically clean up when a control is destroyed, which helps in avoiding memory leaks.

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

Please move the mouse over the controls.

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/HtmlEvents.js".
c1.documentReady(function () {
    theComboBox = wijmo.Control.getControl('#theComboBox');
    theComboBox.addEventListener(theComboBox.hostElement, 'mouseenter', function () {
        log.textContent = 'mouseenter on ComboBox';
    });
    theComboBox.addEventListener(theComboBox.hostElement, 'mouseleave', function () {
        log.textContent = 'mouseleave on ComboBox';
    });
 
    var theDate = wijmo.Control.getControl('#theDate');
    theDate.addEventListener(theDate.hostElement, 'mouseenter', function () {
        log.textContent = 'mouseenter on InputDate';
    });
    theDate.addEventListener(theDate.hostElement, 'mouseleave', function () {
        log.textContent = 'mouseleave  on InputDate';
    });
});

// This file locates: "Content/css/Lesson/C1Mvc/HtmlEvents.css".
#log {
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
  opacity: .5;
}

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

<h1>
    @Html.Raw(Resources.C1Mvc.HtmlEvents_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.HtmlEvents_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.HtmlEvents_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.HtmlEvents_Text3)
</p>
<p>
    @(Html.C1().ComboBox()
    .Id("theComboBox")
    .Bind((List<string>)ViewBag.Countries))
 
    @(Html.C1().InputDate().Id("theDate"))
</p>
<div id="log">
    @Html.Raw(Resources.C1Mvc.HtmlEvents_Text4)
</div>
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1Mvc.HtmlEvents_Text5)
    </div>
</div>