검도 신고 errorTemplate 알림 (MVC) 표시 방법

Question

사용자가 저장 또는 삭제 버튼을 클릭하면 알림을 표시하려고합니다. Here is what i use for it.(Kendo notification)

나는 CSS 부분에 문제가 있다고 생각하는데, 나는 많은 것들을 바 꾸었지만 여전히 같은 장소이다.

나는 통지를 저장 아무 문제가 없다하지만 난 errorTemplate 알림을 표시 할 때 나는이 notificaton 수 :

을하지만 난 통지의 유형을 보여주고 싶어요. 어떻게 이런 템플릿을 보여줄 수 있습니까? 내가 뭘 잘못

?

스크립트 파트 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>