为 asp.net mvc razor 编写自定义插件/扩展，如 kendoui 和 telerik

Question

Telerik 和 kendoUI 提供了许多 html 控件，如网格、图表等，以增强 asp.net mvc 中的 ui。更有趣的是它们被用作 html 扩展，因此我们可以将一些模型绑定到控件，这也使其具有某种强类型。它还使用 javascript 库来处理客户端交互。我需要了解我们如何编写自定义插件，如 kendo 和 Telerik，比如构建我自己的网格组件。我应该遵循的正确模式是什么？

Answer 1

这不是一个很好的例子，但我认为这是一个好的开始。

此方法生成数据表

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();
        }