asp.net-mvc – 如何使用需要js的Kendo UI MVC Extensions？

发布时间：2020-12-16 06:49:31 所属栏目：asp.Net 来源：网络整理

导读：我有一个看起来像这样的控制器： using System.Collections.Generic;using System.Web.Mvc;using Kendo.Mvc.Extensions;using Kendo.Mvc.UI;namespace KendoMvcApplication.Controllers{ public class HomeController : Controller { public ActionResult In

我有一个看起来像这样的控制器：

using System.Collections.Generic;
using System.Web.Mvc;

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

namespace KendoMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetData([DataSourceRequest] DataSourceRequest req)
        {
            var products = CreateProducts();
            var result = products.ToDataSourceResult(req);
            return Json(result);
        }     

        private static IEnumerable<Product> CreateProducts()
        {
            for (int i = 1; i <= 20; i++)
            {
                yield return new Product
                {
                    ProductId = i,ProductName = "Product " + i,ProductPrice = i * 2.5
                };
            }
        }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
    }
}

一个看起来像这样的视图：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">            
    require.config({
        baseUrl : '@Url.Content("~/Scripts")',paths: {
            'jquery': 'jquery-2.0.3.min','kendo': 'kendo-ui'
        },shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }            
    });           
    require(['jquery','kendo/kendo.grid.min'],function ($) {
        $(document).ready(function () {
            $('#grid').kendoGrid({
                dataSource: {
                    schema: {
                        data: 'Data',total: 'Total',aggregates: 'AggregateResults',model: {
                            id: "ProductId",fields: {
                                ProductName: { type: "string" },ProductPrice: { type: "number" }
                            }
                        }
                    },transport: {
                        read: {
                            url: "@Url.Action("GetData","Home")",dataType: "json",method: "post"
                        }
                    },pageSize: 10,serverPaging: true,serverSorting: true,type: "aspnetmvc-ajax"
                },sortable: {
                    mode: "single"
                },columns: ["ProductName","ProductPrice"],scrollable: false,pageable: true
            });
        });            
    });
</script>
</body>
</html>

我的目录结构是：

> Scripts / kendo-ui / *(所有的剑道文件,包括mvc文件)
> Scripts / require.js
> Scripts / jquery-2.0.3.min.js

除了服务器端排序没有得到应用之外,它几乎可以工作.

这是因为kendo.aspnet.mvc.min.js文件永远不会被下载(当然,因为需要JS不知道任何关于它的内容)所以为了解决这个问题,我尝试了这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")','kendo': 'kendo-ui','kendo-mvc': 'kendo/kendo.aspnetmvc.min'
        },shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }
    });
    require(['jquery','kendo-mvc',pageable: true
            });
        });
    });
</script>
</body>
</html>

但是这产生了这个错误：

并尝试加载js文件：

找不到404红点,因为它在脚本文件夹下的名为kendo的文件夹中查找js文件.

那么我想我会尝试包括所有版本,所以我尝试了这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")','kendo': 'kendo-ui/kendo.all.min','kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
        },'kendo','kendo-mvc'],pageable: true
            });
        });
    });
</script>
</body>
</html>

但是这产生了这些错误：

并尝试加载js文件：

在这种情况下 – 找不到404红点,因为它正在Scripts文件夹下直接查找文件.

所以这是我的问题：

How can I include said file in a require JS type scenario?

旁白：我想使用kendo.all.min文件,而不是单独的文件,因为我希望将来使用knockout-kendo,这似乎不适用于单独的文件但是如果使这项工作的唯一方法是使用单独的文件方法,这很好.

解决方法

我花了一段时间才使你的代码正常工作,但是在我一点点摆弄它后,我设法让你的原始代码只需稍加改动即可进行排序.

我唯一改变的是在require行,我也添加了mvc文件.然后所有的路径都变得正确,一切都很顺利.

['jquery','kendo/kendo.grid.min','kendo/kendo.aspnetmvc.min']

在我的代码中,我使用了包含在该包中的jQuery.min.js文件的“用于ASP.NET MVC Q2 2013的Kendo UI”.然后,完整的View代码变为：

<script type="text/javascript">            
  require.config({
    baseUrl : '@Url.Content("~/Scripts")',paths: {
        'jquery': 'jquery-2.0.3.min','kendo': 'kendo-ui'
    },shim: {
        'jquery': {
            exports: 'jQuery'
        }
    }            
  });           
  require(['jquery','kendo/kendo.aspnetmvc.min'],function ($) {
    $(document).ready(function () {
        $('#grid').kendoGrid({
            dataSource: {
                schema: {
                    data: 'Data',model: {
                        id: "ProductId",fields: {
                            ProductName: { type: "string" },ProductPrice: { type: "number" }
                        }
                    }
                },transport: {
                    read: {
                        url: "@Url.Action("GetData",method: "post"
                    }
                },type: "aspnetmvc-ajax"
            },sortable: {
                mode: "single"
            },pageable: true
        });
    });            
  });
</script>

我希望它也适用于你的代码.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!