Blazor Server App C# and Java Script communication #22564

const1966 · 2020-06-05T04:45:40Z

const1966
Jun 5, 2020

Hello,
I'm just starting to learn Blazor Server Side app using latest .NET Core 3.1 Framework.

Dev Env: Microsoft Visual Studio Professional 2019
Version 16.5.4
Microsoft .NET FRamework 4.7.03062

I want to use DateTime Picker on my Index.razor page:

@page "/"

<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="md-form md-outline input-with-post-icon datepicker">
                <input type="text" id="orderDatePicker" class="form-control">
            </div>
        </div>
    </div>
</div>

Here is my _Host.cshtml:

@page "/"
@namespace BlazorAppDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorAppDemo</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>

    <script type="text/javascript">

        $('#orderDatePicker').datepicker({
            format: 'dddd, dd mmm, yyyy',

        });

    </script>

</body>
</html>

The issue I'm facing is when this reference is sitting within the <body> tag

    <script src="_framework/blazor.server.js"></script>

(where this is actually supposed to be), my "orderDatePicker" is not working (not showing Dates to pick).

But when I move

    <script src="_framework/blazor.server.js"></script>

from <body> to <head> the Picker works perfectly:

Looks like my problem is resolved, but new and bigger issue appears as a result of that move.
The onclick event is not working on Counter.razor page

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

onclick event does not fire while this worked well before the move.

Could anybody explain me why this is happening.
Thank you.

MrOldham101 · 2020-06-11T13:46:47Z

MrOldham101
Jun 11, 2020

Although I do not have the answer to your question, I would like to add that I too have encountered this issue. When trying to add any form of UI javascript (including Bootstrap js files) to the _Host file, it does not work unless it is located in the head tag. Putting it at the bottom of your body tag ( where it would usually go ) essentially acts as if it is not there.

1 reply

const1966 Jun 13, 2020
Author

Thank you, MrOldham101.
I created issue ##22908, hopefully we'll get some explanations.
Regards.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blazor Server App C# and Java Script communication #22564

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Blazor Server App C# and Java Script communication #22564

const1966 Jun 5, 2020

Replies: 1 comment · 1 reply

MrOldham101 Jun 11, 2020

const1966 Jun 13, 2020 Author

const1966
Jun 5, 2020

Replies: 1 comment 1 reply

MrOldham101
Jun 11, 2020

const1966 Jun 13, 2020
Author