css - Kendo Notification 如何显示errorTemplate Notification(MVC)

Question

我想在用户点击保存或删除按钮时显示通知。 Here is what i use for it.(Kendo notification)

我认为我的 CSS 部分有问题，我更改了很多东西但我仍然在原地。

我对保存通知没有问题，但是当我想显示错误模板通知时，我收到了这个通知:

但我想显示这种类型的通知。如何显示这样的模板？

我做错了什么？

脚本第 1 部分:

@(Html.Kendo().Notification()
    .Name("notification")

    .Position(p => p.Pinned(true).Top(30).Right(30))
    .Stacking(NotificationStackingSettings.Down)
    .AutoHideAfter(3500)
    .Templates(t =>
    {

        t.Add().Type("error").ClientTemplateID("errorTemplate");
        t.Add().Type("upload-success").ClientTemplateID("successTemplate");
    })
)

脚本第 2 部分(用于控件):

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

        var a = parseInt(@ViewBag.x);


        if (a > 1) {
            var notification = $("#notification").data("kendoNotification");
            if (a == 2) {
                notification.show({ message: "I saved" }, "upload-success");

            }
            else if (a == 3) {

                notification.show({ message: "I deleted" }, "wrong-pass");
            }


        }

        else {
            notification.show({
                message: "Mistake!"
            }, "error");

        }

    });
</script>

分区部分:

<script id="errorTemplate" type="text/x-kendo-template">
    <div class="wrong-pass">

        <table>
            <tr>
                <td><img src="../Images/error-icon.png" /></td>
                <td><h3>#= message #</h3></td>
            </tr>

        </table>


    </div>
</script>

<script id="successTemplate" type="text/x-kendo-template">
    <div class="upload-success">
        <table>
            <tr>
                <td><img src="../Images/success-icon.png " /></td>
                <td><h3>#= message #</h3></td>
            </tr>

        </table>
    </div>
</script>

CSS

<style>
    /* Error template */
    .k-notification-error.k-group {
        background: rgba(100%,0%,0%,.7);
        color: #ffffff;
    }

    .wrong-pass {
        width: 300px;
        height: 100px;
    }

        .wrong-pass h3 {
            font-size: 1em;
            padding: 32px 10px 5px;
        }

        .wrong-pass img {
            float: left;
            margin: 30px 15px 30px 30px;
        }

    /* Success template */
    .k-notification-upload-success.k-group {
        background: rgba(0%,60%,0%,.7);
        color: #fff;
    }

    .upload-success {
        width: 320px;
        height: 100px;
        padding: 0 30px;
        /*line-height: 40px;*/
    }

        .upload-success h3 {
            font-size: 1.7em;
            font-weight: normal;
            display: inline-block;
            vertical-align: bottom;
            color: #f6e5e5;
            line-height: 50px;
        }

        .upload-success img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }
</style>

Answer 1

<script id="errorTemplate" type="text/x-kendo-template">
    <div class="wrong-pass">
        <img src="#= path #Content/web/notification/error-icon.png" />
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>
<div style="width:35%;float:right;height:31px;">
    @(Html.Kendo().Notification()
    .Name("notification")
    .Position(p => p.Pinned(true).Top(30).Right(30))
    .Stacking(NotificationStackingSettings.Down)
    .AutoHideAfter(30000)
    .Templates(t =>
    {
        t.Add().Type("error").ClientTemplateID("errorTemplate");
    })
    )
    <script>
            function msgnotification(title,message,type,time)
            {
                if (time == undefined)
                    time = 5000;
                var d = new Date();
                var notification = 
                $("#notification").data("kendoNotification");
                notification.options.autoHideAfter = time;
                notification.show({
                    title: title,
                    message: message,
                    path: appdata.rootUrl
                }, type);
            }
    </script>
</div>

<style>
        /* Error template */
        .k-notification-error.k-group {
            background: rgba(100%,0%,0%,.7);
            color: #ffffff;
        }
        .wrong-pass {
            width: 300px;
            height: 100px;
        }

        .wrong-pass h3 {
            font-size: 1em;
            padding: 32px 10px 5px;
        }
        .wrong-pass img {
            float: left;
            margin: 30px 15px 30px 30px;
        }
</style>