2014-01-14 32 views
0

我有2個JS功能,它們被Kendo UI Grid識別。未引用事件JS函數

  1. columns.Command(命令=> command.Custom( 「激活」)點擊( 「ActivateHandler」)。);
  2. 活動(事件=> events.Error(「的ErrorHandler」))

是在網格設置的2個功能,我已經提供了,他們應該調用的腳本。但我渲染頁面,這是我得到錯誤「的ReferenceError:ActivateHandler沒有定義/ PhoneNumberView /無效」

@(Html.Kendo().Grid<ClientsToProfitsKendoUI.Data.PhoneNumberListModel>() 
      .Name("grid") 
      .Columns(columns => 
      { 
       columns.ForeignKey(c => c.PhoneNumberTypeId 
        , (System.Collections.IEnumerable)ViewData["PhoneNumberType"] 
        , "Key", "Value").Width(140); 
       columns.Bound(c => c.PhoneNumber1).Width(190); 
       columns.Command(command => 
        command.Custom("Activate").Click("ActivateHandler")); 
      }) 
      .ToolBar(toolbar => 
      { 
       toolbar.Save(); 
      }) 
      .HtmlAttributes(new { style = "padding: 10px;" }) 
       .Editable(editable => editable.Mode(GridEditMode.InCell)) 
      .Scrollable() 
      .Groupable() 
      .Sortable() 
      .Pageable(pageable => pageable 
       .Refresh(true) 
       .PageSizes(true) 
       .ButtonCount(5)) 
      .DataSource(dataSource => dataSource 
       .Ajax() 
       .Batch(true) 
       .PageSize(20) 
       .ServerOperation(false) 
       .Events(events => events.Error("errorHandler")) 
       .Model(model => model.Id(p => p.PhoneNumberId)) 
        .Read("Inactive_Read", "PhoneNumberView") 
          .Update("Inactive_Update", "PhoneNumberView") 
      ) 
    ) 
    <script type="text/javascript"> 
     function errorHandler(e) { 
      if (e.errors) { 
       var message = "Errors:\n"; 
       $.each(e.errors, function (key, value) { 
        if ('errors' in value) { 
         $.each(value.errors, function() { 
          message += this + "\n"; 
         }); 
        } 
       }); 
       alert(message); 
      } 
     } 

     function ActivateHandler(e) { 
      e.preventDefault(); 
    ... 
     } 
    </script> 

這可能是知道的一件好事是,這個劍道UI網格位於使用Ajax構建頁面的KendoUI PanelBar中。

<ul id="PhoneNumbersPanel"> 
            <li id="Active"> 
             Active 
             <div style="padding:10px"></div> 
             <br /> 
            </li> 
            <li> 
             Inactive 
             <div style="padding:10px"></div> 
             <br /> 
            </li> 
            <li> 
             All 
             <div style="padding:10px"></div> 
             <br /> 
            </li> 
           </ul> 
           <script> 
            $("#PhoneNumbersPanel").kendoPanelBar({ 
             animation: { 
              // fade-out closing items over 1000 milliseconds 
              collapse: { 
               duration: 500, 
               effects: "fadeOut" 
              }, 
              // fade-in and expand opening items over 500 milliseconds 
              expand: { 
               duration: 500, 
               effects: "expandVertical fadeIn" 
              } 
             }, 
             expandMode: "single", 
             contentUrls: ["/PhoneNumberView/Active" 
                 , "/PhoneNumberView/Inactive" 
                 , "/PhoneNumberView/AllActive"] 
            }); 

回答

0

有沒有好主意混合JavaScript和HTML,因爲你這樣做。在聲明處理事件的函數之前,您嘗試呈現kendo網格。解決方案是:

  • 在網站的頂部移動腳本

,或者是我建議

  • 利用外部JS文件,並聲明它想:
 <script src="@Url.Content("~/Scripts/scripts.js")" type="text/javascript"></script>