Html - Using kendoui in ASP.NET Core - does not work correctly

JavadM
September 24, 2024
183 views
0 votes
2 Answers

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">
            &copy; 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?

Answers

- TinyWang
- September 23, 2024 at 11:02 am
- 0 votes
0
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>.
```
<head>
...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/bootstrap/bootstrap-main.css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

@* Add the Kendo UI scripts: *@
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.aspnetmvc.min.js"></script>
</head>
```
Login or Signup to reply.

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.

    <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)
            .Deferred()
         )
    </div>

At the end of the page, after the jQuery script and the kendo scripts call the DeferredScritps() method to output the scripts:

<footer class="border-top footer text-muted">
   <div class="container">
        &copy; 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>

<script>
  @Html.Kendo().DeferredScripts(false)
</script>

<!-- Render any additional page scripts -->
@await RenderSectionAsync("Scripts", required: false)

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Using kendoui in ASP.NET Core – does not work correctly

Answers