編寫像kendoui和telerik爲asp.net mvc剃鬚刀的自定義插件/擴展

Question

Telerik和kendoUI提供了許多html控件，如網格，圖表等，以增強asp.net mvc中的ui。更有趣的是它們被用作html擴展，因此我們可以將一些模型綁定到控件上，這也使得它有點強類型化。它也使用JavaScript庫來處理客戶端的交互。我需要弄清楚如何編寫像kendo和telerik這樣的自定義插件，就像構建我自己的網格組件一樣。我應該遵循什麼樣的正確模式？

Answer 1

這不是很好的例子，但我認爲這是一個好的開始。

這種方法生成的dataTable

public static string GenerateTableHtml<TValue>(IEnumerable<TValue> model, string DeleteUrl, string EditUrl) 
     { 
      StringBuilder Table = new StringBuilder(); 

      Table.AppendLine("<script type='text/javascript'> $(document).ready(function() {" 
          + "$('.btnDelete').click(function() {" 
          + "var url = $(this).attr('dropzone');" 
          + "$('#dialog-form').attr('action', url);})" 
          + "})</script>"); 

      Table.AppendLine(" <div class=\"dataTables_wrapper\"><div class=\"\">"); 

      string TableButtonsTemplate = "<td><div class=\"table_buttons\">" 
             + "<a href=\"{0}\"><img src=\"../Images/icons/dark/pencil.png\")\" title=\"რედაქტირება\" /></a>" 
             + "<a href=\"#\" id=\"opener\" class=\"btnDelete\" dropzone=\"{1}\">" 
             +"<img class=\"\" src=\"../Images/icons/dark/close.png\")\" title=\"წაშლა\" /></a>" 
             + "</div></td>"; 

      string TableButtons = String.Empty; 
      bool HaveActionButtons = false; 
      string rowID = string.Empty; 

      if (String.IsNullOrEmpty(DeleteUrl) == false || string.IsNullOrEmpty(EditUrl) == false) 
      { 
       HaveActionButtons = true; 
      } 

      Table.AppendLine("<table class=\"display dTable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">"); 
      Table.AppendLine("<thead>"); 
      Table.AppendLine("<tr>"); 

      int ColumnIndex = 0; 
      int rowIndexer = 0; 

      var fType = model.GetType().FullName; 
      var startIndex = fType.IndexOf("[[") + 2; 
      var type = fType.Substring(startIndex, fType.Length - startIndex - 2); 

      foreach (var item in model) 
      { 

       if (ColumnIndex == 0) 
       { 
        var properties = item.GetType().GetProperties(); 

        foreach (var prop in properties) 
        { 
         var metaData = ModelMetadataProviders.Current.GetMetadataForProperty(null, 
             Type.GetType(type), prop.Name); 

         if (metaData.DisplayName != null) 
         { 
          Table.AppendLine("<th class=\"ui-state-default\" rowspan=\"1\" colspan=\"1\">" + metaData.DisplayName + "</th>"); 
         } 
         else 
         { 
          Table.AppendLine("<th class=\"ui-state-default\" rowspan=\"1\" colspan=\"1\">" + prop.Name + "</th>"); 
         } 
        } 

        Table.AppendLine("<th></th>"); 
        Table.AppendLine("</tr>"); 
        Table.AppendLine("</thead>"); 
        Table.AppendLine("<tbody>"); 
       } 

       foreach (var value in item.GetType().GetProperties().Select(x => x.GetValue(item, null))) 
       { 
        int rowCount = item.GetType().GetProperties().Select(x => x.GetValue(item, null)).Count(); 
        rowIndexer++; 

        if (rowIndexer != rowCount) 
        { 
         if (rowIndexer == 1) 
         { 
          Table.AppendLine("<tr class=\"gradeA odd\">"); 
         } 

         if (value != null) 
         { 
          string val = value.ToString(); 
          Table.AppendLine("<td>" + val + "</td>"); 
          rowID = item.GetType().GetProperty("ID").GetValue(item, null).ToString(); 
         } 
         else 
         { 
          Table.AppendLine("<td></td>"); 
         } 
        } 
        else 
        { 
         if (value != null) 
         { 
          Table.AppendLine("<td>" + value.ToString() + "</td>"); 
         } 
         else 
         { 
          Table.AppendLine("<td></td>"); 
         } 

         if (HaveActionButtons == true) 
         { 
          Table.AppendLine(String.Format(TableButtonsTemplate, EditUrl + rowID, DeleteUrl + rowID)); 
         } 

         Table.AppendLine("</tr>"); 

         if (rowIndexer != item.GetType().GetProperties().Count()) 
         { 
          Table.AppendLine("<tr class=\"gradeA odd\">"); 
         } 
        } 
       } 
       rowIndexer = 0; 
       ColumnIndex++; 
      } 

      Table.AppendLine("</tbody></table></div></div>"); 

      Table.AppendLine(String.Format(Resources.MainResources.ModalDialogConfirm, "Confirmation", 
       "<strong>Warning!</strong><br /> Are you sure you want to delete user?", "")); 

      return Table.ToString(); 
     }