I want to show quotes when the blazor wasm app loads. How to access this msg class. I have put the script in index.html header tag. But can't access this?
<script>
fetch("https://localhost:44359/data/Quotes.json")
.then(res => res.json())
.then(data => console.log(data.quotes));
document.querySelector("body").innerHTML = "hey";
</script>
</head>
<body>
<app>
<div class="loading-page">
<div class="quotes">
<div class="msg"></div>
<div class="author"></div>
</div>
<div class="loader mt-5">
<div class="loader-dot dot1"></div>
<div class="loader-dot dot2"></div>
<div class="loader-dot dot3"></div>
</div>
</div>
</app>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register("service-worker.js");
</script>
</body>Is there any way ???
This is how you should do it:
<body>
<app><div id="message"></div></app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>
(function () {
var quote = document.getElementById("message");
fetch("sample-data/quotes.json")
.then(res => res.json())
.then(data => quote.innerHTML = data[1].msg + "<br /><br />" + data[1].author);
})();
</script>
</body>
Create a folder named sample-data in the wwwroot folder and create in it a json file with the following data:
[
{
"msg": "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest I go to than I have ever known.",
"author": "Charles Dickens"
},
{
"msg": "All we have to decide is what to do with the time that is given us.",
"author": "J.R.R. Tolkein"
},
{
"msg": "It matters not what someone is born, but what they grow to be.",
"author": "J.K. Rowling"
}
]
Note: You can insert whatever markup you want into the app element, including images, text sliders, etc., and do whatever manipulation you fancy... What is important, however, is that all your code should be within the immediate function, at the same location it is placed in the sample.