剑道组合框需要脚本和链接标签答案

【问题标题】：Script and Link Tag require for Kendo Combo Box剑道组合框需要脚本和链接标签
【发布时间】：2020-06-14 13:31:48
【问题描述】：

我必须在局部视图中添加一个 Kendo jQuery 组合框，我已经跟进了这个示例：https://demos.telerik.com/kendo-ui/combobox/index 并从输入元素和选择元素添加了一个组合框。

但是输入和选择元素没有显示为组合框，而是显示了它们的默认性质（在此处添加图像以供参考，例如选择文本/占位符不可编辑）

example.cshtml 文件：

@model ExampleModel

<div class="demo">
        <h4><label for="fabric">T-shirt Fabric</label></h4>
        <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />

        <h4 style= "margin-top: 2em;" ><label for="size">T-shirt Size</label></h4>
        <select id="size" placeholder="Select size..." style="width: 100%;">
            <option> X - Small </option>
            <option> Small </option>
            <option> Medium </option>
            <option> Large </option>
            <option> X - Large </option>
            <option> 2X-Large</option>
        </select>
 </div>

  <script>
        $(document).ready(function () {
            console.log("inside doc ready");
            $("#fabric").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Cotton", value: "1" },
                    { text: "Polyester", value: "2" },
                    { text: "Cotton/Polyester", value: "3" },
                    { text: "Rib Knit", value: "4" }
                ],
                filter: "contains",
                suggest: true,
                index: 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();
        });
    </script>

我还跟进了 StackOverflow 上的其他答案，但我没有清楚地了解需要添加哪些引用（脚本和链接标签）以及在哪里添加？

需要添加以下脚本和链接标签，我认为是这样：

 <link rel="stylesheet" href="styles/kendo.common.min.css" />
 <link rel="stylesheet" href="styles/kendo.default.min.css" />
 <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
 <script src="js/jquery.min.js"></script>
 <script src="js/kendo.all.min.js"></script

【问题讨论】：

标签： asp.net-mvc asp.net-core razor kendo-ui kendo-combobox

【解决方案1】：

我发现您将 js 代码放在部分视图中，所以我认为这可能是您无法显示为组合框的原因。

这是一个演示。首先，我将css放在shared/_layout.cshtml <head></head>中，将js放在shared/_layout.cshtml <body></body>中，如下所示： _layout.cshtml：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - case1_5_26_</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>

然后我将 js 代码放入引用局部视图的 Main.cshtml 中。 Main.cshtml：

@{
    ViewData["Title"] = "Main";
}

<h1>Main</h1>


<partial name="_partial" />
@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            console.log("inside doc ready");
            $("#fabric").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Cotton", value: "1" },
                    { text: "Polyester", value: "2" },
                    { text: "Cotton/Polyester", value: "3" },
                    { text: "Rib Knit", value: "4" }
                ],
                filter: "contains",
                suggest: true,
                index: 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();
        });
    </script>
}

_partial.cshtml（在共享文件夹中）：

<div class="demo">
    <h4><label for="fabric">T-shirt Fabric</label></h4>
    <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />

    <h4 style="margin-top: 2em;"><label for="size">T-shirt Size</label></h4>
    <select id="size" placeholder="Select size..." style="width: 100%;">
        <option> X - Small </option>
        <option> Small </option>
        <option> Medium </option>
        <option> Large </option>
        <option> X - Large </option>
        <option> 2X-Large</option>
    </select>
</div>

结果：

【讨论】：

非常感谢您的回复！但我的项目没有 _Layout 文件，它使用 Views/Shared/Head.cshtml。我在 Head.cshtml 文件中添加了以下语句： Html.AddScriptParts(ResourceLocation.Head, "~/Themes/Emporium/Content/scripts/jquery-v1.12.4.min.js"); Html.AddScriptParts(ResourceLocation.Head, "~/Themes/Emporium/Content/scripts/kendo.all.min.js"); Html.AddScriptParts(ResourceLocation.Head, "~/Themes/Emporium/Content/scripts/kendo.aspnetmvc.min.js");
我按照此链接中的所有步骤操作：docs.telerik.com/aspnet-core/getting-started/first-steps 并尝试添加 datePicker 示例，但没有成功。
链接中也提到了_layout.cshtml，你可以尝试添加一个_layout.cshtml并在_ViewStart.cshtml中使用。恐怕你的Head.cshtml不行。或者你可以尝试将 css 和 js 添加到直接引用局部视图的页面中。
是的，我将脚本和链接标签直接添加到部分视图页面的顶部并且它正在工作。我没有在局部视图中添加 jquery 脚本标签。

【解决方案2】：

我在此处添加此代码示例，以帮助遇到相同问题的任何人。我在局部视图的顶部添加了脚本和链接标签：

@model ExampleModel

@{
    Html.AddCssFileParts("~/Themes/Emporium/Content/kendo/kendo.common.min.css");
    Html.AddCssFileParts("~/Themes/Emporium/Content/kendo/kendo.default.min.css");

    Html.AddScriptParts(ResourceLocation.Footer, "~/Themes/Emporium/Content/kendo/kendo.all.min.js");
    Html.AddScriptParts(ResourceLocation.Footer, "~/Themes/Emporium/Content/kendo/kendo.aspnetmvc.min.js");
}

以及显示组合框的 div：

 <div class="inputs">
                
                <select asp-for="City" id="citiesDropDown"></select>
                @Html.HiddenFor(model => model.City)
    
                <span asp-validation-for="City"></span>
    
                <script type="text/javascript" asp-location="Footer">
                    $(document).ready(function () {
                        debugger
                        // create ComboBox from select HTML element
                        $("#citiesDropDown").kendoComboBox({
                            autoBind: true,
                            filter: "contains",
                            suggest: true,
                            ignoreCase: true,
                            dataTextField: "name",
                            dataValueField: "name",
                            placeholder: "Select city",
                            dataSource: new kendo.data.DataSource({
                                transport: {
                                    read: {
                                        url: "/Country/GetCitiesByStateId",
                                        dataType: "json",
                                        data: {
                                            stateId: function () {
                                                if ("@Model.StateProvinceId" != null && "@Model.StateProvinceId" != "") {
                                                    return "@Model.StateProvinceId"
                                                }                                                 
                                                return "0";
                                            },
                                            addSelectStateItem: true
                                        }
                                    }
                                }
                            }),
                            value: "@Model.City"
                        });
                    });
                </script>
    
            </div>

这将在选择元素上显示组合框功能。我希望这会有所帮助！

【讨论】：