I am using Syncfusion in Blazor WebAssembly and encountering issues upon building the application on my local server. The first issue is that the Syncfusion components are not displaying properly: the calendar widget (see image) is not formatted properly. The second issue is that the widget has no functionality: i.e., the buttons are broken. This same issue occurs with all Syncfusion components.
This is how the calendar component renders in the application:
I have attached a few relevant code snippets from the project.
Program.cs [snippet]
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
Index.razor [snippet]:
#using Syncfusion.Blazor
#using Syncfusion.Blazor.Calendars
<SfCalendar TValue="DateTime" />
Host.cshtml [snippet]
<head>
...
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
<component type="typeof(App)" render-mode="ServerPrerendered" />
I hypothesize that I must be missing some CSS and script import, based on the nature of the problem. I have tried adding references as recommended in Syncfusion's documentation to Host.cshtml (the project does not use index.html) but the references in <head> did not affect the application components.
Related
Basically i have a file that generates some data and writes it to a rudimentary html file. I made a simple React app to better parse and display the data but it's useless if i have to run a server every time. All i really need is a shortcut html page that runs the react all as a standalone. Hope this make sense.
What you're looking for a static templating engine in client side.
However, to answer your question, yes, definitely it's possible. But you just need to include the needed dependencies. Also, note that this is not optimised for production.
<!-- The root where React App gets rendered. -->
<div id="root"></div>
<!-- React JS and React DOM Libraries. Add Babel for transpiling, as you might use JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- The real React JSX App -->
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
This is React!
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
It sounds like the generation of static HTML. You do not need React in such a case. Just use pug or another template engine of your choice.
we want to move some of our forge viewer code base into a react-app and can't figure out how to use the viewer3d js api without appending all Autodesk.Viewer.... usages in our components with window.* This works in all the (excellent and extensive) git samples we've studied. why? we load the viewer3d.js file in the index.html between the and the react landing :
<body>
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
<div id="root" />
the error we get (for every instance of usage of the Autodesk namespace):
Failed to compile
./src/components/Viewer.js
Line **: 'Autodesk' is not defined no-undef
this works:
this.viewer = new window.Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)
this doesn't work:
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)
As mentioned in this user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:
const Autodesk = window.Autodesk;
And it's recommended to yank your script tag to the header section of your app's entry html to make sure it gets loaded prior to the React emits:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
</head>
...
we resolved this by putting a global in the first row of our component files.
based on this.
/*global Autodesk*/
but, i do like this one even better, right behind the imports. thank you, Bryan.
const Autodesk = window.Autodesk;
I have prepared a autodesk-forge-viewer typing module, you can use it to verify types during compilation.
It is used this way:
import Autodesk from 'autodesk-forge-viewer';
const autodesk: typeof Autodesk = (window as any).Autodesk;
For some limitations of type latest TypeScript the type will be Autodesk and the value will be autodesk, so here is the code to create a Viewer instance:
const viewer: Autodesk.Viewing.Private.GuiViewer3D = new autodesk.Viewing.Private.GuiViewer3D(viewerContainer);
Please take a note that autodesk-forge-viewer module doesn't include Viewer implementation, so you still must add viewer3D.js script to the index.html.
I'm getting error with angular JS Error: [ng:areq] Argument 'MyController' is not a function, got undefined, when trying to use bundles. However when I explicity include the app in my html using script tags it works.
Bundle Config.cs
bundles.Add(new ScriptBundle("~/bundles/myweb")
.IncludeDirectory("~/Scripts/myweb", "*.js")
.IncludeDirectory("~/Scripts/myweb/Controllers", "*.js")
.Include("~/Scripts/myweb/Controllers/myController.js")
.Include("~/Scripts/myweb/myweb.js"));
With this HTML does not work:
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
This HTML does work but I'm unsure why I have to explicitly include myApp.js since it is already included in the bundle (and when I view the bundle from F12 - Developer Tools on Google Chrome it does already include the expected code):
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
<script src="~/Scripts/myweb/myweb.js"></script>
Note the shown html is in the head of _Layout.cshtml. I'm using angularJS with MVC.
Just figured out how to fix this.
I basically need to include the following code
<script src="~/Scripts/angular.js"></script>
#Scripts.Render("~/bundles/myweb")
in both the _Layout.cshtml and the index.cshtml (I only had it in Index.cshtml)
I have a asp.net MVC app, and I want to start unit testing the javascript closures I use with the app. I have watched a few demo's on plural site, and played with the sample code in the github repository.
however, all the actual mocha.js examples assume I want to host with node, and that the npm system will get all of my dependencies. At this time I cannot install node.js on my laptop. the test code in the plural site courses all are horribaly orginized, and when I look at the files named "mocha.js" they actually contain the require.js code as well.
in any regards, Does anyone has a good "html" hostable template for mocha.js code, and a nice way to orginize the dependencies outside of the node npm system?
Mocha can run in the browser without having to worry about dependencies. The documentation has a section about it. As shown in the documentation, you need a page that loads and starts Mocha, and loads anything else you need:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- Load the libraries you need -->
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<!-- Tell Mocha what interface to use for the tests. You must do this
before you read the test files. -->
<script>mocha.setup('bdd')</script>
<!-- Load the test files. This is where your tests would be located. -->
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<!-- Run the tests. -->
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
I've added some comments above to indicate what is going on.
I'm in the middle of upgrading a solution from VS2010/MVC3/.Net 4 to VS2012/MVC4/.Net 4.5. The solution has been upgraded using VS2012's project migration tool and I followed this guide to upgrade MVC3 to 4.
At the moment, Razor is giving me problems. Syntax highlighting doesn't appear for anything but the layout page, and when I try to move around in a view I either get the dialog:
Waiting for a background operation to complete. This dialog will close
when the operation completes.
Or I get an error telling me to check the Visual Studio activity log (C:\Users{User}\AppData\Roaming\Microsoft\VisualStudio\11.0\ActivityLog.xml), which led me to this error:
System.NullReferenceException: Object reference not set to an instance
of an object. at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.EnsureNoOverlap()
at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.EnsureTrackingPoints()
at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.OnTextBufferChanged(Object
sender, TextContentChangedEventArgs e) at
Microsoft.VisualStudio.Text.Utilities.GuardedOperations.RaiseEvent[TArgs](Object
sender, EventHandler`1 eventHandlers, TArgs args)
The Source column of the log says it comes from a "Editor or Editor Extension". I'm running vanilla VS2012 here, with no extensions aside from the first party stuff (Microsoft Web Developer Tools, NuGet Package Manager, and Visual Studio Extensions for Windows Library for JavaScript).
EDIT: Some additional details. If I create a new solution and MVC4 project, add the line:
#RenderSection("title", false)
to the layout, and then attempt to define the section in a view:
#section title{Stuff}
The moment I start typing "Stuff" within the braces I get the same errors/behavior.
Turns out whatever changed in Razor made braces a bit more...sensitive. If you have a section defined in your layout like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#RenderSection("title", false) - MyApp</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("css",false)
</head>
...
And then, in a view that uses the layout, try to use that section exactly like this (make sure you actually type it, don't copy/paste):
#model MyApp.Web.Models.HomeIndexModel
#section title {Lovely Title}
Razor will throw a fit and toss an error into your Visual Studio activity log. Highlighting and most Intellisense support will also fail to work. After some trial and error, I found that it works fine if you basically never leave the braces on the same line. So, write it like this:
#model MyApp.Web.Models.HomeIndexModel
#section title {
Lovely Title
}
And it will work fine.