个人中心
gpt4 book ai didi

asp.net-mvc - 如何将 Kendo UI MVC 扩展与 require js 一起使用？

转载 作者：行者123 更新时间：2023-12-02 23:23:22 26 4
gpt4 key购买 nike

我有一个如下所示的 Controller :

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

View 如下所示:

<!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/*(所有 kendo 文件，包括 mvc 文件)
  • 脚本/require.js
  • 脚本/jquery-2.0.3.min.js

除了不应用服务器端排序之外，它几乎可以工作。

这是因为 kendo.aspnet.mvc.min.js 文件从未被下载过(当然，因为 require 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")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui',
            'kendo-mvc': 'kendo/kendo.aspnetmvc.min'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }
    });
    require(['jquery', 'kendo-mvc', '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>

但这产生了这个错误:

split configuration error

并尝试加载 js 文件:

try 1 files

红点是404 not find，因为它正在scripts文件夹下一个名为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")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui/kendo.all.min',
            'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }
    });
    require(['jquery', 'kendo', 'kendo-mvc'], 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>

但这产生了这些错误:

ASP NET MVC Errors

并尝试加载 js 文件:

case 2 files

在本例中 - 红点是 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']

在我的代码中，我使用了“Kendo UI for ASP.NET MVC Q2 2013”​​以及该包中包含的 jQuery.min.js 文件。完整的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.grid.min', 'kendo/kendo.aspnetmvc.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>

我希望它也能在您的代码中工作。

关于asp.net-mvc - 如何将 Kendo UI MVC 扩展与 require js 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18504833/

26 4 0
文章推荐： debugging - 调试器如何跟踪 C 代码和汇编指令之间的映射？
文章推荐： powershell - 将参数从一个Powershell函数传递给另一个
文章推荐： elasticsearch - Elasticsearch，查询数组
文章推荐： recursion - F# 如何展平二叉搜索树
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com