如何将数据从 MVC 控制器传递到 Telerik UI 以获取 MVC 通知小部件

Question

我在我的 ASP.Net MVC 应用程序中使用 TelerikUI for MVC 库。在我的一个页面中，我需要使用 Notification 小部件。有没有一种方法可以将数据（显示）从 MVC 控制器传递到在我的 Razor 视图中实例化的通知小部件？

感谢您的帮助！

山姆

Answer 1

我的解决方法。它有效。

首先创建一个 BaseController，从中扩展所需的控制器，并添加以下类属性和方法：

public class MyBaseController : Controller
{

    // set js kendo notifications thru controllers
    public class notification {
        public string Title { get; set; }
        public string Message { get; set; }
        public string Type { get; set; }
    }

    public IList<notification> kendoNotifications;

    public void NewNotification(string title, string message, string type)
    {
        if (kendoNotifications == null)
        {
            this.kendoNotifications = new List<notification>();
        }
        this.kendoNotifications.Add(new notification { Title = title, Message = message, Type = type });
    }
    public IList<notification> GetKendoNotifications()
    {
        return this.kendoNotifications;
    }

    // GET: MyBase
    public MyBaseController()
    {
        // my stuff
        // ViewBag.KendoNotifications = this.kendoNotifications;
    }

接下来在布局中包含剑道通知和以下代码：

<script>
        var notification;// global, do not name anything else like this
    </script>
    @Html.Partial("_KendoNotification")
    @if (ViewBag.KendoNotifications != null)
    {
        if (ViewBag.KendoNotifications.Count > 0)
        {
            <script>
                $(document).ready(function () {
                    @*Ver MyBaseController *@
                    @foreach (var notification in ViewBag.KendoNotifications)
                    {
                        <text>
                            notification.show({
                                title: "@notification.Title",
                                message: "@notification.Message",
                            }, "@notification.Type");
                        </text>

                    }
                });// fin ready
            </script>
            ViewBag.KendoNotifications.Clear();
        }
    }

部分 _KendoNotification 的代码（几乎是 js 小部件配置）

<div id="kendo-notification-wrap">

<span id="notification" style="display:none;"></span>

<script id="emailTemplate" type="text/x-kendo-template">
    <div class="new-mail">
        <span class="k-icon k-i-email k-icon-32"></span>
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="errorTemplate" type="text/x-kendo-template">
    <div class="wrong-pass">
        <span class="k-icon k-i-error k-icon-32"></span>
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="successTemplate" type="text/x-kendo-template">
    <div class="success">
        <span class="k-icon k-i-check-outline k-icon-32"></span>
        <h3>#= message #</h3>
    </div>
</script>

<script>
      $(document).ready(function() {

                notification = $("#notification").kendoNotification({
                    position: {
                        pinned: true,
                        top: 30,
                        right: 15
                    },
                    autoHideAfter: 5000,
                    allowHideAfter: 1000,
                    stacking: "down",
                    templates: [{
                        type: "info",
                        template: $("#emailTemplate").html()
                    }, {
                        type: "error",
                        template: $("#errorTemplate").html()
                    }, {
                        type: "success",
                        template: $("#successTemplate").html()
                    }]

                }).data("kendoNotification");

                $("#hideAllNotifications").click(function(){
                    notification.hide();
                });

                $(document).one("kendo:pageUnload", function(){ if (notification) { notification.hide(); } });



            });
</script>

<style>

    /* Info template */
            .k-notification-info.k-group {
                background: rgba(0%,0%,0%,.7);
                color: #fff;
            }
            .new-mail {
                width: auto;
                height: auto;
            }
            .new-mail h3 {
                font-size: 1em;
                padding: 32px 10px 5px;
            }
            .new-mail img {
                float: left;
                margin: 30px 15px 30px 30px;
            }

            /* Error template */
            .k-notification-error.k-group {
                background: rgba(100%,0%,0%,.7);
                color: #ffffff;
            }
            .wrong-pass {
                width: auto;
                height: auto;
            }
            .wrong-pass h3 {
                font-size: 1em;
                padding: 32px 10px 5px;
            }
            .wrong-pass img {
                float: left;
                margin: 30px 15px 30px 30px;
            }

            /* Success template */
            .k-notification-success.k-group {
                background: rgba(0%,60%,0%,.7);
                color: #fff;
            }
            .success {
                width: auto;
                height: auto;
                padding: 0 30px;
                line-height: 75px;
            }
            .success h3 {
                font-size: 1.7em;
                font-weight: normal;
                margin-bottom: 20px;
                display: inline-block;
                vertical-align: middle;
            }
            .success img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
            }

</style>

完成此操作后，只需在要将通知传递给视图的任何控制器/操作中执行以下操作：

public class MyTestController : MyBaseController
{
    // GET: Test
    public ActionResult Index()
    {


        this.NewNotification("hola", "prueba", "success");
        ViewBag.KendoNotifications = this.GetKendoNotifications();

        return View("~/Views/Test/Index.cshtml");
    }
}

Notificaction image test

问候！