Kendo组合框需要脚本和链接标签

Question

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

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

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

Answer 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>
结果：

Kendo组合框需要脚本和链接标签

问题描述投票：0回答：1

1个回答

最新问题

Kendo组合框需要脚本和链接标签

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1