I want to use kendoui in my ASP.NET Core project.
I have following parts – _Layout.cshtml
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - CarWash</title>
<!-- Bootstrap & Kendo CSS -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/kendoo/css/kendo.rtl.min.css" rel="stylesheet" />
<link href="~/kendoo/css/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/kendoo/css/kendo.default-ocean-blue.min.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">CarWash</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Service" asp-action="Create">Create Service</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Car" asp-action="Create">Create Car</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Service" asp-action="Index">Index Service</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2024 - CarWash - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- Load jQuery, Bootstrap, Kendo, and Site Scripts -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/kendoo/js/kendo.all.min.js"></script>
<script src="~/kendoo/js/kendo.aspnetmvc.min.js"></script>
<script src="~/kendoo/js/kendo.web.min.js"></script>
<script src="~/kendoo/js/kendo.messages.fa-ir.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!-- Render any additional page scripts -->
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My Create.cshtml
:
@model CarWash.Models.ServiceModel
<style>
.form-floating > label{
right: 0px !important;
}
</style>
<div class="row" dir="rtl">
<div class="col-md-4 form-floating">
<input id="CustomerName" class="form-control text-end" asp-for="CustomerName" placeholder="Customer Name" />
<label for="CustomerName">Customer Name</label>
</div>
<div class="col-md-4 form-floating">
<input id="PhoneNumber" class="form-control text-end" asp-for="PhoneNumber" placeholder="Phone Number"/>
<label for="PhoneNumber">Phone Number</label>
</div>
@* <select id="CarId" class="form-control" asp-for="CarId" asp-items="(List<SelectListItem>)ViewBag.Cars">
</select> *@
<div class="col-md-4 k-rtl col-md-4">
@(Html.Kendo().ComboBoxFor(x => x.CarId)
.Placeholder("Select Car")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(r => r.Action("Car_Read", "Service"));
})
.Filter(FilterType.StartsWith)
)
</div>
</div>
<button class="btn btn-primary mt-3" onclick="Save()">Insert</button>
It is not work correctly. I mean the combobox shows nothing. But if I put the following scripts:
<!-- Load jQuery, Bootstrap, Kendo, and Site Scripts -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/kendoo/js/kendo.all.min.js"></script>
<script src="~/kendoo/js/kendo.aspnetmvc.min.js"></script>
<script src="~/kendoo/js/kendo.web.min.js"></script>
<script src="~/kendoo/js/kendo.messages.fa-ir.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
Just before the following part, it works; but I don’t want to do that:
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
How may IO solve this?
2
Answers
According to the document for including the Telerik UI for ASP.NET Core Client-Side Resources, the Kendo UI script files required by UI for ASP.NET Core must be loaded in the tag after the jQuery script. So that you should put your scripts into
<header>
.If you must have the scripts after the footer, instead of in the
<head>
tag then you can do so.You’ll have to use deferred initialization:
Call the
.Deferred()
method of the component, as a last fluent method of it’s configuration.At the end of the page, after the
jQuery
script and the kendo scripts call theDeferredScritps()
method to output the scripts: