The example provider here does not work
How to use jQuery UI from Blazor component
https://blazorfiddle.com/s/kg13ms5x
This is how you initialize the resizable widget from Blazor. You can place this code where you want, preferably in the App or layout components...
#inject IJSRuntime JSRuntime
#code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<object>("jQueryWidgets.initialize");
}
}
Add the following script... jQueryWidgets is the namespace, initialize is the 'name' of the function...
JavaScript (_Host.cshtml, if you use Blazor Server )
<script src="_framework/blazor.server.js"></script>
<script>
window.jQueryWidgets = {
initialize: function () {
$("#resizable").resizable();
}
};
</script>
Note that you should also add the necessary jQuery files. Place them within the head html element in _Host.cshtml, if you use Blazor Server
#Isaac's code is correct.It seems that you do not have proper references to jquery-ui:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ServerSideBlazor</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
#*Add below references*#
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#resizable {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
I suggest that you could create a new blazor project with visual studio 2019 and asp.net core 3.0 sdk.
Related
I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<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>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
I've followed every step in this article: https://waelkdouh.medium.com/integrating-blazor-components-into-existing-asp-net-core-mvc-applications-b1a2aec4ac1f
I've created a file named MyFirst.razor in the Components/Pages folder, but it doesn't render when referenced in Index.cshtml as .
Components.Pages/MyFirst.razor
#page "/my-first"
<h3>Current count: #count</h3>
#code {
private int count = 0;
private void HandleClick()
{
count++;
}
}
Views/Home/Index.cshtml
#using LC.BlazorTest.Components.Pages
<h1>Velkommen - blaze up</h1>
<MyFirst />
Index page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BlazorBlazor</title>
<link href="/IMAGE/fav-icon.png" rel="icon" type="text/CSS" />
<link href="/STYLE/Creator/Creator.css" rel="stylesheet" type="text/CSS" />
</head>
<body>
<main role="main" class="pb-3">
<h1>Velkommen - blaze up</h1>
<MyFirst />
</main>
<script crossorigin="anonymous" src="/SCRIPT/Creator/Creator.js" type="application/JAVASCRIPT"></script>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c237ba9e1f.js" type="application/JAVASCRIPT"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
the tag hasn't changed.
Looks like you are trying to render a Blazor component into an MVC view. As far as I know, it is not that simple.
You may want to use the component tag helper to render Blazor components in cshtml views.
Unfortunately, MVC views are rendered once on the server, so you can not simply just put a component name like with your regular Blazor app.
You can prerender the component (it will remain static), use server-side rendering or client-side rendering (WebAssembly). It may be a little bit tricky tho since you mix multiple rendering styles together. In short, use
<component type="typeof(MyFirst)" render-mode="ServerPrerendered" />
instead of
<MyFirst />
when writing in cshtml files (MVC pages/views).
Checkout render modes or prerendering
Here I have blazor server app, in app I have two _Host.cshtml, one for website which is default _Host.cshtml and another for admin panel that is _HostAdmin.cshtml. Both of them have separate css and js file. I too have separate layout, for website I have Mainlayout.razor which should use _Host.cshtml and for admin panel I have AdminLayout.razor which should use _HostAdmin.cshtml .
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
Below is my _HostAdmin.cshtml
#page "/Admin"
#namespace MCQ.Pages._Pages_Admin__HostAdmin
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="~/Admin" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
<script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
<script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="~/Adminlte/plugins/moment/moment.min.js"></script>
<script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="~/Adminlte/dist/js/adminlte.js"></script>
<script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
<script src="~/Adminlte/dist/js/demo.js"></script>
</body>
</html>
Below is Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
});
You state
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
and I assume your question is "Why".
You're adding a new razor component page to the existing application - probably with a route of something like "/admin/myadminpage". You're misunderstanding what's actually going on.
_Host.cshtml loads the SPA, but that's the only get/post that happens. Navigation after that is changing out components in the DOM. Loading a component with the layout AdminLayout just changes out the Layout component. There's no toing and froing with the server.
What you are trying to do requires a reload of the SPA. You could use:
NavigationManager.NavigateTo("/admin/myadminpage", true);
Also even if you do force a reload, the Fallbacks are in the wrong order - the default before the specific.
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
It seems that when running my application using SignalR on my development server with IIS I get the error below in the JS console (while it's completely fine running the application locally in Debug):
Uncaught Error: SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.
at hubs:17
at hubs:106
Line 17 is related to:
if (typeof ($.signalR) !== "function") {
throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
}
Line 106 is just the end of the IIFE.
Here is below BundleConfig class:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
var scriptBundle = new ScriptBundle("~/Scripts/bundle");
// jQuery
scriptBundle.Include("~/Scripts/jquery-3.1.1.min.js");
// Bootstrap
scriptBundle.Include("~/Scripts/bootstrap.min.js");
// Knockout
scriptBundle.Include("~/Scripts/knockout-{version}.js");
// SignalR
scriptBundle.Include("~/Scripts/jquery.signalR-{version}.js");
// Custom site scripts
scriptBundle.Include("~/Scripts/scripts.js");
scriptBundle.Include("~/Scripts/scripts-bootstrap.js");
scriptBundle.Include("~/Scripts/scripts-devextreme.js");
var styleBundle = new StyleBundle("~/Content/bundle");
// Bootstrap
styleBundle.Include("~/Content/bootstrap-telus-theme.min.css");
// Font Awesome
styleBundle.Include("~/Content/font-awesome.min.css");
// Custom site styles
styleBundle.Include("~/Content/Site.css");
styleBundle.Include("~/Content/Site-bootstrap-plus.css");
styleBundle.Include("~/Content/Site-devextreme-plus.css");
bundles.Add(scriptBundle);
bundles.Add(styleBundle);
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
}
}
The doctype on the development server looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<link rel="favicon" href="/Content/favicons/favicon.ico" />
<link rel="favicon" sizes="32x32" href="/Content/favicons/favicon-32.png" />
<link rel="favicon" sizes="128x128" href="/Content/favicons/favicon-128.png" />
<link rel="apple-touch-icon" href="/Content/favicons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/Content/favicons/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/Content/favicons/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/Content/favicons/apple-touch-icon-144.png" />
<link href="/Content/bundle?v=KoFrSDNrdsCobjey_0WoDyRHewQDRrB1Ov9eEHg15EI1" rel="stylesheet"/>
<link href="/Content/DevExtremeBundle?v=dvjWkuzRNPhpuO8epzd1bapDA4VbH3NGrM9XfK6lfH41" rel="stylesheet"/>
<script src="/Scripts/bundle?v=bk8qAjn5FOZNS6DjmQ8qRN1l5sZzYFEHYS7tNOnf4vk1"></script>
<script src="/Scripts/DevExtremeBundle?v=EDbcZoJEzBcOEMDXw50S76TV4vRJy8nCjafsccwoAas1"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
</head>
In local debug (so without the bundle optimization):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<link rel="favicon" href="/Content/favicons/favicon.ico" />
<link rel="favicon" sizes="32x32" href="/Content/favicons/favicon-32.png" />
<link rel="favicon" sizes="128x128" href="/Content/favicons/favicon-128.png" />
<link rel="apple-touch-icon" href="/Content/favicons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/Content/favicons/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/Content/favicons/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/Content/favicons/apple-touch-icon-144.png" />
<link href="/Content/bootstrap-telus-theme.min.css" rel="stylesheet"/>
<link href="/Content/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Site-bootstrap-plus.css" rel="stylesheet"/>
<link href="/Content/Site-devextreme-plus.css" rel="stylesheet"/>
<link href="/Content/dx.common.css" rel="stylesheet"/>
<link href="/Content/dx.telus.light.css" rel="stylesheet"/>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/knockout-3.4.2.debug.js"></script>
<script src="/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="/Scripts/scripts.js"></script>
<script src="/Scripts/scripts-bootstrap.js"></script>
<script src="/Scripts/scripts-devextreme.js"></script>
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/currency.js"></script>
<script src="/Scripts/globalize/date.js"></script>
<script src="/Scripts/jszip.js"></script>
<script src="/Scripts/dx.all.debug.js"></script>
<script src="/Scripts/aspnet/dx.aspnet.data.js"></script>
<script src="/Scripts/aspnet/dx.aspnet.mvc.js"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
</head>
What is published on the development server does not run with a DEBUG constant, how can I make it work without it?
Imho the BundleTable.EnableOptimizations = true; line is not supposed to mess up my signalR bundling and still that's pretty much the only difference I can see between the two. However when running with the development server configuration locally it also works even with the optimization bundle enabled...
The issue happened because bundle optimization is skipping min files. And you bundled JS doesn't have jQuery, which is required for SignalR.
For more details, please check this answer: Bundler not including .min files
I recently installed a new site in Ektron. It created all the folders and files necessary to have it working. I created a custom MasterPage in VS 2012 with own folders and CSS/Script files and looking to import it into Ektron to use.
I imported from Workarea > Settings > Template and import template.
When I click on View for the template, I am seeing the following error:
Parser Error Message: Could not load type 'WMED.Site'.
Source Error:
Line 1: <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WMED.Site" %>
Line 2:
Line 3:
Source File: /Site.Master Line: 1
How do I resolve the error
:: Should I remove the inherit and namespace from the MP for it to work?
The HEAD:
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="theScripts/sliderJS.js"></script>
<link rel="stylesheet" href="theStyles/sliderStyle.css" type="text/css" />-->
<link rel="stylesheet" href="theStyles/pageStyle.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/trajanpro_style.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/blackjar_style.css" type="text/css" />
<script src="theScripts/jquery.webticker.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/tickerStyles.css" type="text/css" />
<script src="theScripts/pageScript.js" type="text/javascript"></script>
<script src="theScripts/placeholders.min.js" type="text/javascript"></script>
<script src="theScripts/jquery.sidr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jquery.sidr.light.css" type="text/css" />
<script src="theScripts/jssor.js" type="text/javascript"></script>
<script src="theScripts/jssor.slider.js" type="text/javascript"></script>
<script src="theScripts/jssorSlider.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jssorSlider.css" type="text/css" />
<!-- ENSURES HTML TAGS ARE COMPLIANT -->
<!--<link rel="stylesheet" href="theStyles/styleDiagnostic.css" type="text/css" />-->
<script>
$(window).resize(function () {
var docHeight = $(document).height();
var docWidth = $(document).width();
$('#lbl').text("height: " + docHeight + " width: " + docWidth);
});
</script>
<script>
function SearchNMClick() {
document.getElementById('HiddenSearchNM').click();
}
</script>
<asp:ContentPlaceHolder ID="HeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
You're probably using a Web Application project opposed to a Web Site. Because of this, the code for your MasterPages, ASPX templates, wireframes...etc. is compiled into a DLL (or DLLs) when you build the project.
When you deploy your Web Application project to your Ektron site, in additional to the files you've already pushed out, you have to copy your project's DLLs into the bin directory of the site. Your project will have a bin directory after building where you can find these, just look in File Explorer to find it if you don't see it.
/bin/WMED.dll
Also, if this is the case, do not push your .cs files to the server.
You don't need to import a MasterPage into Ektron, only ASPX templates are imported. The process is, create your ASPX template (with associated MasterPage), save it into your website and then register it with Ektron.
Check the master page's code behind file (the .cs) and make sure that the public partial class looks like public partial class WMED.Sitename is using the same. Also make sure that the .cs file is located in the same directory as the .master template.