Example Backend Widget

controller

using System.Web.Mvc;
using Telerik.Sitefinity.Mvc;

namespace Ks.Sf.Web.Mvc.Controllers
{
    [ControllerToolboxItem(Name = "TestDataLoader_MVC", Title = "Test Data Loader",
        SectionName = "Dashboard", CssClass = "sfListitemsIcn sfMvcIcn")]
    public class TestDataLoaderController : Controller
    {
        public ViewResult Index()
        {
            return View();
        }
    }
}

index.cshtml

@using Telerik.Sitefinity.Frontend.Mvc.Helpers
@using Telerik.Sitefinity.Modules.Pages
@Html.Script(ScriptRef.JQuery)
@Html.Script(ScriptRef.KendoAll)

@Html.StyleSheet(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css"), "head")
@Html.StyleSheet(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_default_min.css"), "head")
@Html.StyleSheet(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_metro_min.css"), "head")
@Html.StyleSheet(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_mobile_all_min.css"), "head")

@Html.StyleSheet(Url.WidgetContent("~/MVC/Css/custom.css"), "head")

@Html.Script(Url.WidgetContent("~/Scripts/jquery.signalR-1.2.1.min.js"), "top")
@Html.Script(Url.WidgetContent("~/signalr/hubs"), "top")

<div id="testDataLoader" class="sfDashboardWidgetWrp sfDashboardStartUpWrp">
    <h3>Testing Data Management</h3>
    <strong class="sfParentTitle">Load or Reload Test Data</strong>
    <div>
        Number of Productions: <input id="numOfProds" value="1"/>
        <p style="display: inline-block">
            <button type="button" class="k-button" id="loadTestData">Start...</button>
            <div id="progressBar" class="myloader" style="display: none">Please Wait...</div>
            <div class="sf-loading"><span></span></div>
            <div id="appendto" class="demo-section k-header"></div>
        </p>
    </div>
    <div>
        <button type="button" class="k-button" id="testConnection">Test Connection</button>
    </div>
    <span id="staticNotification"></span>
</div>

<script>
    $(document).ready(function () {
        var staticNotification = $("#staticNotification").kendoNotification({
            appendTo: "#appendto",
            autoHideAfter: 0
        }).data("kendoNotification");
        
        $.connection.hub.logging = true;
        $.connection.hub.start();
        $.connection.testDataLoaderHub.client.notify = function onNotify(msg) {
            staticNotification.show(msg, "info");
            $("#testDataLoader #loadTestData").removeAttr("disabled");
            $("#testDataLoader #progressBar").hide();
        };

        var data = [
            { text: "1", value: "1" },
            { text: "2", value: "2" },
            { text: "5", value: "5" },
            { text: "10", value: "10" },
            { text: "20", value: "20" },
            { text: "50", value: "50" }
        ];

        $("#numOfProds").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: 0
        });

        $("#testDataLoader #loadTestData").click(function () {
            var numOfProds = $("#numOfProds").val();
            $("#testDataLoader #loadTestData").attr("disabled", "disabled");
            $("#testDataLoader #progressBar").show();
            $.ajax({
                url: "/Sitefinity/CustomServices/TestDataLoaderService/LoadTestData",
                contentType: "application/json",
                dataType: "json",
                data: { numOfProds:numOfProds },
                error: function() {
                    alert("An unexpected error occurred.");
                    $("#testDataLoader #loadTestData").removeAttr("disabled");
                    $("#testDataLoader #progressBar").hide();
                }
            });
        });

        $("#testDataLoader #testConnection").click(function () {
            $.ajax({
                url: "/Sitefinity/CustomServices/TestDataLoaderService/TestConnection",
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    if (result) alert("success");
                },
                error: function () {
                    alert("An unexpected error occurred.");
                }
            });
        });
    });
</script>