Drag and Drop - C1 ASP.NET MVC

// This file locates: "Scripts/Lesson/C1Nav/DragDrop.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
    tree.allowDragging = true;
 
    // use the dragStart event to honor the allowDraggingParentNodes setting
    // by setting the 'cancel' event parameter to true
    tree.dragStart.addHandler(function(s, e) {
        if (e && e.node && e.node.hasChildren) {
            if (!document.getElementById('allowDraggingParentNodes').checked) {
                e.cancel = true; // prevent dragging parent nodes
            } else {
                e.node.isCollapsed = true; // collapse parent nodes when dragging
            }
        }
    });
 
    // use the dragOver event to honor the allowDroppingIntoEmpty setting
    // by changing the 'position' event parameter to 'Before'
    tree.dragOver.addHandler(function (s, e) {
        if (!document.getElementById('allowDroppingIntoEmpty').checked &&
    !e.dropTarget.hasChildren &&
    e.position == wijmo.nav.DropPosition.Into) {
            e.position = wijmo.nav.DropPosition.Before;
        }
    });
   
    // handle options
    document.getElementById('allowDragging').addEventListener('click', function (e) {
        tree.allowDragging = e.target.checked;
    });
 
});

// This file locates: "Content/css/Lesson/C1Nav/DragDrop.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: DragDrop
        public ActionResult DragDrop()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.DragDrop_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.DragDrop_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.DragDrop_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.DragDrop_Text3)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Nav.DragDrop_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.DragDrop_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.DragDrop_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.DragDrop_Text7)
    </li>
</ul>
 
<label>
    <input id="allowDragging" type="checkbox" checked="checked">
    @Html.Raw(Resources.C1Nav.DragDrop_Text8)
</label>
<label>
    <input id="allowDraggingParentNodes" type="checkbox" checked="checked">
    @Html.Raw(Resources.C1Nav.DragDrop_Text9)
</label>
<label>
    <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked">
    @Html.Raw(Resources.C1Nav.DragDrop_Text10)
</label>
 
@Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items").ImageMemberPath("Image").ShowCheckboxes(true)