如何在独立的果园模块中使用Kendo UI?

时间:2012-11-13 06:11:09

标签: asp.net-mvc-3 orchardcms kendo-ui

我正在编写自定义模块,为用户提供网格,以允许最终用户查看和管理“非内容部分”数据。此数据是从外部源向数据库提供的数据。为简单起见,该模块为mysite / Manager路径注册路径如下:

public IEnumerable<RouteDescriptor> GetRoutes() {
    return new[] {
        new RouteDescriptor {
            Priority = 5,
            Route = new Route(
                "Manager/{controller}/{action}",
                new RouteValueDictionary {
                    {"area", "XpiManager"},
                    {"controller", "Home"},
                    {"action", "Index"}
                },
                new RouteValueDictionary(),
                new RouteValueDictionary {
                    {"area", "XpiManager"}
                },
                new MvcRouteHandler())
        }
    };

正如我们所看到的,就好像它是Orchard内部的一个独立应用程序。

这是家庭控制器非常简单的代码:

[Themed]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("XpiManager");
    }
}

它使用ThemedAttribute,以便最终用户感觉好像他仍在旁边而不是某种子应用程序...

由于我需要在网格中添加一些不错的最终用户功能,并且因为我已经完全订阅了Telerik的控件,包括完整的KendoUI包,我想使用他们的服务器端包装器在我的网格中创建这个网格模板代码,目前有以下占位符代码:

<h1>Site's Manager</h1>

是的,就是这样......我希望能够在这个模板中做到这样的事情:

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID).Groupable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid"))
    )
)

作为最后的手段,我可​​以使用客户端仅使用javascript的Kendo UI,但这会使我更难绑定到我的数据源。我在Kendo UI和Orchard都很新手(尽管我对后者有点经验......)

1 个答案:

答案 0 :(得分:1)

您可以在主题项目中添加对Kendo UI服务器端组件的引用,并使用其中的帮助程序。我做了同样的事情,它就像一个魅力。

如果你不能添加引用,因为你没有从源版本运行,这是另一种可行的技术。在web.config文件的剃刀部分中为<namespaces>添加条目以获取Kendo UI内容。

<system.web.webPages.razor>
  <pages pageBaseType="...">
    <namespaces>
      <add namespace="..." />
    </namespaces>
  </pages>
</system.web.webPages.razor>

确保您还在web.config文件中添加了对所需程序集的引用,否则该网站将无法正常运行。

<compilation debug="..." targetFramework="4.0">
  <assemblies>
    <add assembly="..."/>

  </assemblies>
</compilation>

这就是它的全部。其余的是使用IRepository<T>从数据库获取记录并在Kendo UI组件助手上调用正确的方法。