Skip to content

Java Script UI is not working in Blazor Server App #22908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
const1966 opened this issue Jun 13, 2020 · 10 comments
Closed

Java Script UI is not working in Blazor Server App #22908

const1966 opened this issue Jun 13, 2020 · 10 comments
Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. question Status: Resolved

Comments

@const1966
Copy link

Hello,
I'm having problem with an implementation of any of JS UI (say DateTimePicker) in Blazor Server Side app ( .NET Core 3.1 Framework).
Dev Env: Microsoft Visual Studio Professional 2019
Version 16.5.4
Microsoft .NET FRamework 4.7.03062

I just want to have 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 "blazor.server.js" 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).

image

But when I move

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

image

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

image

Looks like my problem is resolved, but the new and bigger issue appears as a result of that move.
Exactly, onclick event is stopping to work on Counter.razor page:

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

The Counter doesn't work while this worked well before the move.

Could anybody explain me why this is happening.
Thank you.
@pranavkm pranavkm added the area-blazor Includes: Blazor, Razor Components label Jun 13, 2020
@mrpmorris
Copy link

If you navigate away from the page and then back, does it stop working again?

@const1966
Copy link
Author

Just to clarify:
The issue is not with @OnClick event as this is working properly when <script src="_framework/blazor.server.js"></script> is sitting in its native location, which is <body> of _Host.cshtml file.
Problem is that I cant make "DateTipme Picker" work unless I move <script src="_framework/blazor.server.js"></script> from <body> to <header>.
But this move makes @OnClick unworkable.
By the way it's not just @OnClick, but @Bind and similar @events which are using blazor.server.js for Server - Client communication.

The navigation back and forth of the Page isn't resolving the issue, obviously.
I'm looking for advise How To Make JS UI work in Blazor Server App.

I stuck with my project because of this issue.
Any ideas are appreciated.
Thank you

@mrpmorris
Copy link

When you change it so that it works. If you navigate away from the page and then back again, is it now broken again?

@const1966
Copy link
Author

If the DateTimePicker works and I navigate away from the page and then back again - it's still working.

@mrpmorris
Copy link

I really wasn't expecting that answer :) Would you like to send me a small project that reproduces the problem and I'll have a look?

@const1966
Copy link
Author

Here you go.
Ask me if any questions.
Thank you
BlazorAppDemo.zip

@javiercn
Copy link
Member

@const1966 thanks for contacting us.

Your issue is that Blazor hasn't finished loading by the time you run your script. The proper way to achieve what you are trying to accomplish is to define a function in the global scope and call it from OnAfterRenderAsync using JS interop. See here for details.

@javiercn javiercn added ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. question labels Jun 15, 2020
@ghost ghost added the Status: Resolved label Jun 15, 2020
@const1966
Copy link
Author

Hi Javier,

Your suggestion does makes sense but I'm having issue with an implementation of one.
I crated Global Scope function in _Host.cshtml:

    <script type="text/javascript">

        window.ConvertArray = () => {
            $('#orderDatePicker').datepicker({
                format: 'dddd, dd mmm, yyyy',
            });
        }

    </script>

I'm calling this function as you suggested:

@code {

    protected async Task OnAfterRenderAsync()
    {
        await JSRuntime.InvokeVoidAsync("convertArray");

    }
}

But the issue is still there - DateTimePicker is not working.
(attaching my project for reference)
Am I missing anything?
BlazorAppDemo.zip

Please advise

@javiercn
Copy link
Member

@const1966 The casing is wrong

 await JSRuntime.InvokeVoidAsync("convertArray");
                           window.ConvertArray = () => {

@const1966
Copy link
Author

Thank you Javier, but this doesn't work even after I fixed the casing.
Please advise.

@ghost ghost locked as resolved and limited conversation to collaborators Jul 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. question Status: Resolved
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@pranavkm @mrpmorris @javiercn @const1966